bootstrap下载：
英文网址： 中文网址：
选择编译压缩版本，可下载到本地使用，也可网上引用CDN
bootstrap应用 - CDN引入:
引用框架（基础）与注意点：
**上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后!**Bootstrap应用简介 你好，世界！
**在引用bootstrap.min.js前需先引用jquery.js**
bootstrap学习
文中带 . 的标号为class选择器，如.lead为class ="lead";
第一部分：Bootstrap - 标签属性
1.全局样式style.css:
- 移除body的margin声明；
- body的背景色为白色；
- 为排版设置了基本的字体、字号和行高
- 设置全局链接颜色，且当链接处于悬浮（hover）状态时才会显示下划线
2.标题h1~h6样式：
- margin-top、margin-bottom:h1~h3重置后是20px,h4~h6为10px;
- line-height:默认为字体大小的1.1倍，文本颜色和字体都继承父级元素
- 字体大小：h1:36px;h2:30px;h3:24px;h4:18px;h5:14px;h6:12px;
3.强调内容：
-
.lead一般配合段落标签使用，最好配合strong标签
-
small多配合h标题系列标签使用，作为副标题
-
strong、b加粗效果的标签
-
em、i、var、cite斜体效果的标签
-
强调相关的类：
.text-muted：提示，使用浅灰色（#999） .text-primary：主要，使用蓝色（#428bca） .text-success：成功，使用浅绿色(#3c763d) .text-info：通知信息，使用浅蓝色（#31708f） .text-warning：警告，使用黄色（#8a6d3b） .text-danger：危险，使用褐色（#a94442）
4.文本对齐风格：
- text-left：左对齐
- text-center：居中对齐
- text-right：右对齐
- text-justify：两端对齐
5.列表：
-
.list-unstyled:去除序列,ul下li的无序排列和ol下li的有序排列；
-
.list-inline：垂直列表换成水平列表形式显示；
-
.dl-horizontal:水平定义列表效果，当屏宽大于768px的时候，才适用；
- 我是定义列表标签
- 我是定义列表阐述
6.code和pre
- code:一般是针对单个单词或单行句子的代码，效果：标红、背景色、突出效果；
- pre:一般是针对多行句子的代码，需要在标签上添加
.pre-scrollable,控制代码块的最大高度为340px;超出部分显示滚动条； - code和pre代码中出现<或>一律用<,>代替。
第二部分：Bootstrap - 表格table
-
只加
.table： 给表格设定了margin-bottom:20px以及设置单元内距；在thead底部设置2px的浅灰实线，每个单元格设置1px的浅灰实线 -
附加样式表格：
.table-striped：斑马线表格 .table-bordered：带边框的表格 .table-hover：鼠标悬停高亮的表格 .table-condensed：紧凑型表格
-
响应式表格：
.table-responsivetable父级div的类名 ，特性：支持响应式布局，当浏览器宽度小于768px时表格下端出现可视的滚动条标题1 标题2 标题3 内容1 内容2 内容3 内容1 内容2 内容3 内容1 内容2 内容3
第三部分：Bootstrap-图片和图标
1.图片：使用方法非常简单，只需在img标签内设相应的类名
-
img-responsive：响应式图片，主要针对响应式设计；
-
img-rounded:圆角图片；
-
img-circle: border-radius:50%；
-
img-thumbnail:缩略图片；
举例(img-responsive：响应式，img-circle：border-radius:50%)：
2.图标：使用方法也很简单，任何行级标签都可以，通常用span标签进行添加
- 图片网址：
- 引入方式：
<span class="glyphicon-search"></span>
第四部分：Bootstrap-form表单
form自带属性：a: (action为提交的地址) b: (method:提交的方式 get-显性/post-隐性) c:role(h5的属性，增强语意) 添加属性：.form-horizontal（表单水平排列，配合网格系统使用）.form-inline(内联表单)
1.input:(多使用.form-control类):习惯配合lable使用，外部设div(.form-group)
2.select:默认选择一个选项，多使用form-control,多行选择设置multiple
3.textarea:设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性
4.多选框(水平排列，lable加类.checkbox-inline)、单选框(水平排列，lable加类.radio-inline)
5.button:.btn .btn-default默认风格
注册表单
第五部分：Bootstrap-网格系统：
1.实现的原理：将容器划分为12等份，配合媒体查询使用
2.工作原理：.container(容器类名) .row(行类名) 宽度多以中屏为准：col -md（970） ,其他col-lg-1（1170）,col-xs-1(自动),col-sm-1（750）
3.列偏移：.col-md-offset-1(加上此类的列元素，向右移动1个列的宽度)，注意总列数不超过12
4.列排序：col-md-push:向右偏移 col-md-pull:向左偏移
第六部分：Bootstrap-导航：
1.基础样式：.nav
2.标签式导航(也称选项卡导航)：.nav-tabs(),若有标签默认选中，添加class="active"
3.自适应导航：.nav-justified 配合 .nav-tabs或者.nav-pills使用
4.面包眉导航：ol添加类.breadcrumb
5.胶囊形(pills)导航
胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”类似，同样的结构，只需要把类名'nav-tabs'换成'nav-pills'即可
6. 垂直堆叠的导航
在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在'nav-pills'的基础 上添加一个'nav-stacked'类名即可在下拉菜单一节中，下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果，只需要添加在导航项之间添加“”即可
第七部分：Bootstrap-下拉菜单：
1.使用一个名为“dropdown”的容器包裹了整个下拉菜单元素
2.使用了一个button按钮做为父菜单，并且定义类名'dropdown-toggle'和自定义'data-toggle'属性，且值必须和最外容器类名一致
3.下拉菜单项使用一个ul列表，并且定义一个类名为'dropdown-menu'
4.Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或 者“dropdown-menu-right”类名
5.给li添加dropdown-header类;-- 给li添加dropdown-divider类; -- li添加.active; -- li添加.disabled;
6.导航菜单<div class=“ban-group”>
</div> ###### 7.垂直分组：把水平分组的“ban-group”类名换成“ban-group-vertical”即可 ###### 8.等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名,每组按钮都要加上btn-group的类
9.有的时候我们的下拉菜单会向上弹起，这个时候我们的三角方向需要朝上显示，实现方法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名）
可参考网站：