在脚手架之上，基本的 HTML 元素通过可扩展类进行样式化和增强，以提供新鲜、一致的外观和感觉。
整个排版网格基于 variables.less 文件中的两个 Less 变量：@baseFontSize和@baseLineHeight. 第一个是始终使用的基本字体大小，第二个是基本行高。
我们使用这些变量和一些数学计算来创建我们所有类型的边距、填充和行高等等。
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> |
包装缩写和首字母缩略词以在悬停时显示扩展版本 |
.initialism大写缩写类。 |
<address> |
获取其最近的祖先或整个工作的联系信息 | 通过结束所有行来保留格式<br> |
Fusce dapibus，tellus ac cursus commodo，tortor mauris condimentum nibh，ut balloonum massa justo sit amet risus。Maecenas faucibus mollis interdum。Nulla vitae elit libero，一个 pharetra augue。
注意：在 HTML5 中可以随意使用<b>和，但它们的用法已经发生了一些变化。旨在突出单词或短语而不传达额外的重要性，而主要用于语音、技术术语等。<i><b><i>
以下是如何使用<address>标签的两个示例：
带有属性的缩写title有一个浅点的底部边框和悬停时的帮助光标。这为用户提供了额外的指示，将在悬停时显示某些内容。
将initialism类添加到缩写词中，通过赋予其稍小的文本大小来增加排版的和谐度。
HTML是自切片面包以来最好的东西。
单词属性的缩写是attr。
| 元素 | 用法 | 可选的 |
|---|---|---|
<blockquote> |
用于引用其他来源内容的块级元素 | 为源 URL添加 .pull-left和.pull-right类 |
<small> |
用于添加面向用户的引文的可选元素，通常是具有作品标题的作者 | <cite>在标题或来源名称周围放置 |
要包含块引用，请将<blockquote>任何HTML环绕作为引用。对于直接报价，我们建议使用<p>.
包括一个可选<small>元素来引用您的来源，并且您将在它之前获得一个破折号—以用于样式目的。
- <块引用>
- <p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。Integer posuere erat a ante venenatis。</p>
- <small>名人</small>
- </blockquote>
默认块引用的样式如下：
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer posuere erat a ante venenatis。
工作中的名人
要将您的块引用浮动到右侧，请添加class="pull-right"：
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer posuere erat a ante venenatis。
工作中的名人
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
小心！水平描述列表将截断太长而无法放入左列修复的术语text-overflow。在较窄的视口中，它们将更改为默认的堆叠布局。
用 .包裹内联代码片段<code>。
- 例如，<code>部分< / code >应该被包装为内联。
用于<pre>多行代码。请务必转义代码中的任何尖括号以进行正确渲染。
<p>此处为示例文本...</p>
- <上一页>
- <p>此处为示例文本...</p>
- </pre>
注意：请确保将标签内的<pre>代码尽可能靠近左侧；它将呈现所有选项卡。
您可以选择添加.pre-scrollable将最大高度设置为 350px 并提供 y 轴滚动条的类。
采用相同的<pre>元素并添加两个可选类以增强渲染。
- <p>此处为示例文本... </p>
- <pre class = "漂亮的印刷品
- 线数" >
- <p>此处为示例文本...</p>
- </pre>
下载 google-code-prettify并查看自述文件以了解如何使用。
| 标签 | 描述 |
|---|---|
<table> |
用于以表格格式显示数据的包装元素 |
<thead> |
<tr>表格标题行 ( ) 用于标记表格列的容器元素 |
<tbody> |
<tr>表格主体中表格行 ( ) 的容器元素 |
<tr> |
出现在单行上的一组表格单元格 (<td>或)的容器元素<th> |
<td> |
默认表格单元格 |
<th> |
列（或行，取决于范围和位置）标签的特殊表格单元格 必须在 <thead> |
<caption> |
表格内容的描述或摘要，对屏幕阅读器特别有用 |
- <表格>
- <头>
- <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 |
在所有元素中将垂直填充减半td，从 8px 到 4pxth |
表格会自动设置样式，只有几个边框，以确保可读性和保持结构。对于 2.0，.table该类是必需的。
- <表类= “表” >
- …
- </table>
| # | 名 | 姓 | 用户名 |
|---|---|---|---|
| 1 | 标记 | 奥托 | @mdo |
| 2 | 雅各布 | 桑顿 | @胖的 |
| 3 | 拉里 | 鸟 | @推特 |
通过添加斑马条纹来对您的表格进行一点花哨 - 只需添加.table-striped类。
注意：条纹表使用:nth-childCSS 选择器，在 IE7-IE8 中不可用。
- <table class = "table table-striped" >
- …
- </table>
| # | 名 | 姓 | 用户名 |
|---|---|---|---|
| 1 | 标记 | 奥托 | @mdo |
| 2 | 雅各布 | 桑顿 | @胖的 |
| 3 | 拉里 | 鸟 | @推特 |
为美观目的在整个桌子周围添加边框和圆角。
- <table class = "table table-bordered" >
- …
- </table>
| # | 名 | 姓 | 用户名 |
|---|---|---|---|
| 1 | 标记 | 奥托 | @mdo |
| 标记 | 奥托 | @getbootstrap | |
| 2 | 雅各布 | 桑顿 | @胖的 |
| 3 | 拉里小鸟 | @推特 | |
.table-condensed通过添加将表格单元格填充减半（从 8 像素到 4 像素）的类，使您的表格更紧凑。
- <table class = "table table-condensed" >
- …
- </table>
| # | 名 | 姓 | 用户名 |
|---|---|---|---|
| 1 | 标记 | 奥托 | @mdo |
| 2 | 雅各布 | 桑顿 | @胖的 |
| 3 | 拉里小鸟 | @推特 | |
随意组合任何表格类，以利用任何可用的类来实现不同的外观。
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
| 全名 | |||
|---|---|---|---|
| # | 名 | 姓 | 用户名 |
| 1 | 标记 | 奥托 | @mdo |
| 2 | 雅各布 | 桑顿 | @胖的 |
| 3 | 拉里小鸟 | @推特 | |
Bootstrap 中表单最好的部分是，无论您如何在标记中构建它们，您的所有输入和控件看起来都很棒。不需要多余的 HTML，但我们为需要它的人提供了模式。
更复杂的布局带有简洁且可扩展的类，可轻松进行样式设置和事件绑定，因此您可以在每一步中得到覆盖。
Bootstrap 支持四种类型的表单布局：
不同类型的表单布局需要对标记进行一些更改，但控件本身保持不变并且行为相同。
Bootstrap 的表单包括所有基本表单控件的样式，例如您期望的输入、文本区域和选择。但它也带有许多自定义组件，例如附加和前置输入以及对复选框列表的支持。
每种类型的表单控件都包含错误、警告和成功等状态。还包括禁用控件的样式。
Bootstrap 为四种常见的 Web 表单样式提供了简单的标记和样式。
| 姓名 | 班级 | 描述 |
|---|---|---|
| 垂直（默认） | .form-vertical （不需要） |
控件上堆叠的左对齐标签 |
| 排队 | .form-inline |
用于紧凑样式的左对齐标签和内联块控件 |
| 搜索 | .form-search |
用于典型搜索美学的额外圆形文本输入 |
| 水平的 | .form-horizontal |
在与控件相同的行上浮动左、右对齐的标签 |
无需额外标记的智能和轻量级默认设置。
- <form class = "well" >
- <label>标签名称</label>
- <input type = "text" class = "span3" placeholder = "Type something..." >
- <span class = "help-block" >此处的示例块级帮助文本。</span>
- <标签类= “复选框” >
- <输入类型= “复选框” >检查我
- </标签>
- <button type = "submit" class = "btn" >提交</button>
- </form>
添加.form-search到表单.search-query和input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" >搜索</button>
- </form>
添加.form-inline以精细化表单控件的垂直对齐和间距。
- <form class = "well form-inline" >
- <输入类型= “文本”类= “输入小”占位符= “电子邮件” >
- <输入类型= “密码”类= “输入小”占位符= “密码” >
- <标签类= “复选框” >
- <input type = "checkbox" >记住我
- </标签>
- <button type = "submit" class = "btn" >登录</button>
- </form>
右侧显示的是我们支持的所有默认表单控件。这是项目符号列表：
鉴于上述示例表单布局，这里是与第一个输入和控制组相关联的标记。、.control-group和.control-label类.controls都是样式所必需的。
- <form class = "form-horizontal" >
- <字段集>
- <legend>图例文本</legend>
- <div类= “控制组” >
- <label class = "control-label" for = "input01" >文本输入</label>
- <div类= "控件" >
- <输入类型= “文本”类= “输入-xlarge” id = “input01” >
- <p class = "help-block" >支持帮助文本</p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap 具有浏览器支持的焦点和disabled状态的样式。我们删除默认的 Webkitoutline并box-shadow在其位置应用:focus.
它还包括错误、警告和成功的验证样式。要使用，请将错误类添加到周围的.control-group.
- <字段集
- 类= “控制组错误” >
- …
- </fieldset>
输入组（带有附加或前置文本）提供了一种简单的方法来为您的输入提供更多上下文。很好的例子包括 Twitter 用户名的 @ 符号或财务的 $。
在 v1.4 之前，Bootstrap 需要在复选框和单选框周围添加额外的标记来堆叠它们。现在，重复<label class="checkbox">包装<input type="checkbox">.
还支持内联复选框和收音机。只需添加.inline到任何.checkbox或.radio，您就完成了。
要在内联表单中使用前置或附加输入，请确保将.add-onandinput放在同一行，不带空格。
要为表单输入添加帮助文本，请在输入元素之后包含内联帮助文本<span class="help-inline">或帮助文本块。<p class="help-block">
我们没有让每个图标都成为一个额外的请求，而是将它们编译成一个精灵——一个文件中的一堆图像，使用 CSS 来定位图像background-position。这与我们在 Twitter.com 上使用的方法相同，并且对我们来说效果很好。
所有图标类都以.icon-正确的命名空间和范围为前缀，就像我们的其他组件一样。这将有助于避免与其他工具发生冲突。
只要我们在文档中提供链接和信用，Glyphicons就允许我们使用我们的开源工具包中的 Halflings 集。请考虑在您的项目中做同样的事情。
Bootstrap 对所有图标都使用<i>标签，但它们没有大小写类——只有一个共享前缀。要使用，请将以下代码放在几乎任何地方：
- <i class = "图标搜索" ></i>
还有一些样式可用于倒置（白色）图标，并准备好一个额外的类：
- <i class = "icon-search icon-white" ></i>
您的图标有 120 个类别可供选择。只需添加一个<i>带有正确类的标签，就可以了。您可以在sprites.less或本文档中的此处找到完整列表。
小心！在文本字符串旁边使用时，例如在按钮或导航链接中，请务必在<i>标签后留一个空格以保持适当的间距。
图标很棒，但人们会在哪里使用它们呢？这里有一些想法：
本质上，在任何可以放置<i>标签的地方，都可以放置图标。
在按钮、工具栏按钮组、导航或前置表单输入中使用它们。