本章主要是介绍Bootstrap默认的基础样式定义，利用这些基础的定义相互组合，完成页面的整体风格定义甚至是更具体的效果。
Bootstrap应该是一个基础工具，它的好处在于已经帮你定义了一个基础的样式风格，对一个网站来说，风格统一的页面们是相当重要的（除非你的站点已经复杂到需要做一些定制化的页面）；还解决了主流浏览器兼容问题。但对于国内的使用者来说，存在一个比较严重的问题——并不支持IE6。
就我个人的认知来看，在使用的时候，我们总是需要根据自己的需求对Bootstrap框架做一些调整，比如兼容ie6，比如更换部分组件的风格，比如增加图标或去除不需要的图标，比如增加一些组件样式支持等等等等。
本章内容包含：基础排版样式，代码块样式，表单样式，按钮样式和图标。本章的所有示例，包括翻译都在示例页面中。
基础排版样式标题，段落，列表和其他
Bootstrap的排版体系基于两个在variables.less文件中定义的变量： @baseFontSize 和 @baseLineHeight。其含义正如其变量名一样，第一个变量是字体大小的基础值，而第二个变量是行高的基础值。
通过对两个基础值的计算来创建如外边距、内补白、行高等值。
强调，地址和缩写
| 元素标签 | 用法 | 可选项 |
|---|---|---|
<strong> |
用来强调文本中重要（important）的片段 | 无 |
<em> |
用来强调文本片段的重要性（stress） | 无 |
<abbr> |
用来包裹缩略语和首字母缩写，在鼠标悬浮时显示完整的词句 | 有title属性用来显示完整的词句 |
<address> |
用来显示联系信息 （For contact information for its nearest ancestor or the entire body of work） | 需要在每一行内容末尾添加<br>以保证显示样式是正确的。 |
<strong>和<em>标签，都是用来表示强调的，但是具体的差别在哪里呢？可以参考一下这篇文章——《em和strong的区别》。
<address>标签实际表示的不仅仅是地址信息这么简单，而是联系信息的概念。在HTML5中，根据它的位置有不同的含义。具体可以参考W3CSchools的介绍。
缩略语标签<abbr>的title属性用来定义该缩略语的完整定义，在显示上会有一条虚线底边，且悬浮时鼠标样式为问号。
blockquote标签
| 元素标签 | 用法 | 可选项 |
|---|---|---|
<blockquote> |
用来显示从其他地方引入的内容的块级元素标签 | 增加cite属性来标识引用来源的URL地址使用样式名 .pull-left和.pull-right来设置浮动选项。 |
<small> |
可选的元素标签，用以显示一些面向用户的引用信息，典型的用法是用来标识引用内容的标题和作者名。 | 用标签来标识标题或者名称。
|
关于列表的样式
Bootstrap默认定义了几种样式，包括无序列表，无默认样式的列表，有序列表，定义列表(deFinition list)。
具体展示样式，请看示例。
代码片段
内联的代码片段使用<code>标签，而代码块的展示则使用<pre>标签。一定要注意将尖括号（<>）转义为实体符号以保证能正确的展现代码。可以添加样式名.pre-scrollable，来限制代码块展示的最大高度。
使用Google Prettify来美化和高亮显示代码。只需要设置样式名prettyprint 和 linenums即可。具体可以下载google-code-prettify源码，查看说明文档。
表格
表格相关标签说明
| 标签名 | 说明 |
|---|---|
<table> |
用表格的形式来显示数据的容器标签。 |
<thead> |
用来包裹多列表格的表头(<tr>)的容器标签 |
<tbody> |
用来包裹多列表格的表格行(<tr>)的容器标签 |
<tr> |
用来包裹单元格(<td>或<th>)集合的表格行。 |
<td> |
用来定义单元格 |
<th> |
用来标注列（或行，依赖于上下文和摆放的位置）中的特殊的单元格。 必须放在 <thead>标签中。 |
<caption> |
用来描述和概括表格的作用，尤其适合在屏幕阅读器。 |
表格样式选项
| 选项名称 | 样式名 | 说明 |
|---|---|---|
| 默认 | 无 | 没有样式 |
| 基本样式 | .table |
只有单元行之间的分割线 |
| 边框 | .table-bordered |
表格外边框和圆角 |
| 斑马线 | .table-striped |
在奇数行(1,3,5 等等)添加浅灰色背景色 |
| 紧凑表格 | .table-condensed |
所有单元格td and th元素内补白减半，从8像素减少到4像素 |
默认会对表格增加一些基本的样式，比如基本的边框样式等以保证表格的可读性。如果需要更多的样式，则需要增加.table样式名。
通过样式名.table-striped可以添加斑马线效果，但需要注意的是，由于斑马线效果使用的是:nth-child来实现的，所以IE7-IE8是不支持的（当然也包括IE6）。
通过样式名.table-bordered样式名来定义表格的圆角和边框效果。通过样式名.table-condensed的设置，可以使表格看起来更加的紧凑，它实际是通过将单元格的内补白减半（padding由8像素减小到4像素）的方式来实现的。
通过这些表格样式选项的组合，可以展现出你需要的不同的效果。
表单
Bootstrap中表单部分的设计，不仅针对具体的表单域做了样式的定义，还提供了一些布局类型来展示表单集合。共有4种表单布局类型：
不同类型的表单布局更换需要对结构做一些调整，但是表单控件本身不需要做任何的修改。
Bootstrap的表单定义包含了所有基础的表单控件的样式定义，还增加了一些自定义的组件样式定义，如输入框的前置/后置文本以及复选框列表。每个表单控件还会有如错误，警告，成功以及不可用等状态的显示。
4种表单布局类型
Bootstrap提供了简单的结构和设计来显示常见的web表单。
| 类型名称 | 样式名 | 描述 |
|---|---|---|
| 垂直对齐 （默认） |
.form-vertical （不是必须的） |
分层的，做对齐的表单控件 |
| 内联 | .form-inline |
向左对齐并在同一行内显示完成的表单 |
| 搜索类型 | .form-search |
为搜索框附加典型的圆角效果 |
| 水平对齐 | .form-horizontal |
每行向左浮动，标签文本向右对齐 |
Bootstrap的表单样式设计相对较简洁，实现的效果通常都不需要增加额外的标签。
默认的表单布局是垂直方向对齐的，通过对表单<form>设置对应的样式名来定义表单的布局类型。如，设置样式名为.form-inline，则表单布局类型切换到内联布局，则所有的表单控件的显示模式变为display:inline-block，正如你了解的，它们会在同一行内显示。而搜索类型的布局，主要提供了圆角的样式。
所谓水平对齐类型可能是我们最常见的表单布局类型样式——左边是标签文案用<label>来表示表单的含义；右边是表单控件。具体使用方法和效果可以参考示例文件。
关于表单控件的状态，Bootstrap支持表单控件的聚焦和不可用状态展示，默认去除了webkit浏览器默认的outline效果，并增加了盒阴影Box-shadow来代替原有的聚焦效果。
表单扩展控件
前置 & 后置的输入框
表单组—带有前置或后置文本—为你的输入框提供了一种简便的方式来更好的传达用意。如示例页面中——Twitter用 @ 符号来标识用户名，还有用 $ 标识资产。
复选框和单选框
升级到1.4版本以后，Bootstrap需要用额外的标签包裹复选款和单选框来将它们组合起来。而现在，之需要简单的用<label>标签来包裹<input type="checkBox">就可以了。
同行显示的复选框和单选框也是被支持的。只需要给.checkBox或.radio标签增加样式名.inline就行了。
Inline forms and append/prepend
在同一行内显示前置或后置文本输入框，需要确保.add-on的元素和input元素放在同一行，并且它们之间不能有空格。
表单帮助信息
添加帮助信息到<span>标签中来显示内联的提示信息。也可以在输入框元素后面使用<p>来显示块级提示信息。
按钮
| 按钮 | 样式名 | 描述 |
|---|---|---|
btn |
标准的带渐变的灰色按钮效果 | |
btn btn-primary |
给默认的按钮增加额外的视觉效果，用来表示一些主要的行为。 | |
btn btn-info |
用来取代默认的样式 | |
btn btn-success |
表明一个成功的行为 | |
btn btn-warning |
表明应当要谨慎执行该操作 | |
btn btn-danger |
表明是一个有风险的操作 | |
btn btn-inverse |
可选的按钮样式，没有明显的语意。 Alternate dark gray button,not tied to a semantic action or use |
为行为创建按钮
作为约定，按钮标签（button）应当只用于动作，而超链接则用于对象的描述。举个例子，“下载”应该是一个按钮（button）而“最近的活动”则应该是一个链接。
凡是使用.btn样式名的元素都会有按钮的样式。但是应当只使用<a>和<button>元素来作为按钮显示。
跨浏览器兼容
关于跨浏览器的兼容，很显然IE又拖后腿了——IE9对背景渐变支持不够良好，所以Bootstrap移除了对它的支持。
不同尺寸的按钮
通过额外添加样式名.btn-large, .btn-small，或.btn-mini来显示为不同的尺寸。
不可用状态（disabled）
对于不可用的按钮，通过添加样式名.disabled并给按钮<button>添加disabled属性来表现。
同一个样式名，不同的标签
事实上，通过添加.btn样式名就可以渲染出按钮的样式。按钮的标签可以是<a>, <button>或 <input>标签。但是你最好还是根据实际的上下文场景来选择标签。
图标 由Glyphicons提供
关于sprite技术这边就不再多说了，如果有不了解的朋友可以google一下。Bootstrap的图标就使用了sprite的方式。
Bootstrap的图标使用<i>标签作为所有图标的显示容器，通过添加约定的样式名来显示对应的图标。共有120个图标供大家使用，你可以在原文档，示例页面或者在sprites.less文件中找到完整的样式列表。
以上就是本章节的内容，更具体的信息可以在Bootstrap官方文档中查看。Bootstrap对于不了解CSS或者烦恼于跨浏览样式定义以及希望快速使用、敏捷开发的朋友是大有裨益的，但是在使用时还是建议根据自己的需要进行选择。
转自：http://www.36ria.com/5466
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
