Bootstrap的CSS样式全面使用介绍
Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。HTML的基本元素均可以通过class设置样式并得到增强效果。
Bootstrap使用了 HTML5 元素和 Css属性，故需要使用 HTML5。
移动设备与桌面设备的差别 在于 屏幕的大小，Bootstrap 使用 viewport 来控制屏幕的缩放。
指的是让viewport的宽度等于物理设备上的真实分辨率，且不允许用户缩放。
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /
【属性】
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放，可以传 yes 或 no 。(大多数情况下有用，可以自己写js去实现)
shrink-to-fit：自适应手机屏幕宽度，shrink-to-fit=no属性是苹果专属的，在Safari IOS9开始引入，安，卓以及其他系统没有。
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。
container 用于包裹页面上的内容，其左右外边距由浏览器决定。
Step1：使用 container 包裹页面。
Step2：使用 col-xs- 、col-sm- 、col-md- 、col-lg- 来划分网格。
step3：使用 @media 来监控 屏幕大小的变化。
/* 超小设备（手机，小于 768px） */@media (max-width: @screen-xs-max) { ... }/* 小型设备（平板电脑，768px 起） */@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }/* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }/* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }
div class="container" h1 Hello, world! /h1 div class="row" p 排序前 /p div class="col-md-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;" 我在左边 /div div class="col-md-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;" 我在右边 /div /div div class="row" p 排序后 /p div class="col-md-4 col-md-push-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;" 我在左边 /div div class="col-md-8 col-md-pull-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;" 我在右边 /div /div /div
写在父标签中，可以得到一个字体颜色浅、字体更小的文本。
class= lead 得到字体稍大、行高稍高的文本
class= text-left 向左对齐文本
class= text-center 居中对齐文本
class= text-right 向右对齐文本
【以下几个属性大致相同，字体颜色不同】
class= text-muted
class= text-primary
class= text-success
class= text-info
class= text-warning
class= text-danger
abbr 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示title属性中的信息。
class= list-unstyled 用于去除列表的样式
class= list-inline 用于将列表水平显示
dl、dt、dd 用于自定义列表
class= dl-horizontal 用于将自定义列表水平显示
table 定义表格 thead 定义表格标题行 tbody 定义表格主体 tr 定义表格行 td 定义表格列 th 定义表格列（用于 thead 中） caption 定义表格描述信息
class="table" 基本表格样式，只有横向的分割线class="table-striped" 给 tbody 添加条纹（表格间有色差）。class="table-bordered" 给所有的单元格添加边框class="table-hover" 给 tbody 添加悬停样式（加个背景色）class="table-condensed" 使表格样式更紧凑
几个属性会选中某行、某列数据，根据不同的属性，显示不同的颜色。
class="active" 表示选中某条数据（有个阴影）class="success" 表示成功class="info" 表示信息变化class="warning" 表示警告class="danger" 表示危险
使用 role= form 声明 form。
使用 class= form-inline 将 form 改为一行显示（内联表单）。
使用 class= form-group 使表单控件间可以获取合适的间距。
使用 class= form-control 为文本 加个文本框。
使用 class= checkbox 为复选框添加样式。
【举例：】
form class="form-inline" role="form" div class="form-group" label for="name" 名称 /label input type="text" class="form-control" id="name" placeholder="请输入名称" /div div class="form-group" label for="inputfile" 文件输入 /label input type="file" id="inputfile" /div div class="checkbox" label input type="checkbox" 请打勾 /label /div button type="submit" class="btn btn-default" 提交 /button /form br / br / !-- 使用 sr-only 可以隐藏表单控件-- form class="form-inline sr-only" role="form" div class="form-group" label for="name" 名称 /label input type="text" class="form-control" id="name" placeholder="请输入名称" /div div class="form-group" label for="inputfile" 文件输入 /label input type="file" id="inputfile" /div div class="checkbox" label input type="checkbox" 请打勾 /label /div button type="submit" class="btn btn-default" 提交 /button /form br / br / form role="form" div class="form-group" label for="name" 名称 /label input type="text" class="form-control" id="name" placeholder="请输入名称" /div div class="form-group" label for="inputfile" 文件输入 /label input type="file" id="inputfile" /div div class="checkbox" label input type="checkbox" 请打勾 /label /div button type="submit" class="btn btn-default" 提交 /button /form
class= checkbox 用于给复选框加样式，此时可以不用写 class= form-group
class= radio 用于给单选框加样式
class= checkbox-inline 将复选框显示在同一行
class= radio-inline 将单选框显示在同一行
class= form-control 可以修改select样式
【举例：】
!-- 内联单选框、复选框样式 -- label for="name" 内联的复选框和单选按钮的实例 /label div label class="checkbox-inline" input type="checkbox" id="inlineCheckbox1" value="option1" 选项 1 /label label class="checkbox-inline" input type="checkbox" id="inlineCheckbox2" value="option2" 选项 2 /label label class="checkbox-inline" input type="checkbox" id="inlineCheckbox3" value="option3" 选项 3 /label label class="radio-inline" input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked 选项 1 /label label class="radio-inline" input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2" 选项 2 /label /div !-- slect样式 -- div class="form-group" label for="name" 可多选的选择列表 /label !-- multiple 表示可多选 -- select multiple class="form-control" option 1 /option option 2 /option option 3 /option option 4 /option option 5 /option /select /div
class="btn" 基本按钮样式class="btn btn-default" 默认按钮样式class="btn btn-primary" 原始按钮样式class="btn btn-success" 成功按钮样式class="btn btn-info" 信息按钮样式class="btn btn-warning" 警告按钮样式class="btn btn-danger" 危险按钮样式class="btn btn-link" 链接按钮样式class="btn btn-lg" 大的基本按钮样式class="btn btn-sm" 小的基本按钮样式class="btn btn-xs" 特别小的基本按钮样式class="btn btn-block" 块级的基本按钮样式，默认会填充满父标签的宽度
class="btn active" 定义激活按钮样式，背景色会改变（有色差）class="btn disabled" 定义禁止按钮样式，背景色会变（可能有些效果不能完全禁用）。
class="btn-group" 创建一个按钮组class="btn-group-lg" 创建一个大按钮组class="btn-group-sm" 创建一个小按钮组class="btn-group-xs" 创建一个特别小按钮组class="btn-group-vertical" 创建一个垂直的按钮组class="btn-group-justified" 创建一个自适应大小的按钮组（若内部是 button 标签，需给其加一个class="btn-group"）class="dropdown-menu" + class="caret" 可以创建一个有下拉框的按钮
class="bg-primary"class="bg-success"class="bg-info"class="bg-warning"class="bg-danger"
class="pull-left" 元素浮动在左侧class="pull-right" 元素浮动在右侧class="text-center" 元素居中class="show" 元素显示class="hidden" 元素隐藏class="sr-only" 元素隐藏class="text-hide" 元素隐藏
Bootstrap的CSS样式全面使用介绍
