1、縮略圖：
（1）Bootstrap框架將這一部獨立成一個模塊組件，並通過“thumbnail”樣式配合bootstrap的網格系統來實現。
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" >
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
</div>
</div>
（2）縮略圖配合標題、描述內容，按鈕：
在僅有縮略圖的基礎上，添加了一個div名爲“caption“的容器，在這個容器中放置其他內容，比如說標題，文本描述，按鈕等。
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg" style="height: 180px; width: 100%; display: block;" alt="">
</a>
<div class="caption">
<h3>Bootstrap框架系列教程</h3>
<p>Bootstrap框架是一個優秀的前端框，就算您是一位後端程序員或者你是一位不懂設計的前端人員，你也能依賴於Bootstrap製作做優美的網站...</p>
<p>
<a href="##" class="btn btn-primary">開始學習</a>
<a href="##" class="btn btn-info">正在學習</a>
</p>
</div>
</div>
…
</div>
</div>
2、警示框：
（1）在Bootstrap框架有一個獨立的組件，實現上述的效果，這個組件被稱爲警示框。
在默認情況之下，提供了四種不同的警示框效果：
- 成功警示框：告訴用用戶操作成功，在“alert”樣式基礎上追加“alert-success”樣式，具體呈現的是背景、邊框和文本都是綠色；
- 信息警示框：給用戶提供提示信息，在“alert”樣式基礎上追加“alert-info”樣式，具體呈現的是背景、邊框和文本都是淺藍色；
- 警告警示框：提示用戶小心操作（提供警告信息），在“alert”樣式基礎上追加“alert-warning”樣式，具體呈現的是背景、邊框、文本都是淺黃色；
- 錯誤警示框：提示用戶操作錯誤，在“alert”樣式基礎上追加“alert-danger”樣式，具體呈現的是背景、邊框和文本都是淺紅色。
（2）使用方法： 具體使用的時候，可以在類名爲“alert”的div容器裏放置提示信息。實現不同類型警示框，只需要在“alert”基礎上追加對應的類名，如下：
<div class="alert alert-success" role="alert">恭喜您操作成功！</div>
<div class="alert alert-info" role="alert">請輸入正確的密碼</div>
<div class="alert alert-warning" role="alert">您已操作失敗兩次，還有最後一次機會</div>
<div class="alert alert-danger" role="alert">對不起，您輸入的密碼有誤</div>
（3）可關閉的警示框：
使用方法： 只需要在默認的警示框裏面添加一個關閉按鈕。然後進行三個步驟：
1、需要在基本警示框“alert”的基礎上添加“alert-dismissable”樣式。
2、在button標籤中加入class="close"類，實現警示框關閉按鈕的樣式。
3、要確保關閉按鈕元素上設置了自定義屬性：“data-dismiss="alert"”（因爲可關閉警示框需要藉助於Javascript來檢測該屬性，從而控制警示框的關閉）。
<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
恭喜您操作成功！
</div>
（4）警示框的鏈接：
在Bootstrap框架中對警示框裏的鏈接樣式做了一個高亮顯示處理。
爲不同類型的警示框內的鏈接進行了加粗處理，並且顏色相應加深。
實現方法： Bootstrap框架是通過給警示框加的鏈接添加一個名爲“alert-link”的類名，通過“alert-link”樣式給鏈接提供高亮顯示。
<div class="alert alert-success" role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong>
This
<a href="#" class="alert-link">alert needs your attention</a>
, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong>
Better check yourself, you're
<a href="#" class="alert-link">not looking too good</a>
.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong>
<a href="#" class="alert-link">Change a few things up</a>
and try submitting again.
</div>
3、進度條：
<h2>基本進度條</h2>
<div class="progress">
<div class="progress-bar" style="width:40%">
</div>
</div>
<h2>彩色進度條</h2>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
<h2>條紋進度條</h2>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
<h2>動態條紋進度條</h2>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>
<h2>層疊進度條</h2>
<h5>正常層疊進度條</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:10%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<h5>不良效果層疊進度條</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:40%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:45%"></div>
</div>
<h5>層疊條紋進度條</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<h2>帶Label的進度條</h2>
<h5>進度條1</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">70%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div>
</div>
<h5>進度條2</h5>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
結構優化：
<div class="progress">
<div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">40% Complete</span>
</div>
</div>
1、role屬性作用：告訴搜索引擎這個div的作用是進度條。
2、aria-valuenow="40"屬性作用：當前進度條的進度爲40%。
3、aria-valuemin="0"屬性作用：進度條的最小值爲0%。
4、aria-valuemax="100"屬性作用：進度條的最大值爲100%。
4、媒體對象：
（1）媒體對象一般是成組出現，而一組媒體對象常常包括以下幾個部分：
☑ 媒體對像的容器：常使用“media”類名錶示，用來容納媒體對象的所有內容
☑ 媒體對像的對象：常使用“media-object”表示，就是媒體對象中的對象，常常是圖片
☑ 媒體對象的主體：常使用“media-body”表示，就是媒體對像中的主體內容，可以是任何元素，常常是圖片側邊內容
☑ 媒體對象的標題：常使用“media-heading”表示，就是用來描述對象的一個標題，此部分可選
在Bootstrap框架中還常常使用“pull-left”或者“pull-right”來控制媒體對象中的對象浮動方式。
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">系列：十天精通CSS3</h4>
<div>全方位深刻詳解CSS3模塊知識，經典案例分析，代碼同步調試，讓網頁穿上絢麗裝備！</div>
</div>
</div>
（2）媒體嵌套：
在Bootstrap框架中的媒體對象也可實現媒體嵌套，只需要將另一個媒體對象結構放置在媒體對象的主體內“media-body”。
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="…" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media Heading</h4>
<div>…</div>
//嵌套開始
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="…" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media Heading</h4>
<div>…</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="…" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media Heading</h4>
<div>...</div>
</div>
</div>
</div>
</div>
</div>
</div>
（3）媒體對象列表：
Bootstrap框架提供了一個列表展示的效果，在寫結構的時候可以使用ul，並且在ul上添加類名“media-list”，而在li上使用“media”。
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src=" " alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media Header</h4>
<div>…</div>
</div>
</li>
<li class="media">…</li>
<li class="media">…</li>
</ul>
5、列表組：
列表組是Bootstrap框架新增的一個組件，可以用來製作列表清單、垂直導航等效果，也可以配合其他的組件製作出更漂亮的組件。
（1）基礎列表組：
在Bootstrap框架中的基礎列表組主要包括兩個部分：
☑ list-group：列表組容器，常用的是ul元素，當然也可以是ol或者div元素
☑ list-group-item：列表項，常用的是li元素，當然也可以是div元素
<ul class="list-group">
<li class="list-group-item">揭開CSS3的面紗</li>
<li class="list-group-item">CSS3選擇器</li>
<li class="list-group-item">CSS3邊框</li>
<li class="list-group-item">CSS3背景</li>
<li class="list-group-item">CSS3文本</li>
</ul>
（2）帶徽章的列表組：
帶徽章的列表組其實就是將Bootstrap框架中的徽章組件和基礎列表組結合在一起的一個效果。具體做法很簡單，只需要在“list-group-item”中添加徽章組件“badge”：
<ul class="list-group">
<li class="list-group-item">
<span class="badge">13</span>揭開CSS3的面
</li>
<li class="list-group-item">
<span class="badge">456</span>CSS3選擇器
</li>
<li class="list-group-item">
<span class="badge">892</span>CSS3邊框
</li>
<li class="list-group-item">
<span class="badge">90</span>CSS3背景
</li>
<li class="list-group-item">
<span class="badge">1290</span>CSS3文本
</li>
</ul>
（3）帶鏈接的列表組：
在Bootstrap框架中將ul.list-group使用div.list-group來替換，而li.list-group-item直接用a.list-group-item來替換。
<div class="list-group">
<a href="##" class="list-group-item">圖解CSS3</a>
<a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
<a href="##" class="list-group-item">玩轉Bootstrap</a>
</div>
（4）自定義列表組：
Bootstrap框加在鏈接列表組的基礎上新增了兩個樣式：
☑ list-group-item-heading：用來定義列表項頭部樣式
☑ list-group-item-text：用來定義列表項主要內容
這兩個樣式最大的作用就是用來幫助開發者可以自定義列表項裏的內容。
<div class="list-group">
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">圖解CSS3</h4>
<p class="list-group-item-text">...</p>
</a>
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">Sass中國</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
（5）列表組狀態：
Bootstrap框架也給組合列表項提供了狀態效果，特別是鏈接列表組。
比如常見狀態和禁用狀態等。
實現方法和前面介紹的組件類似，在列表組中只需要在對應的列表項中添加類名：
☑ active：表示當前狀態
☑ disabled：表示禁用狀態
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>
<a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item"><span class="badge">59020</span>慕課網</a>
<a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中國</a>
</div>
（6）多彩列表組：
列表組組件和警告組件一樣，Bootstrap爲不同的狀態提供了不同的背景顏色和文本色，可以使用這幾個類名定義不同背景色的列表項。
☑ list-group-item-success：成功，背景色綠色
☑ list-group-item-info：信息，背景色藍色
☑ list-group-item-warning：警告，背景色爲黃色
☑ list-group-item-danger：錯誤，背景色爲紅色
如果你想給列表項添加什麼背景色，只需要在“list-group-item”基礎上增加對應的類名：
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>
<a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕課網</a>
<a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中國</a>
<a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>
6、面板：
（1）基礎面板非常簡單，就是一個div容器運用了“panel”樣式，產生一個具有邊框的文本顯示塊。由於“panel”不控制主題顏色，所以在“panel”的基礎上增加一個控制顏色的主題“panel-default”，另外在裏面添加了一個“div.panel-body”來放置面板主體內容：
<div class="panel panel-default">
<div class="panel-body">我是一個基礎面板，帶有默認主題樣式風格</div>
</div>
（2）帶頭和尾的面板：
Bootstrap爲了豐富面板的功能，特意爲面板增加“面板頭部”和“頁面尾部”的效果：
☑ panel-heading：用來設置面板頭部樣式
☑ panel-footer：用來設置面板尾部樣式
<div class="panel panel-default">
<div class="panel-heading">圖解CSS3</div>
<div class="panel-body">…</div>
<div class="panel-footer">作者：大漠</div>
</div>
（3）彩色面板：
panel樣式並沒有對主題進行樣式設置，而主題樣式是通過panel-default來設置。在Bootstrap框架中面板組件除了默認的主題樣式之外，還包括以下幾種主題樣式，構成了一個彩色面板：
☑ panel-primary：重點藍
☑ panel-success：成功綠
☑ panel-info:信息藍
☑ panel-warning：警告黃
☑ panel-danger：危險紅
<div class="panel panel-default">
<div class="panel-heading">圖解CSS3</div>
<div class="panel-body">…</div>
<div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>
（4）面板中嵌套表格：
在使用面板的時候，都會在panel-body放置需要的內容，可能是圖片、表格或者列表等。
<div class="panel panel-default">
<div class="panel-heading">圖解CSS3</div>
<div class="panel-body">
<p>詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設 計、Web字體等主題下涵蓋的所有CSS3新特性
</p>
<table class="table table-bordered">
<thead>
<tr>
<th>＃</th>
<th>我的書</th>
<th>發佈時間</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>《圖解CSS3》</td>
<td>2014-07-10</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-footer">作者：大漠</div>
</div>
（5）面板中嵌套列表組：
<div class="panel panel-default">
<div class="panel-heading">圖解CSS3</div>
<div class="panel-body">
<p>詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性
</p>
<ul class="list-group">
<li class="list-group-item">我是列表項</li>
<li class="list-group-item">我是列表項</li>
<li class="list-group-item">我是列表項</li>
</ul>
</div>
<div class="panel-footer">作者：大漠</div>
</div>