Bootstrap 样式
行 .row , 如： <div class="row">...</div>
横跨多少列 .span*, 网格布局包含 12 列，所以 * 加起来必须等于 12。(3-6-3、4-8、3-5-4、2-8-2)
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
平移列 .offset，向右平移列， 用于指定平移的列数。
<div class="row">
<div class="span2">...</div>
<div class="span7 offset2">...</div>
</div>
嵌套列，在相应的 .span中再增加一个 .row，再包含与父容器列数相等的 .span 即可。
<div class="row">
<div class="span9">
Level 1 of column
<div class="row">
<div class="span3">Level 2</div>
<div class="span6">Level 2</div>
</div>
</div>
</div>
流式网格系统
只需把 .row 改为 .row-fluid，.offset*...其他一样
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8 offset2">...</div>
</div>
流式网格中的嵌套有点不一样，因使用百分比的情况下，每个 .row 都会把列数重置为 12。如，在一个 .span8 中嵌套两个等宽的列，不能使用两个 .span4，应使用 .span6。
<div class="row-fluid">
<div class="span8">
<div clas="row">
<div class="span6">...</div>
<div class="span6">...</div>
</div>
</div>
</div>
容器布局
固定宽度、居中的布局: <div class="container">...</div>
流式布局，内容封装到一个容器：<div class="contain-fluid">...</div>
响应式设计
添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">,
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
Chapter 2 Bootstrap 预定义的 CSS 样式
字体栈：Helvetica Neue, Helvetica, Arial, sans-serif
字体大小：页面正文 font-size = 14px, line-height = 20px, 所有段落的 margin-bottom = 10px
(行高是怎么定义的呢？)
强调段落：class="lead"
强调内容：使用 small 标签 <small>....</small>
粗体：<strong>...</strong>
斜体：<em>...</em>
颜色强调类，应用于<p>或<span>，如：
.muted, .text-warning, .text-error, .text-info, .text-success.
搜索表单
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
行内表单
<form class="form-inline">
<input type="text" class="input-small" placeholder="...">
<input type="password" class="input-small" placeholder="...">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
横向表单
- 为 <form> 元素添加 .form-horizontal 类；
- 把成对的标签和空间包装在类为 .control-group 的 div 中；
- 为其中每个标签添加 .control-label 类；
- 把其中每个控件包装在一个类为 .controls 的 <div> 中，一边对齐
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
...
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn">Submit</button>
</div>
</form>
