今天主要跟大家讲解下bootstrap的栅格布局，以及使用过程中应该注意的问题首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构如下图： 必须给要使用栅格布局的盒子定义class为container。目的一是为了在响应式的布局上给宽度约束，二是提供padding以至于不让内容贴住浏览器的边缘。 Class为row的盒子是指行的容器，bootstrap把一行分成了12等分，下面讲解下col-xx-是怎么使用的吧。 Bootstrap栅格布局中css中有四个类...
前言原创文章，欢迎转载，请保留出处。
有任何错误、疑问或者建议，欢迎指出。
我的邮箱:Maxwell_nc@163.com
在上一篇文章中（http://blog.csdn.net/maxwell_nc/article/details/45791745）中主要讲到Bootstrap的栅格布局系统，虽然之前说要更新如何写导航栏，但是想了下还是先介绍下如何做CSS的媒体查询和响应式表格，这样才能为以后的编码打下基础。CSS的媒体查询我们要知道，实际上Bootstrap的栅格布局系统主要是利用的CSS的媒体...
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>home</title><!--[if lt IE 9]><meta http-equiv="refresh" content="0;ie.html" /><![endif]--><!--Bootstrap 内核 css 开始--><link href="Bootstrap/css/bootstrap-theme.css" rel="stylesheet"/><link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet"/><!--Bootstrap...
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <link href="../css/bootstrap.css" type="text/css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script> $(functio...
<!DOCTYPE html><html><head><meta charset="utf-8"><title>bootstrap11</title><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> </head><body><div class="container"><table class="table"><caption>基本的表格布局</caption><thead> <tr> <th>名称</th> <th>城市</th> </tr></thead><tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> ...
<input type=‘text‘ value=‘‘ placeholder=‘输入您的用户名‘ class=‘input-mini‘ /> ①几个类控制文本框长度 input-mini:最小 如图： input-small:次小 如图： input-medium:中等 如图： input-max:最长 如图： spanN:N代表数字，最大12，N表示1个网格的宽度 例如：span4表示对应的input框占用4个网格的宽度 ②属性：placeholder="输入您的用户名",当用户开始输入...
导航路径：又叫“面包屑”，功能是让用户知道所处的位置。<!--面包屑-->
<ul class=‘breadcrumb‘><li><a href=‘#‘>首页</a> <span class=‘divider‘>></span></li><li><a href=‘#‘>餐厅列表</a> <span class=‘divider‘>></span></li><li class=‘active‘><a href=‘#‘>餐厅详细</a></li>
</ul>如图：分页器：一般用在内容的列表页面，在不同的内容页面来回的跳转。<!--分页器-->
<div class=‘ pagination pagination-c...
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>BootStrap</title> 6<link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap.css"> 7<script type="text/javascript" src="../../resources/bootstrap-2/js/bootstrap.js"></script> 8<script type="text/javascript" src="../../resources/jQuery/jquery-1.12.4.min.js"></script> 91011<script type="text/javas...
提示信息的设计提示信息的类：.alert:提示信息类.alert alert-danger:.alert alert-error:.alert alert-success:.alert alert-info:.alert alert-block:.alert alert-heading:提示信息按钮：<a href=‘javascript:;‘ class=‘close‘ data-dismiss=‘alert‘></a>代码块：<div class=‘container‘><h2 class=‘page-header‘>Bootstrap 提示信息</h2><div class=‘alert alert-heading‘><!--给这个提示框添加一个关闭按钮--><a ...
1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。2、保证在窄屏时要显示的图标样式（固定写法）：1<button class="navbar-toggle" type="button" data-toggle="collapse">2<span class="sr-only">Toggle Navigation</span>3<span class="icon-bar"></span>4<span class="icon-bar"></span>5<span class="icon-bar"></span>6</...
本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。
如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<s...
1. 表单
表单是html网页交互很重要的部分，同时也是BootSTrap框架中的核心内容，表单提供了丰富的样式(基础、内联、横向)
表单的元素
input textarea select checkbox radio(checkbox和radio是input的特殊类型)
其他标签
form fieldset legend
1.1.基础表单
<!--基础表单：
1.向父 <form> 元素添加 role="form"。
2.把标签label和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。因为form-group提供...
本文实例为大家分享了Bootstrap CSS布局中的列表布局，供大家参考，具体内容如下
列表
普通列表ul li
有序列表ol li
去点列表.list-unstyled
内联列表.list-inline
定义列表dl dt dd
水平定义列表dl-horizontal
ul,
ol {margin-top: 0;margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {margin-bottom: 0;
}普通列表ul li
有序列表ol li
去点列表class=”list-unstyled”
//源码
.list-unstyled {padding-left: 0;list-...
1. 表格的一些样式举例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title><link rel="stylesheet" href="./css/bootstrap.min.css"> <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body><table class="table table-striped"><caption>这是一个测试表格</caption><thead><tr><th>姓名</th><th>年龄</th>...
在实际开发中，我们通过菜鸟教程复制的表格往往不能满足我们的开发需求，样式很难看，而且不能自适应，尤其是需要到处Excel的样式，感觉非常糟糕，这次我就写了一个表单，不足之处，希望大神们多多指教；代码如下： <html><head></head><body class="body-white">1 2 3 4 <title>查询详情</title> 5 <meta name="keywords" content="" /> 6 <meta name="description" content="" /> 7 <meta charset="utf-8" /> 8 <link rel="st...
