一.bootstrap的集成与引入
bootsrap中文网
bootstrap官网
集成方法一
下载bootstrap安装包
1.解压安装包后，将CSS、JS文件导入到项目中
2.在项目中引用
集成方法二
使用CDN在线下载
二.bootstrap特性
1.移动设备优先
在head标签中添加
2.栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
- 超小屏幕 手机 (<768px)
.col-xs- - 小屏幕 平板 (≥768px)
.col-sm- - 中等屏幕 桌面显示器 (≥992px)
.col-md- - 大屏幕 大桌面显示器 (≥1200px)
.col-lg-
列偏移
.col-md-offset-3
嵌套列
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
列排序
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
3.列表
- 无样式列表
移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
- ...
- 内联列表
通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
- ...
4.表格
- 条纹状表格
通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。
warning:条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。- 带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。...
- 鼠标悬停
通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。...
- 紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
...
- 响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
垂直方向的内容截断
响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。
Firefox 和 fieldset 元素Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中：
@-moz-document url-prefix() { fieldset { display: table-cell; } }5.表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、
- 紧缩表格
- 带边框的表格