1、縮略圖（一）
縮略圖在網站中最常用的地方就是産品清單頁面，一行顯示幾張圖檔，有的在圖檔底下（左側或右側）帶有标題、描述等資訊。Bootstrap架構将這一部獨立成一個子產品元件。并通過“thumbnail”樣式配合bootstrap的網格系統來實作。可以将産品清單頁變得更好看。
使用方法：
通過“thumbnail”樣式配合bootstrap的網格系統來實作。
.col-xs- 超小螢幕 手機 (<768px)
.col-sm- 小螢幕 平闆 (≥768px)
.col-md- 中等螢幕 桌面顯示器 (≥992px)
.col-lg- 大螢幕 大桌面顯示器 (≥1200px)
2、縮略圖（二）
上一小節，展示的僅隻有縮略圖的一種使用方式，除了這種方式之外，還可以讓縮略圖配合标題、描述内容，按鈕等，在僅有縮略圖的基礎上，添加了一個div名為“caption“的容器，在這個容器中放置其他内容，比如說标題，文本描述，按鈕等。
3、警示框
在網站中，網頁總是需要和使用者一起做溝通與交流。特别是當使用者操作上下文為使用者提供一些有效的警示框，比如說告訴使用者操作成功、操作錯誤、提示或者警告等。
4、警示框--預設警示框
Bootstrap架構通過“alert“樣式來實作警示框效果。在預設情況之下，提供了四種不同的警示框效果：
1）成功警示框：告訴用使用者操作成功，在“alert”樣式基礎上追加“alert-success”樣式，具體呈現的是背景、邊框和文本都是綠色；
2）資訊警示框：給使用者提供提示資訊，在“alert”樣式基礎上追加“alert-info”樣式，具體呈現的是背景、邊框和文本都是淺藍色；
3）警告警示框：提示使用者小心操作（提供警告資訊），在“alert”樣式基礎上追加“alert-warning”樣式，具體呈現的是背景、邊框、文本都是淺黃色；
4）錯誤警示框：提示使用者操作錯誤，在“alert”樣式基礎上追加“alert-danger”樣式，具體呈現的是背景、邊框和文本都是淺紅色。
具體使用的時候，可以在類名為“alert”的div容器裡放置提示資訊。實作不同類型警示框，隻需要在“alert”基礎上追加對應的類名，如下：
實作原理：
其中“alert”樣式的源碼主要是設定了警示框的背景色、邊框、圓角和文字顔色。另外對其内部幾個元素h4、p、ul和“.alert-link”做了樣式上的特殊處理。
5、警示框--可關閉的警示框
大家在平時浏覽網頁的時候，會發現一些警示框帶有關閉按鈕，使用者一點選關閉按鈕就能自動關閉顯示的警示框（也就是讓警示框隐藏不顯示）。在Bootstrap架構中的警示框也具有這樣的功能。
隻需要在預設的警示框裡面添加一個關閉按鈕。然後進行三個步驟：
1）需要在基本警示框“alert”的基礎上添加“alert-dismissable”樣式。
2）在button标簽中加入class="close"類，實作警示框關閉按鈕的樣式。
3）要確定關閉按鈕元素上設定了自定義屬性：“data-dismiss="alert"”（因為可關閉警示框需要借助于Javascript來檢測該屬性，進而控制警示框的關閉）。
具體使用如下：
原理分析：
在樣式上，需要在基本警示框“alert”的基礎上添加“alert-dismissable”樣式，這樣就可以實作帶關閉功能的警示框。
6、警示框--警示框的連結
有時候你可能想在警示框中加傳入連結接位址，用來告訴使用者跳到某一個地方或新的頁面。而這個時候你又想讓使用者能明顯的看出來這是連結位址。在Bootstrap架構中對警示框裡的連結樣式做了一個高亮顯示處理。為不同類型的警示框内的連結進行了加粗處理，并且顔色相應加深。
實作方法：
Bootstrap架構是通過給警示框加的連結添加一個名為“alert-link”的類名，通過“alert-link”樣式給連結提供高亮顯示。
7、進度條
在網頁中，進度條的效果并不少見，比如一個評分系統，比如加載狀态等。
8、進度條--基本樣式
Bootstrap架構中對于進度條提供了一個基本樣式，一個100%寬度的背景色，然後個高亮的色表示完成進度。其實制作這樣的進度條非常容易，一般是使用兩個容器，外容器具有一定的寬度，并且設定一個背景顔色，他的子元素設定一個寬度，比如完成度是30%（也就是父容器的寬度比例值），同時給其設定一個高亮的背景色。
Bootstrap架構中也是按這樣的方式實作的，他提供了兩個容器，外容器使用“progress”樣式，子容器使用“progress-bar”樣式。其中progress用來設定進度條的容器樣式，而progress-bar用于限制進度條的進度。使用方法非常的簡單：
9、進度條--彩色進度條
Bootstrap架構中的進度條和警告資訊框一樣，為了能給使用者一個更好的體驗，也根據不同的狀态配置了不同的進度條顔色。在此稱為彩色進度條，其主要包括以下四種：
☑ progress-bar-info：表示資訊進度條，進度條顔色為藍色
☑ progress-bar-success：表示成功進度條，進度條顔色為綠色
☑ progress-bar-warning：表示警告進度條，進度條顔色為黃色
☑ progress-bar-danger：表示錯誤進度條，進度條顔色為紅色
具體使用就非常簡單了，隻需要在基礎的進度上增加對應的類名。如：
10、進度條--條紋進度條
在Bootstrap架構中除了提供了彩色進度條之外，還提供了一種條紋進度條，這種條紋進度條采用CSS3的線性漸變來實作，并未借助任何圖檔。使用Bootstrap架構中的條紋進度條隻需要在進度條的容器“progress”基礎上增加類名“progress-striped”，當然，如果你要讓你的進度條條紋像彩色進度一樣，具有彩色效果，你隻需要在進度條上增加相應的顔色類名，如前面的彩色進度條所講。
11、進度條--動态條紋進度條
在進度條“progress progress-striped”兩個類的基礎上再加入“active”類名。如下代碼：
為了讓條紋進度條動起來，Bootstrap架構還提供了一種動态條紋進度條。其實作原理主要通過CSS3的animation來完成。首先通過@keyframes建立了一個progress-bar-stripes的動畫，這個動畫主要做了一件事，就是改變背景圖像的位置，也就是background-position的值。因為條紋進度條是通過CSS3的線性漸變來制作的，而linear-gradient實作的正是對應背景中的背景圖檔。特别注意：要讓條紋進度條動起來，就需要讓“progress-striped”和“active”同時運用，不然條紋進度條是不具備動效效果。
12、進度條--層疊進度條
Bootstrap架構除了提供上述幾種進度條之外，還提供了一種層疊進度條，層疊進度條，可以将不同狀态的進度條放置在一起，按水準方式排列。具體使用如下：
13、進度條--帶Label的進度條
上面介紹的各種進度條，都僅僅是通過顔色進度向使用者傳遞進度值。但實際中，有很多時候是需要在進度條中直接用相關的數值向使用者傳遞完成的進度值，在Bootstrap就為大家考慮了這種使用場景。
隻需要在進度條中添加你需要的值，如：
14、媒體對象
在Web頁面或者說移動頁面制作中，常常看到這樣的效果，左邊居左（或居右），内容居右（或居左）排列，我們常常把這樣的效果稱為媒體對象。可以說他是一種抽像的樣式，可以用來建構不同類型的元件。
15、媒體對象--預設媒體對象
媒體對象一般是成組出現，而一組媒體對象常常包括以下幾個部分：
☑ 媒體對像的容器：常使用“media”類名表示，用來容納媒體對象的所有内容
☑ 媒體對像的對象：常使用“media-object”表示，就是媒體對象中的對象，常常是圖檔
☑ 媒體對象的主體：常使用“media-body”表示，就是媒體對像中的主體内容，可以是任何元素，常常是圖檔側邊内容
☑ 媒體對象的标題：常使用“media-heading”表示，就是用來描述對象的一個标題，此部分可選
16、媒體對象--媒體對象的嵌套
隻需要将另一個媒體對象結構放置在媒體對象的主體内“media-body”。
17、媒體對象--媒體對象清單
針對上圖的媒體對象清單效果，Bootstrap架構提供了一個清單展示的效果，在寫結構的時候可以使用ul，并且在ul上添加類名“media-list”，而在li上使用“media”，示例代碼如下：
媒體對象清單，在樣式上也并沒有做過多的特殊處理，隻是把清單的左間距置０以及去掉了項目清單符号：
18、清單組
清單組是Bootstrap架構新增的一個元件，可以用來制作清單清單、垂直導航等效果，也可以配合其他的元件制作出更漂亮的元件。
19、清單組--基礎清單組
基礎清單組，看上去就是去掉了清單符号的清單項，并且配上一些特定的樣式。在Bootstrap架構中的基礎清單組主要包括兩個部分：
☑ list-group：清單組容器，常用的是ul元素，當然也可以是ol或者div元素
☑ list-group-item：清單項，常用的是li元素，當然也可以是div元素
來看一個簡單的示例：
20、清單組--帶徽章的清單組
帶徽章的清單組其實就是将Bootstrap架構中的徽章元件和基礎清單組結合在一起的一個效果。具體做法很簡單，隻需要在“list-group-item”中添加徽章元件“badge”。
21、清單組--帶連結的清單組
帶連結的清單組，其實就是每個清單項都具有連結效果。大家可能最初想到的就是在基礎清單組的基礎上，給清單項的文本添加連結，這樣做有一個不足之處，就是連結的點選區域隻在文本上有效，但很多時候，都希望在清單項的任何區域都具備可點選。這個時候就需要在連結标簽上增加額外的樣式：“display:block”，雖然這樣能解決問題，達到需求。但在Bootstrap架構中，還是采用了另一種實作方式。就是将ul.list-group使用div.list-group來替換，而li.list-group-item直接用a.list-group-item來替換。這樣就可以達到需要的效果。
22、清單組--自定義清單組
Bootstrap框加在連結清單組的基礎上新增了兩個樣式：
☑ list-group-item-heading：用來定義清單項頭部樣式
☑ list-group-item-text：用來定義清單項主要内容
這兩個樣式最大的作用就是用來幫助開發者可以自定義清單項裡的内容，如下面的示例：
23、清單組--清單項的狀态設定
Bootstrap架構也給組合清單項提供了狀态效果，特别是連結清單組。比如常見狀态和禁用狀态等。實作方法和前面介紹的元件類似，在清單組中隻需要在對應的清單項中添加類名：
☑ active：表示目前狀态
☑ disabled：表示禁用狀态
來看個示例：
24、清單組--多彩清單組
清單組元件和警告元件一樣，Bootstrap為不同的狀态提供了不同的背景顔色和文本色，可以使用這幾個類名定義不同背景色的清單項。
☑ list-group-item-success：成功，背景色綠色
☑ list-group-item-info：資訊，背景色藍色
☑ list-group-item-warning：警告，背景色為黃色
☑ list-group-item-danger：錯誤，背景色為紅色
如果你想給清單項添加什麼背景色，隻需要在“list-group-item”基礎上增加對應的類名：
25、面闆
面闆（Panels）是Bootstrap架構新增的一個元件，其主要作用就是用來處理一些其他元件無法完成的功能。
26、面闆--基礎面闆
基礎面闆非常簡單，就是一個div容器運用了“panel”樣式，産生一個具有邊框的文本顯示塊。由于“panel”不控制主題顔色，是以在“panel”的基礎上增加一個控制顔色的主題“panel-default”，另外在裡面添加了一個“div.panel-body”來放置面闆主體内容：
27、面闆--帶有頭和尾的面闆
基礎面闆看上去太簡單了，Bootstrap為了豐富面闆的功能，特意為面闆增加“面闆頭部”和“頁面尾部”的效果：
☑ panel-heading：用來設定面闆頭部樣式
☑ panel-footer：用來設定面闆尾部樣式
28、面闆--彩色面闆
在基礎面闆一節中了解到，panel樣式并沒有對主題進行樣式設定，而主題樣式是通過panel-default來設定。在Bootstrap架構中面闆元件除了預設的主題樣式之外，還包括以下幾種主題樣式，構成了一個彩色面闆：
☑ panel-primary：重點藍
☑ panel-success：成功綠
☑ panel-info:資訊藍
☑ panel-warning：警告黃
☑ panel-danger：危險紅
使用方法就很簡單了，隻需要在panel的類名基礎上增加自己需要的類名：
29、面闆--面闆中嵌套表格
一般情況下可以把面闆了解為一個區域，在使用面闆的時候，都會在panel-body放置需要的内容，可能是圖檔、表格或者清單等。來看看面闆中嵌套表格和清單組的一個效果。
30、面闆--面闆中嵌套清單組
學習如何在面闆中放置清單組，我們簡單的來看一個示例：
去間距：
連結
GitHub:mazeyqian
Blog:blog.mazey.net