在框架的基础上，对HTML基础元素进行样式定义，并利用可扩展的class增强其展示效果，从而提供形式新颖，风格一致的外观和体验。
整个排版系统的单位尺度都取决于variables.less文件中的两个Less变量：@baseFontSize 和 @baseLineHeight。
前者决定全局的默认字体大小font-size，后者决定默认的行高line-height。
我们利用这些变量，配合一些数学运算，就可以得到定义样式时所需的margins, paddings, line-heights等等。
许小年：政府掌握了越来越多的资源，制订了日益烦琐的管理方法，为了获得企业发展所需要的资源，或者是仅仅为了生活下去，企业不得不按照潜规则与企业打交道。我非常赞同绿公司提出的要“守本分”，但是要想企业守本分，首先政府要守本分，“逼良为娼”还不是最可怕的，回过头来的“扫黄”才是致命的一击！
余华：在涉及敏感话题时，我以前总是希望别人说出我想说的话。别人有风险，自已很安全。后来意识到如果人人都和我一样，那么我们可能长久生活在风险里。要想抵达安全，风险是必经之路。所以我开始自已说了，越来越多的人已经在自己说了……荷马史诗里描述黑压压的兵勇前进时的情景：他们将大地踩得轰然作响。
| 元素 | 用法 | 选项 |
|---|---|---|
<strong>
|
加粗强调一组文字 | 无 |
<em>
|
倾斜强调一组文字 | 无 |
<abbr>
|
包装缩写词，当鼠标经过时显示缩写词完整含义。比如少先队 |
可使用 .initialism 类可以将缩略词大写。
|
<address>
|
用于包装联系信息的最外层元素或整个信息。 |
使用 <br> 换行以保持格式不变
|
李宗苗：车辆年检，195元/辆，全深圳300万辆，年收5.85亿元。
杨佩昌：在德国，汽车、公司都无需年检。我问德国人：汽车不年检，坏了怎么办？答：自己修车。问：企业不年检，公司倒闭如潮怎么办？德国人答：你看德国是这样的吗？我问：德国政府为何不强制年检？德国人反问：谁给了政府这个权力？如果政府对年检感兴趣，说明这种事对它有好处。
注意： 在HTML5仍可以使用 <b> 和 <i> 标签，但是它们的用途已经发生了改变。
<b> 仅仅用来加粗单词或短语，没有任何语义上的含义。而 <i> 主要用在语音和技术等方面。
这有两个使用 <address> 标签的例子：
使用 title 属性的缩写词会带有点状(dotted)底边线，鼠标经过时会显示带问号的箭头，并提示完整的字词信息。
对缩写词元素应用 .initialism 会减小一号字体大小，以协调排版效果。
例子：Html 是自切片面包问世以来最棒的发明。
例子：共青团是一个光荣而伟大的组织哟~
| 元素 | 用法 | 选项 |
|---|---|---|
<blockquote>
|
用于引用外部内容的块级元素 |
.pull-left 和 .pull-right 决定是内容居左还是居右
|
<small>
|
可选元素，用于添加针对用户的引用，通常用于引言的作者。 |
可以将引言或出处置于 <cite> 标签内。
|
用 <blockquote> 嵌套 HTML 即可实现引用。
对于连续的引用内容，建议使用 <p> 标签。
还可以添加一个可选的 <small> 元素来表示引用的出处，该元素会利用样式在内容前加入宽度为一个字长的破折号 — 。
<blockquote> <p>一天吃六个胶囊，一天三次、一次两个，没有吃掉多少铬。</p> <small>卫生部合理用药专家孙忠实</small> </blockquote>
默认引用样式如下:
一天吃六个胶囊，一天三次、一次两个，没有吃掉多少铬。
卫生部合理用药专家孙忠实 于人民网强国论坛
用 class="pull-right" 将引用内容居右:
我曾沾的光使我终身受益，因家庭牵连，我被关进监狱。五年的监狱生活，使我经受了磨难，锻炼了意志，学会了思考，懂得了公平，民主，法制对一个社会是多么重要；温饱，自由，尊严对一个人是多么重要！
薄熙来 于1993年3月于大连经贸会
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
使用 <code> 包装行级代码片段
例如，<code>section</code> 应该被做为行级代码包装。
使用<pre> 对多行代码进行包装。 切记一定要对代码中的每个<>进行转义，这样方能得到正常的渲染结果。
<p>示范文本...</p>
<pre> <p>示范文本...</p> </pre>
注意： 尽可能地让 <pre> 左对齐；因为会渲染所有空格和tab（就是你键盘左边的那个tab键）。
还可以使用 .pre-scrollable 给代码区域设置350px的最大高度并设置一个纵向滚动条。
在 <pre> 元素上应用 .prettyprint 和 .linenums 增强代码渲染效果。 .linenums 用于显示行号。
<p>示范文本...</p>
<pre class="prettyprint
linenums">
<p>示范文本...</p>
</pre>
| 标签 | 描述 |
|---|---|
<table>
|
用以包装表格化的数据 |
<thead>
|
容纳表格标题行 (<tr>)以标识表格列，
|
<tbody>
|
容纳表格行 (<tr>)
|
<tr>
|
容纳行内的一组单元格 (<td> or <th>)
|
<td>
|
默认的表格单元格 |
<th>
|
用于列头(或是行，取决于标签所在位置和区域)的特殊标签 必须置于 <thead> 标签内。
|
<caption>
|
表格用途的描述或摘要，对屏幕阅读器（视障人士读屏软件）非常有用 |
<table>
<thead>
<tr>
<th>…</th>
<th>…</th>
</tr>
</thead>
<tbody>
<tr>
<td>…</td>
<td>…</td>
</tr>
</tbody>
</table>
| 名称 | 类 | 描述 |
|---|---|---|
| 默认 | None | 无样式，仅仅有列和行 |
| 基本 |
.table
|
行与行之间以水平线相隔 |
| 有边线 |
.table-bordered
|
表格外围均有外边框 |
| 间隔背景 |
.table-striped
|
奇数行背景设为浅灰色 |
| 紧凑 |
.table-condensed
|
竖直方向padding缩减一半，从8px变为4px，所有的 td 和 th 元素都受影响 |
仅使用一组边线对表格进行格式化，以保证可读性并维持表格结构不变。
从 2.0 版本开始, 该效果不再做为默认，必须使用 .table 。
<table class="table"> … </table>
| # | 电视剧 | 类型 | 年代 |
|---|---|---|---|
| 1 | 爱情公寓 | 都市爱情喜剧 | 2010 |
| 2 | 邪恶力量 | 悬疑魔幻 | 2005 |
| 3 | 神探伽俐略 | 推理探案 | 2008 |
添加 .table-striped 让表格变得生动一点。
注意：
该效果要用到 :nth-child CSS 选择器，IE7-IE8不支持该特性，因而也无法呈现效果。
<table class="table table-striped"> … </table>
| # | 电视剧 | 类型 | 年代 |
|---|---|---|---|
| 1 | 爱情公寓 | 都市爱情喜剧 | 2010 |
| 2 | 邪恶力量 | 悬疑魔幻 | 2005 |
| 3 | 神探伽俐略 | 推理探案 | 2008 |
为整个表格添加边线，出于美观考虑，每个边角都呈现圆角。
<table class="table table-bordered"> … </table>
| # | 电视剧 | 类型 | 年代 |
|---|---|---|---|
| 1 | 爱情公寓 | 都市爱情喜剧 | 2010 |
| 2 | 邪恶力量 | 悬疑魔幻 | 2005 |
| 3 | 神探伽俐略 | 推理探案 | 2008 |
添加 .table-condensed 让表格更加紧凑，所有表格单元的padding都会减半(从8px到4px)
<table class="table table-condensed"> … </table>
| # | 电视剧 | 类型 | 年代 |
|---|---|---|---|
| 1 | 爱情公寓 | 都市爱情喜剧 | 2010 |
| 2 | 邪恶力量 | 悬疑魔幻 | 2005 |
| 3 | 神探伽俐略 | 推理探案 | 2008 |
自由组合搭配表格类以实现不同的外观。
<table class="table table-striped table-bordered table-condensed"> ... </table>
| # | 电视剧 | 类型 | 年代 |
|---|---|---|---|
| 1 | 爱情公寓 | 都市爱情喜剧 | 2010 |
| 2 | 邪恶力量 | 悬疑魔幻 | 2005 |
| 3 | 神探伽俐略 | 推理探案 | 2008 |
Bootstrap的优异之处在于：不管我们在应用中怎样使用表单输入元素和控件，其展示效果都特别棒！ 无需使用过多的HTML，况且我们已经还内置了几种常用模式。
更复杂的布局可以用简单而可扩展的类实现，更利于样式化和事件绑定。
Bootstrap提供了下列四种表单布局:
四种布局虽然在标记上有不些许同，但都使用同样的表单控件，在表单行为上也是一致的。
Bootstrap对于所有的基本表单控件（如input,textarea,select等等）都进行了样式定义。 同时也提供了一组自定义组件，比如前置/后置输入框和复合选框列表。
每种表单控件都有 error, warning, success 等不同状态，Bootstrap还包括了控件禁用时的样式。
Bootstrap为四种常用表单提供了简单的标记和样式
| 名称 | 类 | 描述 |
|---|---|---|
| 垂直式 (默认) | .form-vertical (非必填，默认) |
堆叠式的，所有控件的标签文字都左对齐 |
| 行式 | .form-inline |
标签文字左对齐，控件以inline-block紧凑形式存在 |
| 搜索式 | .form-search |
经典的搜索美化方案，对文本框进行圆化 |
| 水平式 | .form-horizontal |
左浮动，标签与其对应的控件居于同一行，标签文字右对齐 |
2.0版本开始使用更为简洁灵活的表单默认样式，只使用表单控件，无须额外标记。
<form class="well">
<label>标签名称</label>
<input type="text" class="span3" placeholder="请输入文字...">
<span class="help-inline">相关提示信息</span>
<p class="help-block">块状帮助文字...</p>
<label class="checkbox">
<input type="checkbox"> 选我选我
</label>
<button type="submit" class="btn">Submit</button>
</form>
借鉴了Webkit的默认样式，使用 .form-search 圆化搜索文本框
<form class="well form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">搜索</button> </form>
使用 .form-inline 和 .form-horizontal 将原始的块状文本框样式变成 inline-block。
<form class="well form-inline">
<input type="text" class="input-small" placeholder="邮件">
<input type="password" class="input-small" placeholder="密码">
<label class="checkbox">
<input type="checkbox"> 记住我
</label>
<button type="submit" class="btn">登录</button>
</form>
根据上面的例子，这里将展示如何标记一个控件组。
需要用到 .control-group, .control-label, 和 .controls 类。
<form class="form-horizontal">
<fieldset>
<legend>完善资料</legend>
<div class="control-group">
<label class="control-label" for="input01">您的尊姓大名</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">字母，数字，汉字皆可</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">您的twitter网址</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">请输入您的twitter网址，以便我们收录</p>
</div>
</div>
</fieldset>
</form>
左侧即是bootstrap支持的所有默认表单控件:
1.4版之前，Bootstrap使用水平布局做为默认表单样式。从2.0版开始，我们不再默认水平布局，而采用更灵活更易扩展的垂直式布局做为默认布局。
Bootstrap重新设计了浏览器本身所定义的 focused 和 disabled 状态。
我们去除了Webkit默认的 outline 并对 :focus 状态应用了 box-shadow 。
Bootstrap还包含error,warning,success的验证样式。使用时将error类添加到控件外层的 .control-group 元素上即可。
<fieldset class="control-group error"> … </fieldset>
带前置/后置文本的输入组更有助于我们为输入框提供更多内容。在左侧的例子中，我们用@表示Twiiter某人，用$表示货币。
在1.4版本之前，Bootstrap罗列单选框和复选框时，要将它嵌套到到其他标记内。
从2.0版开始，只须用 <label class="checkbox"> 包含 <input type="checkbox"> 即可。
Bootstrap也支持行级单选框和复选框。只要对 .checkbox 或 .radio 应用 .inline 即可。
在行级表单中使用前置/后置文本的输入框时，一定要确认 .add-on 和 input 在同一行，之间不得有空行和间隔。
对表单中的输入框添加帮助/提示文本时，添加 <span class="help-inline"> 就是使用行级帮助文本；
在输入框后添加 <p class="help-block"> 就是使用块状帮助文本。
我们将所有图标放入一个文件中，这样就避免了每次使用不同图标时都发起额外的请求。
借助 background-position 修改背景位置，一整张图片可以显示出多个小图标。我们在twitter.com就是这么用的，效果不错。
和其他组件一样，出于命名和识别的方便，所有图标类都有一个 .icon- 前缀。
这样会避免与其他组件相冲突。
Glyphicons 允许我们在开源工具箱中使用他们设计的小型图标，前提是我们要在文档中提供链接和声明。 如果您的项目也使用了这组图标，不妨也这么做。
Bootstrap用 <i> 标签显示图标。图标类只有一个共同的前缀，没有基准类。
用法如下：
<i class="icon-search"></i>
用 .icon-white 类显示反白图标：
<i class="icon-search icon-white"></i>
有120种图标可供显示，只须对 <i> 标签使用相应的图标类即可，完整图标列表在 sprites.less 文件中。
强调!
在图标毗邻文本时，比如buttons或导航链接，要保证在 <i> 与文本之间有空格。
图标是个好东西，不过用在什么场合却是个值得商榷的问题。下面是一些适用场景：
一般来说，任何可以使用 <i> 标签的地方，都可以将其变成图标
可用在按钮，按钮组的工具条，导航栏或是输入框的前缀中。