1、Bootstrap是什么？
其实就是前段页面搭建的标准化框架工具，就是已经写好了的css.js样式拿来用即可。
Bootstrap的好处：增加了开发效率，页面设计更加美观，支持响应式开发
2、首先布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container容器
.container类用于固定宽度并支持响应式布局的容器。
.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
3、栅格系统:是用于通过一系列的行（row）与列（column）的组合来创建页面布局
行：.row
列.coi-xs- .col-sm- .col-md- .col-lg- col-*-push-向后偏移 col-*-pull-向前偏移
“行（row）”必须包含在.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
内容应当放置于“列（column）”内，并且只有“列（column）”可以作为行（row）”的直接子元素。
4、响应式工具：visible 可见
写法：visble-(lg md sm xs)-(block inline inline-biock)
hidden 隐藏
hidden-lg(md sm xs)控制在哪个分辨率下隐藏
字体图标：glyphicon fint-size:设置图标大小 color:设置图标颜色
5、预定义样式风格
prilmary 首选项
success 成功
info 一般信息
warning 警告
danger 危险
6、按钮
尺寸：.btn-lg、.btn-sm或.btn-xs就可以获得不同尺寸的按钮。
通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
激活状态 ：.active .disabled
响应式图片
通过为图片添加.img-responsive类可以让图片支持响应式布局。其时是为图片设置了max-width: 100%;、height: auto;和display: block;属性，从而让图片在其父元素中更好的缩放。如果需要让使用了.img-responsive类的图片水平居中，请使用.center-block
7.浮动pull-left pull-right清除浮动clearfix
8.表格：.table隔行变色表格.table-striped带边框的表格table-bordered有鼠标悬停响应的表格table-hover紧凑的表格table-condensed
表格状态active success info warning danger
9.表单：内联表单form-inline水平排列表单form-horizontal
设置宽度属性width:100%：form-control label-control将label和输入框包裹起来:form-group
单选框radio复选框checkbox下列列表dropdown
10.输入框组input-group input-group-addon input-group-btn尺寸input-group-lg input-group-sm
11.下拉菜单盒子dropdown、
a(dropdown-toggle data-toggle=”dropdown”)
Dropdown-menu-right菜单右对齐
Dropdown-menu-left左对齐（默认）
Dropdown-header标题
Divider分割线
Disable禁用caret小箭头
12.导航：nav标签页nav-tabs胶囊式导航nav-pills垂直排列nav-stacked两端对齐nav-justified
13导航条navbar-default导航标题navbar-header
表单navbar-form
按钮navbar-btn
文本navbar-text
链接navbar-link
定位navbar-fixed-top;固定到上面
navbar-fixed-bottom固定到底部
;navbar-static-top
反色navbar-inverse
14.路径导航.breadcrumb分页
Pagination
Active disable
Pagination-lg Pagination-sm
Pager
徽章
x
巨幕.jumbotron
页头.page-header
进度条.progress;progress-bar
条纹progress-bar-striped动画active
媒体对象.media
.media-left(right/middle)
.media-body .media-object
.media-heading
/Q���X�r
