Bootstrap

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