基本CSS样式对HTML基本元素进行样式定义，并利用可扩展的class增强其展示效果,那么接下来就让我们来学习一下 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。
一、HTML 5 文档类型（Doctype）
Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。页面开头需要使用如下代码块：
<!DOCTYPE html>
<html>
....
</html>
如果不使用HTML5 文档类型（Doctype），可能会造成在不同的浏览器中显示不一致的问题，甚至无法实现特定的效果，导致代码无法通过W3C标准的验证。
二、移动设备优先
移动设备优先是 Bootstrap 3 的最显著的变化。
Bootstrap 3首先的设计目标是移动设备，其次才是桌面设备。为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，代码如下：
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
代码注释如下：
- width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
- initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
- 在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
- 通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
- 注意：这里只是为了显示更多的属性，而不适用于所有的网站，请根据实际情况各自的需求自定义属性。
三、响应式图像
给<img>标签添加 img-responsive 的class属性，可以让图像更好的适应响应式布局，下面是img-responsive的具体属性：
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
- inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度
- 设置 height:auto，相关元素的高度取决于浏览器
- 设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度
四、排版
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。
1. 标题
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式，如果需要向标题添加一个内联子标题，只需要给元素添加 <small> 标签，或者添加 .small class，这样就能得到一个字号更小、颜色更浅的文本。
2. Bootstrap 使用到的排版类
| 类名 | 描述 |
|---|---|
| .lead | 使段落突出显示 |
| .small | 设定小文本 (设置为父文本的 85% 大小) |
| .text-left | 设定文本左对齐 |
| .text-center | 设定文本居中对齐 |
| .text-right | 设定文本右对齐 |
| .text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 |
| .text-nowrap | 段落中超出屏幕部分不换行 |
| .text-lowercase | 设定文本小写 |
| .text-uppercase | 设定文本大写 |
| .text-capitalize | 设定单词首字母大写 |
| .initialism | 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母 |
| .blockquote-reverse | 设定引用右对齐 |
| .list-unstyled | 移除默认的列表样式，列表项中左对齐( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) |
| .list-inline | 将所有列表项放置同一行 |
| .dl-horizontal | 该类设置了浮动和偏移，应用于 <dl> 元素和<dt> 元素中 |
| .pre-scrollable | 使 <pre> 元素可滚动 scrollable
|
3. Bootstrap 使用到的排版标签
| 标签名 | 描述 |
|---|---|
<small> |
设置文本为父文本大小的 85% |
<strong> |
设置文本为更粗的文本 |
<em> |
设置文本为斜体 |
<abbr> |
显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本） |
<address> |
可以在网页上显示联系信息，需要使用标签来为封闭的地址文本添加换行 |
<blockquote> |
添加一个<small>标签来标识引用的来源，使用 class.pull-right向右对齐引用 |
4. 列表
Bootstrap 有三种列表形式，分别是有序列表、无序列表和定义列表。
- 有序列表：指以数字或其他有序字符开头的列表。
- 无序列表：指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class
.list-unstyled来移除样式。您也可以通过使用 class.list-inline把所有的列表项放在同一行中。 - 定义列表：在这种类型的列表中，每个列表项可以包含
<dt>和<dd>元素。<dt>代表 定义术语，就像字典，这是被定义的属于（或短语）。接着，<dd>是<dt>的描述。您可以使用 classdl-horizontal把<dl>行中的属于与描述并排显示。
五、table表格
1. 表格使用到的标签
| 标签 | 描述 |
|---|---|
<table> |
为表格添加基础样式 |
<thead> |
表格标题行的容器元素（<tr>），用来标识表格列 |
<tbody> |
表格主体中的表格行的容器元素（<tr>） |
<tr> |
一组出现在单行上的表格单元格的容器元素（<td> 或 <th>） |
<td> |
默认的表格单元格 |
<th> |
特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用 |
<caption> |
关于表格存储内容的描述或总结 |
2. 表格使用到的类
作用于表格
| 类 | 描述 |
|---|---|
| .table | 为任意 <table> 添加基本样式 (只有横向分隔线) |
| .table-striped | 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) |
| .table-bordered | 为所有表格的单元格添加边框 |
| .table-hover | 在 <tbody> 内的任一行启用鼠标悬停状态 |
| .table-condensed | 让表格更加紧凑 |
| .table-responsive | 让表格水平滚动以适应小型设备(小于 768px) |
作用于表格的行或者单元格
| 类 | 描述 |
|---|---|
| .active | 将悬停的颜色应用在行或者单元格上 |
| .success | 表示成功的操作 |
| .info | 表示信息变化的操作 |
| .warning | 表示一个警告的操作 |
| .danger | 表示一个危险的操作 |
六、表单
Bootstrap 提供了下列类型的表单布局：垂直表单（默认）、内联表单、水平表单
1. 水平表单
创建步骤如下：
- 向父
<form>元素添加 class.form-horizontal。 - 把标签和控件放在一个带有 class
.form-group的<div>中。 - 向标签添加 class
.control-label。
2. 表单控件
① 输入框 Input
input输入框是最常见的表单文本字段。
Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。
② 文本框 Textarea
当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性，row的值代表着文本框 Textarea 的高度是几行的文本的高度。
③ 复选框（Checkbox）和单选框（Radio）
复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。
- 当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
- 对一系列复选框和单选框使用
.checkbox-inline或.radio-inlineclass，控制它们显示在同一行上。
④ 选择框（Select）
当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。
- 使用
<select>展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。 - 使用
multiple="multiple"允许用户选择多个选项。
⑤ 静态控件
如果需要在一个水平表单内的表单标签后放置纯文本，那么需要在<p>上使用 class .form-control-static
⑥ 表单控件状态
除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。
- 输入框焦点
当输入框input接收到:focus时，输入框的轮廓会被移除，同时应用box-shadow。 - 禁用的输入框 input
如果您想要禁用一个输入框input，只需要简单地添加disabled属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。 - 禁用的字段集
fieldset
对<fieldset>添加 disabled 属性来禁用<fieldset>内的所有控件。 - 验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning.has-error或.has-success）即可使用验证状态。
⑦ 表单控件大小
-
控制表单高度的有三个class：
-
.input-lg大号 - 默认大小
-
.input-sm小号
-
-
控制表单的宽度需要使用
.col-lg-*.col-md-*.col-sm-*.col-xs-*来控制不同屏幕大小下的宽度。
⑧ 表单帮助文本
为了给input输入框添加帮助文本，可以在input输入框后后面添加一个<span>标签，使用class .help-block。
七、按钮
按钮的定义方式有三种，可以通过标签
<a><button><input>来创建，但需要对这些标签进行role或者type的定义。也可通过class的选择来创建不同样式的Button
通过class的选择来定义按钮的样式，具体如下表所示：
| 类 | 描述 |
|---|---|
| .btn | 为按钮添加基本样式 |
| .btn-default | 默认/标准按钮 |
| .btn-primary | 原始按钮样式（未被操作） |
| .btn-success | 表示成功的动作 |
| .btn-info | 该样式可用于要弹出信息的按钮 |
| .btn-warning | 表示需要谨慎操作的按钮 |
| .btn-danger | 表示一个危险动作的按钮操作 |
| .btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
| .btn-lg | 制作一个大按钮 |
| .btn-sm | 制作一个小按钮 |
| .btn-xs | 制作一个超小按钮 |
| .btn-block | 块级按钮(拉伸至父元素100%的宽度) |
| .active | 按钮被点击 |
| .disabled | 禁用按钮 |
| 按钮元素 | 添加 .active class 来显示它是激活的 |
| 锚元素 | 添加 .active class 到 <a> 按钮来显示它是激活的 |
八、图片
通过class的选择来定义图片的样式，具体如下表所示：
| 类 | 描述 |
|---|---|
| .img-rounded | 为图片添加圆角 (IE8 不支持) |
| .img-circle | 将图片变为圆形 (IE8 不支持) |
| .img-thumbnail | 缩略图功能 |
| .img-responsive | 图片响应式 (将很好地扩展到父元素) |
九、辅助类
| 文本颜色 | 文本背景颜色 |
|---|---|
| .text-muted | .bg-primary |
| .text-primary | .bg-success |
| .text-success | .bg-info |
| .text-info | .bg-warning |
| .text-warning | .bg-danger |
| .text-danger |
| 类 | 描述 |
|---|---|
| .pull-left | 元素浮动到左边 |
| .pull-right | 元素浮动到右边 |
| .center-block | 设置元素为 display:block 并居中显示 |
| .clearfix | 清除浮动 |
| .show | 强制元素显示 |
| .hidden | 强制元素隐藏 |
| .sr-only | 除了屏幕阅读器外，其他设备上隐藏元素 |
| .sr-only-focusable | 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户) |
| .text-hide | 将页面元素所包含的文本内容替换为背景图 |
| .close | 显示关闭按钮 |
| .caret | 显示下拉式功能 |
网友评论