BootStrap
下载与使用
1. 下载：http://v3.bootcss.com/getting-started/
2. 下载完成后，
拷贝 dist/css 中的 bootstrap.min.css 到项目 css 中
拷贝 dist/js 中的 bootstrap.min.js 到项目的 js 中
3. 下载 jquery.js
http://jquery.com/
4. 在 html 中模板为:
说明：
（1） ViewPort 标记用于指定用户是否可以缩放 Web 页面
（2） width 和 height 指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单
位的数字，要么是一个特殊的标记符号。
（3） width 指令使用 device-width 标记可以指示视区宽度应为设备的屏幕宽度。
（4） height 指令使用 device-height 标记指示视区高度为设备的屏幕高度。
（5） initial-scale 指令用于设置 Web 页面的初始缩放比例。默认的初始缩放比例值因智
能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个 Web 页
面，设为 1.0 则将显示未经缩放的 Web 文档。
5. 参考 API
http://v3.bootcss.com/css/
布局容器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<!--.container 类用于固定宽度并支持响应式布局的容器。-->
<div class="container" style="background-color: bisque;height:300px;"></div>
<hr />
<!--.container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。-->
<div class="container-fluid" style="background-color: khaki;height:300px;"></div>
</body>
</html>
栅格网格系统
数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12,则自动换到下一行。
1、列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超12，大于12,则自动换到下一行。），有点类似于表格的colspan属性。
2、列偏移
只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-8”，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列断行|换行显示)。
3、列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
在Bootstrap框架的网格系统中是通过添加类名”col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。往前pull，往后push。
4、列嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.
排版
1、标题
定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题<small></small>或使用.small
2、段落
通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。可以使用以下标签给文本做突出样式处理：
<small>:小号字
<b><strong>:加粗
<i><em>:斜体
3、引用
<blockquote>：标签定义摘自另一个源的块引用
使用.blockquote-reverse，实现右对齐。
<footer>:脚注
<cite>：表示对某个参考文献的引用
4、强调
定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
5、文本对齐
Bootstrap通过定义四个类名来控制文本的对齐风格：
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐。
6、列表
（1）去点列表:
class="list-unstyled"
（2）内联列表:
class=” list-inline”，把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生
7、代码
（1）使用<code></code>来显示单行内联代码
（2）使用<pre></pre>来显示多行块代码
样式：pre-scrollable (height,max-height高度固定,为340px,超过存在滚动条)
（3）使用<kbd></kbd>来显示用户输入代码,如快捷键
表单
.form-control .input-lg（较大） .input-sm（较小）
（1）输入框
.form-control
（2）下拉选择框select
多行选择设置：multiple="multiple"
（3）文本域textarea
<textarea class="form-control" rows="3"></textarea>
（4）复选框checkbox
.checkbox，水平显示：.checkbox-inline
（5）单选择按钮
.radio， 水平显示：.radio-inline
（6）按钮
1）使用button 实现
基础样式： btn
附加样式：btn-primary btn-info btn-success btn-warning
btn-danger btn-link btn-default
2）多标签支持:使用a div 等制作按钮
3）按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
