1.使用：
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
宽度=设备宽，初始化缩放为1，即不缩放
<meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrap框架在这一部分做了一定的变更，不再一味追求归零，而是更注重重置可能产生问题的样式
移除body的margin声明
设置body的背景色为白色
为排版设置了基本的字体、字号和行高
设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式
2.控件
使用了<small>标签来制作副标题
<h1>孤儿院无私奉献30年
<small>一曲人性的赞歌</small></h1>
<p>我是一个段落，你猜我在Bootstrap是以什么样的风格显示。</p>
<p class="lead">这部分内容需要特别的强调，我和别人长得不一样</p>
<b>“强调”</b>一词将会加粗显示
<strong>“强调”</strong>
斜体<i>Bootstrap</i>
3.简化类：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐
4.列表
无序列表
<ul>
<li>…</li>
</ul>
有序列表
<ol>
<li>…</li>
</ol>
定义列表
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
例：
<ol>
<li>有序项目列表一</li>
<li>有序项目列表二</li>
<ol class="list-unstyled">
<li>有序二级项目列表一</li>
<li>有序二级项目列表二</li>
<ul>
<li>无序三级项目列表一</li>
<li>无序三级项目列表二</li>
<ul class="list-unstyled">
<li>无序四级项目列表一</li>
<li>无序四级项目列表二</li>
</ul>
<li>无序三级项目列表三</li>
</ul>
<li>有序二级项目列表三</li>
</ol>
<li>有序项目列表三</li>
</ol>
总结：
有序带编号：ol>li
有序无编号：ol.list-unstyled>li
无序带编号：ul>li
无序无编号：ul.list-unstyled>li
内嵌样式：即平铺
<ul class="list-inline">
列表--定义列表
<dl>
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客</dd>
<dt>慕课网</dt>
<dd>一个真心在做教育的网站</dd>
</dl>
列表--水平定义列表
<dl class="dl-horizontal">
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码
不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。
Y轴出现滚动条
只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条
5.表格：
表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格
.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格
表格--表格行的类
<tr class="active">
<td>…</td>
</tr>
类名 描述
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告，需要特别注意
基础表格
<table class="table">
带边框的表格
<table class="table table-bordered">
…
</table>
6.表单：
使用了类名“form-control”，将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色（#ccc）的边框
3、具有4px的圆角
4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
当然表单除了这几个元素之外，还有input、select、textarea等元素，在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。
自动随着浏览页面大小而垂直、水平
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。
内联表单
在<form>元素中添加类名“form-inline"
如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中
表单控件
(输入框input)
为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”
(下拉选择框select)
多行选择设置multiple属性的值为multiple
(文本域textarea)
<textarea class="form-control" rows="3">
(复选框checkbox和单选择按钮radio)
主要借助“.checkbox”和“.radio”样式
1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。
(复选框和单选按钮水平排列)
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”
(按钮)
input[type=“submit”]
input[type=“button”]
input[type=“reset”]
<button>
表单控件大小
用来控制表单控件的高度。这两个类名是：
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
表单控件状态
(焦点状态)
要让控件在焦点状态下有上面样式效果，需要给控件添加类名“form-control”
(禁用状态)
只需要在需要禁用的表单控件上加上“disabled”即可
(验证状态)
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名
表单提示信息
使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。
7.按钮
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>
<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>
块状按钮
只需要在原按钮类名上添加“.btn-block”类名，当然“.btn”类名是不可或缺的
<button class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>
按钮状态——禁用状态
要禁用按钮有两种实现方式：
方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名“disabled”
8.图像
1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片
图标（一）
<span class="glyphicon glyphicon-cloud"></span>
通过设置内间距（padding）从而创建列与列之间的间距，然后通过为第一列和最后一列设置负的外间距（margin）来抵消内间距（padding）的影响
列偏移
需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度
列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。
<div class="col-md-4 col-md-push-8">.col-md-4</div>
<div class="col-md-8 col-md-pull-4">.col-md-8</div>
列的嵌套
可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。
9.下拉菜单
（基本用法）
因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:
<div class="dropdown"></div>
2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:
data-toggle="dropdown"
3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:
<ul class="dropdown-menu">
（原理分析）
通过js技术手段，给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说，默认情况，“div.dropdown”没有类名“open”，当用户第一次点击时，“div.dropdown”会添加类名“open”；当用户再次点击时，“div.dropdown”容器中的类名“open”又会被移除
（下拉分隔线）
添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能
（菜单标题）
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
（对齐方式）
如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名
