Bootstrap3（二）

1.Bootstrap 表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

标签	描述
<table>	为表格添加基础样式。
<thead>	表格标题行的容器元素（<tr>），用来标识表格列
<tbody>	表格主体中的表格行的容器元素（<tr>）
<tr>	一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>	默认的表格单元格
<th>	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption>	关于表格存储内容的描述或总结

1.1 表格类

类	描述
.table	为任意 <table>添加基本样式 (只有横向分隔线)
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑

1.2 <tr>, <th> 和 <td> 类

下表的类可用于表格的行或者单元格：

类	描述
.active	将悬停的颜色应用在行或者单元格上
.success	表示成功的操作
.info	表示信息变化的操作
.warning	表示一个警告的操作
.danger	表示一个危险的操作

2.Bootstrap 表单

Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
Bootstrap 提供了下列类型的表单布局：

• 垂直表单（默认）
• 内联表单
• 水平表单

2.1 垂直或基本表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

• 向父 <form>元素添加role="form"。
• 把标签和控件放在一个带有 class .form-group的 <div> 中。这是获取最佳间距所必需的。
• 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control"。

2.2水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

• 向父 <form>元素添加 class .form-horizontal。
• 把标签和控件放在一个带有 class .form-group 的<div>中。
• 向标签添加 class .control-label。

2.3支持的表单控件

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

2.3.1输入框（Input）

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

2.3.2文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。

2.3.3复选框（Checkbox）和单选框（Radio）

复选框和单选按钮用于让用户从一系列预设置的选项中进行选择.

• 当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
• 对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上

2.3.4选择框（Select）

当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。

• 使用 <select>展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。
• 使用 multiple="multiple"允许用户选择多个选项。

2.4 静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p>上使用 class .form-control-static。

2.5 表单控件状态

除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。

2.5.1输入框焦点

当输入框 input 接收到 :focus时，输入框的轮廓会被移除，同时应用 box-shadow。

• 输入框焦点:当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
• 禁用的输入框 input::如果您想要禁用一个输入框 input，只需要简单地添加disabled属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
• 禁用的字段集 fieldset:对 <fieldset>添加 disabled 属性来禁用 <fieldset> 内的所有控件。
• 验证状态:包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或.has-success）即可使用验证状态。

2.5 表单控件大小

您可以分别使用 class .input-lg 和.col-lg-*来设置表单的高度和宽度。下面的实例演示了这点：

3.Bootstrap 按钮

任何带有class .btn的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：以下样式可用于<a>, <button>, 或 <input> 元素上：

类	描述
.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	禁用按钮

4.Bootstrap 图片

Bootstrap 提供了三个可对图片应用简单样式的 class：

• .img-rounded：添加 border-radius:6px来获得图片圆角
• .img-circle：添加 border-radius:50%来让整个图片变成圆形。
• .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
• .img-thumbnail缩略图功能
• .img-responsive图片响应式 (将很好地扩展到父元素)

5.Bootstrap 辅助类

5.1 文本

类	描述
.text-muted	“text-muted” 类的文本样式
.text-primary	“text-primary” 类的文本样式
.text-success	“text-success” 类的文本样式
.text-info	“text-info” 类的文本样式
.text-warning	“text-warning” 类的文本样式
.text-danger	“text-danger” 类的文本样式

5.2 背景

类	描述
.bg-primary	表格单元格使用了 “bg-primary” 类
.bg-success	表格单元格使用了 “bg-success” 类
.bg-info	表格单元格使用了 “bg-info” 类
.bg-warning	表格单元格使用了 “bg-warning” 类
.bg-danger	表格单元格使用了 “bg-danger” 类

6.其他

类	描述
.pull-left	元素浮动到左边
.pull-right	元素浮动到右边
.center-block	设置元素为 display:block 并居中显示
.clearfix	清除浮动
.show	强制元素显示
.hidden	强制元素隐藏
.sr-only	除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable	与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide	将页面元素所包含的文本内容替换为背景图
.close	显示关闭按钮
.caret	显示下拉式功能