基本CSS樣式對(duì)HTML基本元素進(jìn)行樣式定義，并利用可擴(kuò)展的class增強(qiáng)其展示效果,那么接下來就讓我們來學(xué)習(xí)一下 Bootstrap 底層結(jié)構(gòu)的關(guān)鍵部分，包括我們讓 web 開發(fā)變得更好、更快弹谁、更強(qiáng)壯的最佳實(shí)踐。
一、HTML 5 文檔類型（Doctype）
Bootstrap 使用了一些 HTML5 元素和 CSS 屬性泳秀。為了讓這些正常工作，您需要使用 HTML5 文檔類型（Doctype）。頁(yè)面開頭需要使用如下代碼塊：
<!DOCTYPE html>
<html>
....
</html>
如果不使用HTML5 文檔類型（Doctype），可能會(huì)造成在不同的瀏覽器中顯示不一致的問題，甚至無法實(shí)現(xiàn)特定的效果，導(dǎo)致代碼無法通過W3C標(biāo)準(zhǔn)的驗(yàn)證愧捕。
二撒遣、移動(dòng)設(shè)備優(yōu)先
移動(dòng)設(shè)備優(yōu)先是 Bootstrap 3 的最顯著的變化。
Bootstrap 3首先的設(shè)計(jì)目標(biāo)是移動(dòng)設(shè)備，其次才是桌面設(shè)備壶愤。為了讓 Bootstrap 開發(fā)的網(wǎng)站對(duì)移動(dòng)設(shè)備友好湃累，確保適當(dāng)?shù)睦L制和觸屏縮放蒙秒，需要在網(wǎng)頁(yè)的 head 之中添加 viewport meta 標(biāo)簽马澈，代碼如下：
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
代碼注釋如下：
- width 屬性控制設(shè)備的寬度。假設(shè)您的網(wǎng)站將被帶有不同屏幕分辨率的設(shè)備瀏覽，那么將它設(shè)置為 device-width 可以確保它能正確呈現(xiàn)在不同設(shè)備上。
- initial-scale=1.0 確保網(wǎng)頁(yè)加載時(shí)，以 1:1 的比例呈現(xiàn)，不會(huì)有任何的縮放。
- 在移動(dòng)設(shè)備瀏覽器上佛掖，通過為 viewport meta 標(biāo)簽添加 user-scalable=no 可以禁用其縮放（zooming）功能拴魄。
- 通常情況下，maximum-scale=1.0 與 user-scalable=no 一起使用跛溉。這樣禁用縮放功能后，用戶只能滾動(dòng)屏幕，就能讓您的網(wǎng)站看上去更像原生應(yīng)用的感覺。
- 注意：這里只是為了顯示更多的屬性，而不適用于所有的網(wǎng)站，請(qǐng)根據(jù)實(shí)際情況各自的需求自定義屬性翔脱。
三隶糕、響應(yīng)式圖像
給<img>標(biāo)簽添加 img-responsive 的class屬性，可以讓圖像更好的適應(yīng)響應(yīng)式布局，下面是img-responsive的具體屬性：
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
- inline-block灯节，元素相對(duì)于它周圍的內(nèi)容以內(nèi)聯(lián)形式呈現(xiàn)形入，但與內(nèi)聯(lián)不同的是，這種情況下我們可以設(shè)置寬度和高度
- 設(shè)置 height:auto，相關(guān)元素的高度取決于瀏覽器
- 設(shè)置 max-width 為 100% 會(huì)重寫任何通過 width 屬性指定的寬度
四挽放、排版
Bootstrap 使用 Helvetica Neue纯出、 Helvetica、 Arial 和 sans-serif 作為其默認(rèn)的字體棧务漩。
1. 標(biāo)題
Bootstrap 中定義了所有的 HTML 標(biāo)題（h1 到 h6）的樣式妖混，如果需要向標(biāo)題添加一個(gè)內(nèi)聯(lián)子標(biāo)題砖瞧，只需要給元素添加 <small> 標(biāo)簽，或者添加 .small class竭翠，這樣就能得到一個(gè)字號(hào)更小振坚、顏色更淺的文本。
2. Bootstrap 使用到的排版類
| 類名 | 描述 |
|---|---|
| .lead | 使段落突出顯示 |
| .small | 設(shè)定小文本 (設(shè)置為父文本的 85% 大小) |
| .text-left | 設(shè)定文本左對(duì)齊 |
| .text-center | 設(shè)定文本居中對(duì)齊 |
| .text-right | 設(shè)定文本右對(duì)齊 |
| .text-justify | 設(shè)定文本對(duì)齊,段落中超出屏幕部分文字自動(dòng)換行 |
| .text-nowrap | 段落中超出屏幕部分不換行 |
| .text-lowercase | 設(shè)定文本小寫 |
| .text-uppercase | 設(shè)定文本大寫 |
| .text-capitalize | 設(shè)定單詞首字母大寫 |
| .initialism | 顯示在 <abbr> 元素中的文本以小號(hào)字體展示斋扰，且可以將小寫字母轉(zhuǎn)換為大寫字母 |
| .blockquote-reverse | 設(shè)定引用右對(duì)齊 |
| .list-unstyled | 移除默認(rèn)的列表樣式渡八，列表項(xiàng)中左對(duì)齊( <ul> 和 <ol> 中)。 這個(gè)類僅適用于直接子列表項(xiàng) (如果需要移除嵌套的列表項(xiàng)传货，你需要在嵌套的列表中使用該樣式) |
| .list-inline | 將所有列表項(xiàng)放置同一行 |
| .dl-horizontal | 該類設(shè)置了浮動(dòng)和偏移屎鳍，應(yīng)用于 <dl> 元素和<dt> 元素中 |
| .pre-scrollable | 使 <pre> 元素可滾動(dòng) scrollable
|
3. Bootstrap 使用到的排版標(biāo)簽
| 標(biāo)簽名 | 描述 |
|---|---|
<small> |
設(shè)置文本為父文本大小的 85% |
<strong> |
設(shè)置文本為更粗的文本 |
<em> |
設(shè)置文本為斜體 |
<abbr> |
顯示在文本底部的一條虛線邊框，當(dāng)鼠標(biāo)懸停在上面時(shí)會(huì)顯示完整的文本（只要您為 <abbr> title 屬性添加了文本） |
<address> |
可以在網(wǎng)頁(yè)上顯示聯(lián)系信息问裕，需要使用標(biāo)簽來為封閉的地址文本添加換行 |
<blockquote> |
添加一個(gè)<small>標(biāo)簽來標(biāo)識(shí)引用的來源逮壁，使用 class.pull-right向右對(duì)齊引用 |
4. 列表
Bootstrap 有三種列表形式，分別是有序列表粮宛、無序列表和定義列表窥淆。
- 有序列表：指以數(shù)字或其他有序字符開頭的列表卖宠。
- 無序列表：指沒有特定順序的列表，是以傳統(tǒng)風(fēng)格的著重號(hào)開頭的列表忧饭。如果您不想顯示這些著重號(hào)扛伍，您可以使用 class
.list-unstyled來移除樣式。您也可以通過使用 class.list-inline把所有的列表項(xiàng)放在同一行中眷昆。 - 定義列表：在這種類型的列表中蜒秤，每個(gè)列表項(xiàng)可以包含
<dt>和<dd>元素。<dt>代表 定義術(shù)語(yǔ)亚斋，就像字典，這是被定義的屬于（或短語(yǔ)）攘滩。接著帅刊，<dd>是<dt>的描述。您可以使用 classdl-horizontal把<dl>行中的屬于與描述并排顯示漂问。
五赖瞒、table表格
1. 表格使用到的標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
<table> |
為表格添加基礎(chǔ)樣式 |
<thead> |
表格標(biāo)題行的容器元素（<tr>），用來標(biāo)識(shí)表格列 |
<tbody> |
表格主體中的表格行的容器元素（<tr>） |
<tr> |
一組出現(xiàn)在單行上的表格單元格的容器元素（<td> 或 <th>） |
<td> |
默認(rèn)的表格單元格 |
<th> |
特殊的表格單元格蚤假，用來標(biāo)識(shí)列或行（取決于范圍和位置）栏饮。必須在 <thead> 內(nèi)使用 |
<caption> |
關(guān)于表格存儲(chǔ)內(nèi)容的描述或總結(jié) |
2. 表格使用到的類
作用于表格
| 類 | 描述 |
|---|---|
| .table | 為任意 <table> 添加基本樣式 (只有橫向分隔線) |
| .table-striped | 在 <tbody> 內(nèi)添加斑馬線形式的條紋 ( IE8 不支持) |
| .table-bordered | 為所有表格的單元格添加邊框 |
| .table-hover | 在 <tbody> 內(nèi)的任一行啟用鼠標(biāo)懸停狀態(tài) |
| .table-condensed | 讓表格更加緊湊 |
| .table-responsive | 讓表格水平滾動(dòng)以適應(yīng)小型設(shè)備(小于 768px) |
作用于表格的行或者單元格
| 類 | 描述 |
|---|---|
| .active | 將懸停的顏色應(yīng)用在行或者單元格上 |
| .success | 表示成功的操作 |
| .info | 表示信息變化的操作 |
| .warning | 表示一個(gè)警告的操作 |
| .danger | 表示一個(gè)危險(xiǎn)的操作 |
六、表單
Bootstrap 提供了下列類型的表單布局：垂直表單（默認(rèn)）磷仰、內(nèi)聯(lián)表單袍嬉、水平表單
1. 水平表單
創(chuàng)建步驟如下：
- 向父
<form>元素添加 class.form-horizontal。 - 把標(biāo)簽和控件放在一個(gè)帶有 class
.form-group的<div>中灶平。 - 向標(biāo)簽添加 class
.control-label伺通。
2. 表單控件
① 輸入框 Input
input輸入框是最常見的表單文本字段。
Bootstrap 提供了對(duì)所有原生的 HTML5 的 input 類型的支持逢享，包括：text罐监、password、datetime瞒爬、datetime-local弓柱、date、month侧但、time矢空、week、number俊犯、email妇多、url、search燕侠、tel 和 color者祖。適當(dāng)?shù)?type 聲明是必需的立莉，這樣才能讓 input 獲得完整的樣式。
② 文本框 Textarea
當(dāng)您需要進(jìn)行多行輸入的時(shí)七问，則可以使用文本框 textarea蜓耻。必要時(shí)可以改變 rows 屬性，row的值代表著文本框 Textarea 的高度是幾行的文本的高度械巡。
③ 復(fù)選框（Checkbox）和單選框（Radio）
復(fù)選框和單選按鈕用于讓用戶從一系列預(yù)設(shè)置的選項(xiàng)中進(jìn)行選擇刹淌。
- 當(dāng)創(chuàng)建表單時(shí)，如果您想讓用戶從列表中選擇若干個(gè)選項(xiàng)時(shí)讥耗，請(qǐng)使用 checkbox有勾。如果您限制用戶只能選擇一個(gè)選項(xiàng)，請(qǐng)使用 radio古程。
- 對(duì)一系列復(fù)選框和單選框使用
.checkbox-inline或.radio-inlineclass蔼卡，控制它們顯示在同一行上。
④ 選擇框（Select）
當(dāng)您想讓用戶從多個(gè)選項(xiàng)中進(jìn)行選擇挣磨，但是默認(rèn)情況下只能選擇一個(gè)選項(xiàng)時(shí)雇逞，則使用選擇框。
- 使用
<select>展示列表選項(xiàng)茁裙，通常是那些用戶很熟悉的選擇列表塘砸，比如州或者數(shù)字。 - 使用
multiple="multiple"允許用戶選擇多個(gè)選項(xiàng)晤锥。
⑤ 靜態(tài)控件
如果需要在一個(gè)水平表單內(nèi)的表單標(biāo)簽后放置純文本掉蔬，那么需要在<p>上使用 class .form-control-static
⑥ 表單控件狀態(tài)
除了 :focus 狀態(tài)（即，用戶點(diǎn)擊 input 或使用 tab 鍵聚焦到 input 上）查近，Bootstrap 還為禁用的輸入框定義了樣式眉踱，并提供了表單驗(yàn)證的 class。
- 輸入框焦點(diǎn)
當(dāng)輸入框input接收到:focus時(shí)霜威，輸入框的輪廓會(huì)被移除谈喳，同時(shí)應(yīng)用box-shadow。 - 禁用的輸入框 input
如果您想要禁用一個(gè)輸入框input戈泼，只需要簡(jiǎn)單地添加disabled屬性婿禽，這不僅會(huì)禁用輸入框，還會(huì)改變輸入框的樣式以及當(dāng)鼠標(biāo)的指針懸停在元素上時(shí)鼠標(biāo)指針的樣式大猛。 - 禁用的字段集
fieldset
對(duì)<fieldset>添加 disabled 屬性來禁用<fieldset>內(nèi)的所有控件扭倾。 - 驗(yàn)證狀態(tài)
Bootstrap 包含了錯(cuò)誤、警告和成功消息的驗(yàn)證樣式挽绩。只需要對(duì)父元素簡(jiǎn)單地添加適當(dāng)?shù)?class（.has-warning.has-error或.has-success）即可使用驗(yàn)證狀態(tài)膛壹。
⑦ 表單控件大小
-
控制表單高度的有三個(gè)class：
-
.input-lg大號(hào) - 默認(rèn)大小
-
.input-sm小號(hào)
-
控制表單的寬度需要使用
.col-lg-*.col-md-*.col-sm-*.col-xs-*來控制不同屏幕大小下的寬度。
⑧ 表單幫助文本
為了給input輸入框添加幫助文本，可以在input輸入框后后面添加一個(gè)<span>標(biāo)簽模聋，使用class .help-block肩民。
七、按鈕
按鈕的定義方式有三種链方，可以通過標(biāo)簽
<a><button><input>來創(chuàng)建持痰，但需要對(duì)這些標(biāo)簽進(jìn)行role或者type的定義。也可通過class的選擇來創(chuàng)建不同樣式的Button
通過class的選擇來定義按鈕的樣式祟蚀，具體如下表所示：
| 類 | 描述 |
|---|---|
| .btn | 為按鈕添加基本樣式 |
| .btn-default | 默認(rèn)/標(biāo)準(zhǔn)按鈕 |
| .btn-primary | 原始按鈕樣式（未被操作） |
| .btn-success | 表示成功的動(dòng)作 |
| .btn-info | 該樣式可用于要彈出信息的按鈕 |
| .btn-warning | 表示需要謹(jǐn)慎操作的按鈕 |
| .btn-danger | 表示一個(gè)危險(xiǎn)動(dòng)作的按鈕操作 |
| .btn-link | 讓按鈕看起來像個(gè)鏈接 (仍然保留按鈕行為) |
| .btn-lg | 制作一個(gè)大按鈕 |
| .btn-sm | 制作一個(gè)小按鈕 |
| .btn-xs | 制作一個(gè)超小按鈕 |
| .btn-block | 塊級(jí)按鈕(拉伸至父元素100%的寬度) |
| .active | 按鈕被點(diǎn)擊 |
| .disabled | 禁用按鈕 |
| 按鈕元素 | 添加 .active class 來顯示它是激活的 |
| 錨元素 | 添加 .active class 到 <a> 按鈕來顯示它是激活的 |
八工窍、圖片
通過class的選擇來定義圖片的樣式，具體如下表所示：
| 類 | 描述 |
|---|---|
| .img-rounded | 為圖片添加圓角 (IE8 不支持) |
| .img-circle | 將圖片變?yōu)閳A形 (IE8 不支持) |
| .img-thumbnail | 縮略圖功能 |
| .img-responsive | 圖片響應(yīng)式 (將很好地?cái)U(kuò)展到父元素) |
九前酿、輔助類
| 文本顏色 | 文本背景顏色 |
|---|---|
| .text-muted | .bg-primary |
| .text-primary | .bg-success |
| .text-success | .bg-info |
| .text-info | .bg-warning |
| .text-warning | .bg-danger |
| .text-danger |
| 類 | 描述 |
|---|---|
| .pull-left | 元素浮動(dòng)到左邊 |
| .pull-right | 元素浮動(dòng)到右邊 |
| .center-block | 設(shè)置元素為 display:block 并居中顯示 |
| .clearfix | 清除浮動(dòng) |
| .show | 強(qiáng)制元素顯示 |
| .hidden | 強(qiáng)制元素隱藏 |
| .sr-only | 除了屏幕閱讀器外患雏，其他設(shè)備上隱藏元素 |
| .sr-only-focusable | 與 .sr-only 類結(jié)合使用，在元素獲取焦點(diǎn)時(shí)顯示(如：鍵盤操作的用戶) |
| .text-hide | 將頁(yè)面元素所包含的文本內(nèi)容替換為背景圖 |
| .close | 顯示關(guān)閉按鈕 |
| .caret | 顯示下拉式功能 |
