Bootstrap基础知识

Bootstrap 排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。

使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。

---

Bootstrap 代码

允许以两种方式显示代码：

• 第一种是 <code> 标签。如果想要内联显示代码，那么应该使用 <code> 标签。

• 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。

注意：当使用 <pre> 和 <code> 标签时，开始和结束标签要使用 unicode 变体：&lt; 和&gt;

---

Bootstrap 表格

Bootstrap 提供了一个清晰的创建表格的布局。

Bootstrap 支持的一些表格元素

表格类

表格样式

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

表格的行或者单元格

---

Bootstrap 表单

表单布局

Bootstrap 提供了下列类型的表单布局：

• 垂直表单（默认）

• 内联表单

• 水平表单

---

垂直或基本表单

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

• 向父 <form> 元素添加 role="form"。

• 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。

• 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

实例

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，

需要向 <form> 标签添加 class .form-inline。

默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，需要在表单控件上设置一个宽度。

使用 class .sr-only，您可以隐藏内联表单的标签。

---

水平表单

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

• 向父 <form> 元素添加 class .form-horizontal。

• 把标签和控件放在一个带有 class .form-group 的 <div> 中。

• 向标签添加 class .control-label。

---

支持的表单控件

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

---

静态控件

当需要在一个水平表单内的表单标签后放置纯文本时，要在 <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）即可使用验证状态。