基本的HTML元素都应用了样式，保持清新，统一的感觉。
整个排版基于两个Less变量，在variables.less文件里，@baseFontSize 和 @baseLineHeight。 基础的字号与行间隔。
我们使用这些变量与一些算术来创建外边距（margin），内边距（padding），还有行高（ line-heights）。
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| 元素 | 用途 | 可选 |
|---|---|---|
<strong>
|
用来突出重要的文字片断 | 无 |
<em>
|
用来突出重点的文字片断 | 无 |
<abbr>
|
包装缩略语，鼠标悬停时显示完整版。 |
为展开的文本包含可选的 |
<address>
|
联系方式的信息 |
每行结束后使用 <br>
|
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
提示： HTML5 请使用 <b> 和<i> ，但他们的用法有些区别， <b> 用来突显单词与短语，不输送额外的重点。 <i> 用在技术词汇等。
使用 <address> 标签的两个示例：
Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.
Add the initialism class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.
HTML is the best thing since sliced bread.
An abbreviation of the word attribute is attr.
| 元素 | 用途 | 可选 |
|---|---|---|
<blockquote>
|
Block-level element for quoting content from another source |
Add .pull-left and .pull-right classes for floated options
|
<small>
|
Optional element for adding a user-facing citation, typically an author with title of work |
Place the <cite> around the title or name of source
|
To include a blockquote, wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
Include an optional <small> element to cite your source and you'll get an em dash — before it for styling purposes.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p> <small>Someone famous</small> </blockquote>
默认的 blockquotes 样式：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
浮动 blockquote 到右边，添加 class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
包装行内代码片断，请使用： <code>.
例如： <code>section</code> should be wrapped as inline.
为多行代码使用 <pre>，确定不要在代码片断中包含尖括号。
<p>Sample text here...</p>
<pre> <p>Sample text here...</p> </pre>
注意： Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.
你可以添加 .pre-scrollable 类，会设置 max-height 为 350px ，还提供一个上下滚动条。
同样使用 <pre> 元素，两个可选类可以增强显示。
<p>Sample text here...</p>
<pre class="prettyprint
linenums">
<p>Sample text here...</p>
</pre>
| 标签 | 描述 |
|---|---|
<table>
|
Wrapping element for displaying data in a tabular format |
<thead>
|
Container element for table header rows (<tr>) to label table columns
|
<tbody>
|
Container element for table rows (<tr>) in the body of the table
|
<tr>
|
Container element for a set of table cells (<td> or <th>) that appears on a single row
|
<td>
|
Default table cell |
<th>
|
Special table cell for column (or row, depending on scope and placement) labels Must be used within a <thead>
|
<caption>
|
Description or summary of what the table holds, especially useful for screen readers |
<table>
<thead>
<tr>
<th>…</th>
<th>…</th>
</tr>
</thead>
<tbody>
<tr>
<td>…</td>
<td>…</td>
</tr>
</tbody>
</table>
| 名称 | 类名 | 描述 |
|---|---|---|
| 默认 | 无 | 无样式，只有栏与行 |
| 基本 |
.table
|
只有行与行之间的水平线 |
| 边框 |
.table-bordered
|
圆角并添加外边线 |
| 斑马纹 |
.table-striped
|
在奇数行 (1, 3, 5, ...)，添加亮灰背景颜色 |
| 简明 |
.table-condensed
|
垂直内边距从 8px 减小到 4px |
表格会自动应用样式，添加点边线，为了保持结构跟确定可读性。2.0需要在table标签上使用 .table 类。
<table class="table"> … </table>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
只需要添加一个 .table-striped 类，你的表格立马应用斑马条纹样式。
注： 条纹表格使用 :nth-child CSS 选择器，IE7-IE8里面不能用这个选择器。
<table class="table table-striped"> … </table>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
在整个表格周围添加连线，而且是圆角地。
<table class="table table-bordered"> … </table>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
让表格更紧凑，添加 .table-condensed 类缩小一半内边距 (从8px 缩减到 4px)。
<table class="table table-condensed"> … </table>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
你可以混合使用表格的样式。
<table class="table table-striped table-bordered table-condensed"> ... </table>
| Full name | |||
|---|---|---|---|
| # | First Name | Last Name | Username |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Bootstrap里的表单不管怎么样看起来都很漂亮，不需要多余的HTML，不过我们也为需要的人提供了几个组合。
更多复杂的布局使用了简洁可扩展的类，你可以很简单添加样式或捆绑事件。
Bootstrap 支持四种表单布局：
不同类型的表单布局需要不同的标签，不过控制本身保持不变。
Bootstrap 包含几乎所有表单控件的样式，比如input，textarea，select... 另外还有一些组件可以使用 ，像前置与后置等等。
还有错误，警告，成功状态，同时还支持禁用时的样式。
Bootstrap 提供四种常见 web 表单样式。
| 名称 | 类名 | 描述 |
|---|---|---|
| 垂直（默认） | .form-vertical (可以不加这个类名) |
堆栈在一起，标签在控件之上左对齐显示。 |
| 行内 | .form-inline |
标签左对齐，行内区块显示控件，比较紧凑。 |
| 搜索 | .form-search |
圆角的text input。 |
| 横向 | .form-horizontal |
向左浮动，标签右对齐。 |
在2.0上，默认的表单样式更简洁，没有多余的标签，只是单纯的控件。
<form class="well">
<label>Label name</label>
<input type="text" class="span3" placeholder="Type something…">
<span class="help-inline">Associated help text!</span>
<label class="checkbox">
<input type="checkbox"> 点这里
</label>
<button type="submit" class="btn">提交</button>
</form>
添加.form-search 在搜索字段上使用圆角。
<form class="well form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">搜索</button> </form>
Inputs 是区块级别的元素，使用 .form-inline 与 .form-horizontal， 可以转化成行内元素。
<form class="well form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<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 text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</form>
左边这些都是支持的表单控件，这里是个列表
v1.4, Bootstrap默认表单样式使用水平布局，在Bootstrap 2里面我们使用更聪明，扩展性更强的默认布局。
Bootstrap 重新设计了聚集与禁用disabled 状态，移除了Webkit核心（如：Google Chrome）outline 并为:focus添加了box-shadow 。
Bootstrap包含验证样式：错误，警告，成功。使用的话在 .control-group 添加error类。
<fieldset class="control-group error"> … </fieldset>
Input 群组带有前置或后置文本，为input适应不同的环境提供了简单的方式，比如在Twitter用户名前加个 @ 标记，或在财务数据表加个 $ 标记。
现在，只需要简单的重复：<label class="checkbox"> 包装<input type="checkbox">.
同样支持行内复选框与单选按钮，添加.inline到任何的.checkbox或.radio a就可以了。
在行内表单使用前置与后置input，确定.add-on 与input 在同一行，而且中间不能有没有空格。
为表单添加帮助文本，包含行内帮助文本，使用 <span class="help-inline"> 或在input元素后面使用帮助文本区块 <p class="help-block">
我们把所有的图标都放在了同一个文件里面，然后使用CSS的定位background-position 来切换不同的图标背景。我们在 Twitter.com 上也使用同样的方法，效果非常好。
所有的图标类都使用 .icon- 作为前缀，这样是为了避免跟其它组件混淆。
Glyphicons 授权我们使用这个图标集，只要我们在这个文档里说明这些图标的出处。
Bootstrap 为所有图标使用 <i> 标签，想用的话请把下面的代码，放在任何你想出现图标的地方。
<i class="icon-search"></i>
还有一个反白版本，添加一个额外的类就可以：
<i class="icon-search icon-white"></i>
一共有 120 个类你可以选择，只需要添加个 <i> 标签就行了。你可以在 sprites.less 或下面的文档里找到具体的CSS类。
注意!
如果图标后面有文字，比如在按钮或导航链接文字，最好在 <i> 标签的后面添加一个空格，这样看起来更好一些。
图标很棒，不过在哪里使用他们呢？这是一些灵感：
在任何地方，使用一个 <i> 标签，你就可以添加一个图标了。
在按钮，按钮群组工具栏，导航菜单，或前置文本域上使用。