Bootstrap—基础样式定义

本章主要是介绍Bootstrap默认的基础样式定义，利用这些基础的定义相互组合，完成页面的整体风格定义甚至是更具体的效果。

Bootstrap应该是一个基础工具，它的好处在于已经帮你定义了一个基础的样式风格，对一个网站来说，风格统一的页面们是相当重要的（除非你的站点已经复杂到需要做一些定制化的页面）；还解决了主流浏览器兼容问题。但对于国内的使用者来说，存在一个比较严重的问题——并不支持IE6。

就我个人的认知来看，在使用的时候，我们总是需要根据自己的需求对Bootstrap框架做一些调整，比如兼容ie6，比如更换部分组件的风格，比如增加图标或去除不需要的图标，比如增加一些组件样式支持等等等等。

本章内容包含：基础排版样式，代码块样式，表单样式，按钮样式和图标。本章的所有示例，包括翻译都在示例页面中。

基础排版样式标题，段落，列表和其他

Bootstrap的排版体系基于两个在variables.less文件中定义的变量：

@baseFontSize

和

@baseLineHeight

。其含义正如其变量名一样，第一个变量是字体大小的基础值，而第二个变量是行高的基础值。

通过对两个基础值的计算来创建如外边距、内补白、行高等值。

强调，地址和缩写

元素标签	用法	可选项
<strong>	用来强调文本中重要（important）的片段	无
<em>	用来强调文本片段的重要性（stress）	无
<abbr>	用来包裹缩略语和首字母缩写，在鼠标悬浮时显示完整的词句	有 title 属性用来显示完整的词句 使用样式名 .initialism 将标签内的字母显示为大写。
<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>	可选的元素标签，用以显示一些面向用户的引用信息，典型的用法是用来标识引用内容的标题和作者名。	用 标签来标识标题或者名称。[/code]

关于列表的样式

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