縮略圖在網站中最常用的地方就是產品列表頁面，一行顯示幾張圖片，有的在圖片底下（左側或右側）帶有標題、描述等信息。Bootstrap框架將這一部獨立成一個模塊組件。并通過“thumbnail”樣式配合bootstrap的網格系統來實現。可以將產品列表頁變得更好看。
源碼文件：
? LESS版本：對應文件thumbnails.less
? Sass版本：對應文件_thumbnails.sCSS
? 編譯后版本：bootstrap.css文件第4402行～第4426行
使用方法：
通過“thumbnail”樣式配合bootstrap的網格系統來實現。
前面也說過了，縮略圖的實現是配合網格系統一起使用，假設我們一個產品列表，如下圖所示：
先來看結構：
<div class="container"> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt=""> </a> </div> … </div></div>上面的結構表示的是在寬屏幕（可視區域大于768px）的時候，一行顯示四個縮略圖(單擊全屏查看效果)：
在窄屏（可視區域小于768px）的時候，一行只顯示兩個縮略圖：
實現原理：
布局實現的主要是依靠于Bootstrap框架的網格系統，而縮略圖對應的樣式代碼：
/*bootstrap.css文件第4402行～第4426行*/.thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}.thumbnail > img,.thumbnail a > img { margin-right: auto; margin-left: auto;}a.thumbnail:hover,a.thumbnail:focus,a.thumbnail.active { border-color: #428bca;}.thumbnail .caption { padding: 9px; color: #333;}示例核心代碼：<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>縮略圖（二）
上一小節，展示的僅只有縮略圖的一種使用方式，除了這種方式之外，還可以讓縮略圖配合標題、描述內容，按鈕等：
在僅有縮略圖的基礎上，添加了一個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>警示框
在網站中，網頁總是需要和用戶一起做溝通與交流。特別是當用戶操作上下文為用戶提供一些有效的警示框，比如說告訴用戶操作成功、操作錯誤、提示或者警告等。如下圖所示：
在Bootstrap框架有一個獨立的組件，實現上述的效果，這個組件被稱為警示框。
源碼版本：
? LESS版本：對應的源碼文件alerts.less
? Sass版本：對應的源碼文件_alerts.scss
? 編譯后的版本：bootstrap.css文件第4427行～第4499行
警示框--默認警示框
Bootstrap框架通過“alert“樣式來實現警示框效果。在默認情況之下，提供了四種不同的警示框效果：
1、成功警示框：告訴用用戶操作成功，在“alert”樣式基礎上追加“alert-success”樣式，具體呈現的是背景、邊框和文本都是綠色；
2、信息警示框：給用戶提供提示信息，在“alert”樣式基礎上追加“alert-info”樣式，具體呈現的是背景、邊框和文本都是淺藍色；
3、警告警示框：提示用戶小心操作（提供警告信息），在“alert”樣式基礎上追加“alert-warning”樣式，具體呈現的是背景、邊框、文本都是淺黃色；
4、錯誤警示框：提示用戶操作錯誤，在“alert”樣式基礎上追加“alert-danger”樣式，具體呈現的是背景、邊框和文本都是淺紅色。
如下圖示：
使用方法：
具體使用的時候，可以在類名為“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>運行效果如下：
實現原理：
其中“alert”樣式的源碼主要是設置了警示框的背景色、邊框、圓角和文字顏色。另外對其內部幾個元素h4、p、ul和“.alert-link”做了樣式上的特殊處理：
/*bootstrap.css文件第4427行～第4446行*/.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px;}.alert h4 { margin-top: 0; color: inherit;}.alert .alert-link { font-weight: bold;}.alert > p,.alert > ul { margin-bottom: 0;}.alert > p + p { margin-top: 5px;}不同類型的警示框，主要是通過“alert-success”、“alert-info”、“alert-warning”和“alert-danger”樣式來實現：
/*bootstrap.css文件第4456行～第4499行*/.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6;}.alert-success hr { border-top-color: #c9e2b3;}.alert-success .alert-link { color: #2b542c;}.alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1;}.alert-info hr { border-top-color: #a6e1ec;}.alert-info .alert-link { color: #245269;}.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc;}.alert-warning hr { border-top-color: #f7e1b5;}.alert-warning .alert-link { color: #66512c;}.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1;}.alert-danger hr { border-top-color: #e4b9c0;}.alert-danger .alert-link { color: #843534;}警示框--可關閉的警示框
大家在平時瀏覽網頁的時候，會發現一些警示框帶有關閉按鈕，用戶一點擊關閉按鈕就能自動關閉顯示的警示框（也就是讓警示框隱藏不顯示）。在Bootstrap框架中的警示框也具有這樣的功能。
使用方法：
只需要在默認的警示框里面添加一個關閉按鈕。然后進行三個步驟：
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>運行效果如下：
原理分析：
在樣式上，需要在基本警示框“alert”的基礎上添加“alert-dismissable”樣式，這樣就可以實現帶關閉功能的警示框。
/*bootstrap.css文件第4447行～第4455行*/.alert-dismissable { padding-right: 35px;}.alert-dismissable .close { position: relative; top: -2px; right: -21px; color: inherit;}警示框--警示框的鏈接
有時候你可能想在警示框中加入鏈接地址，用來告訴用戶跳到某一個地方或新的頁面。而這個時候你又想讓用戶能明顯的看出來這是鏈接地址。在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>運行效果如下：
實現原理：
實現樣式如下：
/*bootstrap.css文件第4437行～第4439行*/.alert .alert-link { font-weight: bold;}/*不同類型警示框中鏈接的文本顏色*/.alert-success .alert-link { color: #2b542c;}.alert-info .alert-link { color: #245269;}.alert-warning .alert-link { color: #66512c;}.alert-danger .alert-link { color: #843534;}代碼示例：<div class="alert alert-warning" role="alert"> <strong><a href="#" class="alert-link">Warning!</a></strong> Better check yourself, you're <strong><a href="#" class="alert-link">not looking too good.</a></strong></div>進度條
在網頁中，進度條的效果并不少見，比如一個評分系統，比如加載狀態等。就如下圖所示的一個評分系統，他就是一個簡單的進度條效果：
進度條和其他獨立組件一樣，開發者可以根據自己的需要，選擇對應的版本：
? LESS版本：源碼文件progress-bars.less
? Sass版本：源碼文件_progress-bars.scss
? 編譯后版本：bootstrap.css文件第4500行～第4575行
而且Bootstrap框架為大家提供多種樣式風格的進度條，供大家使用(見右側代碼編輯器)，這一小節只是給大家直觀上展示了這些進度條樣式，接下來幾個小節中，我們將詳細講解這些進度條如何使用。
對應類名：
基本進度條：progress-bar彩色進度條：progress
條紋進度條：progress progress-striped
動態條紋進度條：progress progress-striped active
層疊進度條-正常層疊進度條、層疊條紋進度條、不良效果層疊進度條
帶Label的進度條
進度條--基本樣式
Bootstrap框架中對于進度條提供了一個基本樣式，一個100%寬度的背景色，然后個高亮的色表示完成進度。其實制作這樣的進度條非常容易，一般是使用兩個容器，外容器具有一定的寬度，并且設置一個背景顏色，他的子元素設置一個寬度，比如完成度是30%（也就是父容器的寬度比例值），同時給其設置一個高亮的背景色。
使用方法：
Bootstrap框架中也是按這樣的方式實現的，他提供了兩個容器，外容器使用“progress”樣式，子容器使用“progress-bar”樣式。其中progress用來設置進度條的容器樣式，而progress-bar用于限制進度條的進度。使用方法非常的簡單：
<div class="progress"> <div class="progress-bar" style="width:40%"></div></div>運行效果如下：
實現原理：
前面也說了，這樣的基本進度條主要分成兩部分：
progress樣式主要設置進度條容器的背景色，容器高度、間距等：
/*bootstrap.css文件第4516行～第4524行*/.progress { height: 20px; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);}而progress-bar樣式在設置進度方向，重要的是設置了進度條的背景顏色和過渡效果：
/*bootstrap.css文件第4525行～第4538行*/.progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-transition: width .6s ease; transition: width .6s ease;}結構優化：
雖然這樣實現了基本進度條效果，但對于殘障人員瀏覽網頁有點困難，所以我們可以將結構做得更好些（語義化更友好些）：
<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%。
進度80%進度條：<div class="progress"> <div class="progress-bar" style="width:80%"> </div></div>進度條--彩色進度條
Bootstrap框架中的進度條和警告信息框一樣，為了能給用戶一個更好的體驗，也根據不同的狀態配置了不同的進度條顏色。在此稱為彩色進度條，其主要包括以下四種：
? progress-bar-info：表示信息進度條，進度條顏色為藍色
? progress-bar-success：表示成功進度條，進度條顏色為綠色
? progress-bar-warning：表示警告進度條，進度條顏色為黃色
? progress-bar-danger：表示錯誤進度條，進度條顏色為紅色
使用方法：
具體使用就非常簡單了，只需要在基礎的進度上增加對應的類名。如：
<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>運行效果如下：
實現原理：
彩色進度條與基本進度條相比，就是進度條顏色做了一定的變化，其對應的樣式代碼如下：
/*bootstrap.css文件第4548行～第4550行*/.progress-bar-success { background-color: #5cb85c;}/*bootstrap.css文件第4555行～第4557行*/.progress-bar-info { background-color: #5bc0de;}/*bootstrap.css文件第4562行～第4564行*/.progress-bar-warning { background-color: #f0ad4e;}/*bootstrap.css文件第4569行～第4571行*/.progress-bar-danger { background-color: #d9534f;}實現“信息”、“警告”、“錯誤”、“成功”進度條效果。
效果圖如下：
代碼：
<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:30%"></div></div> <div class="progress"> <div class="progress-bar progress-bar-danger" style= "width:20%"></div></div>進度條--條紋進度條
在Bootstrap框架中除了提供了彩色進度條之外，還提供了一種條紋進度條，這種條紋進度條采用CSS3的線性漸變來實現，并未借助任何圖片。使用Bootstrap框架中的條紋進度條只需要在進度條的容器“progress”基礎上增加類名“progress-striped”，當然，如果你要讓你的進度條條紋像彩色進度一樣，具有彩色效果，你只需要在進度條上增加相應的顏色類名，如前面的彩色進度條所講。
一起來看一下制作條紋進度條的結構：
<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>運行效果如下：
原現實現：
正如前面所說，實現條紋進度條，主要使用的是CSS3的線性漸變，其具體代碼如下：
/*bootstrap.css文件第4539行～第4547行*/.progress-striped .progress-bar { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-size: 40px 40px;}同樣的，條紋進度條對應的每種狀態也有不同的顏色，使用方法與彩色進度條一樣。只是樣式上做了一定的調整：
/*bootstrap.css文件第4551行～第4554行*/.progress-striped .progress-bar-success { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}/*bootstrap.css文件第4558行～第4561行*/.progress-striped .progress-bar-info { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}/*bootstrap.css文件第4565行～第4568行*/.progress-striped .progress-bar-warning { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}/*bootstrap.css文件第4572行～第4575行*/.progress-striped .progress-bar-danger { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}進度條--動態條紋進度條
使用方法：
在進度條“progress progress-striped”兩個類的基礎上再加入“active”類名。如下代碼：
<div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" style="width:40%"></div></div>實現原理：
為了讓條紋進度條動起來，Bootstrap框架還提供了一種動態條紋進度條。其實現原理主要通過CSS3的animation來完成。首先通過@keyframes創建了一個progress-bar-stripes的動畫，這個動畫主要做了一件事，就是改變背景圖像的位置，也就是background-position的值。因為條紋進度條是通過CSS3的線性漸變來制作的，而linear-gradient實現的正是對應背景中的背景圖片。
/*bootstrap.css文件第4500行～第4515行*/@-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; }}@keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; }}了解CSS3的同學都知道，@keyframes僅僅是創建了一個動畫效果，如果要讓進度條真正的動起來，我們需要通過一定的方式調用@keyframes創建的動畫“progress-bar-stripes”，并且通過一個事件觸發動畫生效。在Bootstrap框架中，通過給進度條容器“progress”添加一個類名“active”，并讓文檔加載完成就觸“progress-bar-stripes”動畫生效。
<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>調用動畫對應的樣式代碼如下：
/*bootstrap.css文件第4544行～第4547行*/.progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;}運行效果如下：
特別注意：要讓條紋進度條動起來，就需要讓“progress-striped”和“active”同時運用，不然條紋進度條是不具備動效效果。
進度條--層疊進度條
Bootstrap框架除了提供上述幾種進度條之外，還提供了一種層疊進度條，層疊進度條，可以將不同狀態的進度條放置在一起，按水平方式排列。具體使用如下：
<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>運行效果如下：
或許你會感到疑問，沒有為層疊進度條添加額外的樣式代碼，怎么就正常了呢？可以回過頭來看基本進度條那部分，不難發現，在“progress-bar”上有一個左浮動的樣式。也就是這個樣式，在不增加任何樣式代碼就能實現上例的層疊效果。當然有一點需要注意，層疊進度條寬度之和不能大于100%，大于100%就會造成下面的不良效果（見右側代碼編輯器）：
除了層疊彩色進度條之外，還可以層疊條紋進度條，或者說條紋進度條和彩色進度條混合層疊，僅需要在“progress”容器中添加對應的進度條，同樣要注意，層疊的進度條之和不能大于100%。來簡單的看一個示例：
<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>運行效果如下：
進度條--帶Label的進度條
上面介紹的各種進度條，都僅僅是通過顏色進度向用戶傳遞進度值。但實際中，有很多時候是需要在進度條中直接用相關的數值向用戶傳遞完成的進度值，在Bootstrap就為大家考慮了這種使用場景。
實現方法：
只需要在進度條中添加你需要的值，如：
<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>運行效果如下：
還有一種特殊情形，當進度條處于開始位置，也就是進度條的值為0%時，內容是否會撐開一定的寬度，讓進度條具有顏色呢？如果是，這不是我們需要的效果，如果不是，又是怎么實現的呢？我們先來看一個這樣的示例：
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div></div>運行效果如下：
原理分析：
效果告訴我們，當進度為0%，進度條顏色并沒有顯示出來，那是因為Bootstrap在樣式上做了一定的處理。
/*bootstrap.css文件第4748行~第4759行*/.progress-bar[aria-valuenow="1"],.progress-bar[aria-valuenow="2"] { min-width: 30px;}.progress-bar[aria-valuenow="0"] { min-width: 30px; color: #777; background-color: transparent; background-image: none; -webkit-box-shadow: none; box-shadow: none;}注：這段代碼BootstrapV3.2版本才有。在Bootstrap V3.1.1版本是不具有這段代碼，同時也說明，Bootstrap在不斷的完善之中。
代碼示例：<h1>進度條1</h1><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>媒體對象
在Web頁面或者說移動頁面制作中，常常看到這樣的效果，左邊居左（或居右），內容居右（或居左）排列，如下圖所示：
我們常常把這樣的效果稱為媒體對象。可以說他是一種抽像的樣式，可以用來構建不同類型的組件。這些組件都具有開篇所說的樣式風格。那么在Bootstrap框架中特意將些部分提取出來做來一個組件介紹。其對應的版本文件：
? LESS版本：對應的源文件是media.less
? Sass版本：對應的源文件是_media.scss
? 編譯后版本：對應bootstrap.css文件第4792行～第4819行
媒體對象--默認媒體對象
媒體對象一般是成組出現，而一組媒體對象常常包括以下幾個部分：
? 媒體對像的容器：常使用“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>運行效果如下：
原理分析：
媒體對象樣式相對來說比較簡單，只是設置他們之間的間距，如下所示：
/*bootstrap.css文件第4792行～4815行*/.media,.media-body { overflow: hidden; zoom: 1;}.media,.media .media { margin-top: 15px;}.media:first-child { margin-top: 0;}.media-object { display: block;}.media-heading { margin: 0 0 5px;}.media > .pull-left { margin-right: 10px;}.media > .pull-right { margin-left: 10px;}媒體對象--媒體對象的嵌套
在評論系統中，常常能看到下圖的效果：
從外往里看，這里有三個媒體對象，只不過是一個嵌套在另一個的里面。那么在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>在確保你的結構沒有嵌套錯的情況下，能直接看到下圖這樣的效果：
媒體對象--媒體對象列表
媒體對象的嵌套僅是媒體對象中一個簡單應用效果之一，在很多時候，我們還會碰到一個列表，每個列表項都和媒體對象長得差不多，同樣用評論系統來說事：
使用方法：
針對上圖的媒體對象列表效果，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>運行效果如下：
原理分析：
媒體對象列表，在樣式上也并沒有做過多的特殊處理，只是把列表的左間距置０以及去掉了項目列表符號：
/*bootstrap.css文件第4816行～第4819行*/.media-list { padding-left: 0; list-style: none;}列表組
列表組是Bootstrap框架新增的一個組件，可以用來制作列表清單、垂直導航等效果，也可以配合其他的組件制作出更漂亮的組件。由于其在Bootstrap是一個獨立的組件，所以也對應有自己獨立源碼：
? LESS版本：對應的源碼文件 list-group.less
? Sass版本：對應的源碼文件是 _list-group.scss
? 編譯出的Bootstrap版本：對應的源碼bootstrap.css文件第4820行～第4994行
示例：<h3>基礎列表組</h3><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><h3>帶徽章的列表組</h3><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><h3>帶鏈接的列表組</h3><ul class="list-group"> <li class="list-group-item"> <a href="##">揭開CSS3的面</a> </li> <li class="list-group-item"> <a href="##">CSS3選擇器</a> </li> <li class="list-group-item"> <a href="##">CSS3邊框</a> </li> <li class="list-group-item"> <a href="##">CSS3背景</a> </li> <li class="list-group-item"> <a href="##">CSS3文本</a> </li></ul><h3>自定義列表組</h3><div class="list-group"> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">圖解CSS3</h4> <p class="list-group-item-text">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性...</p> </a> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">Sass中國</h4> <p class="list-group-item-text">致力于為中國開發者提供最全面，最具影響力，最前沿的Sass相關技術與教程...</p> </a></div><h3>組合列表項的狀態</h3><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><h3>多彩列表組</h3><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>基礎列表組
揭開CSS3的面紗CSS3選擇器CSS3邊框CSS3背景CSS3文本帶徽章的列表組
13揭開CSS3的面456CSS3選擇器892CSS3邊框90CSS3背景1290CSS3文本帶鏈接的列表組
揭開CSS3的面CSS3選擇器CSS3邊框CSS3背景CSS3文本自定義列表組
圖解CSS3
詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性...
Sass中國
致力于為中國開發者提供最全面，最具影響力，最前沿的Sass相關技術與教程...
組合列表項的狀態
5902圖解CSS315902W3cplus59020慕課網0Sass中國多彩列表組
5902圖解CSS315902W3cplus59020慕課網0Sass中國10Mobile教程列表組--基礎列表組
基礎列表組，看上去就是去掉了列表符號的列表項，并且配上一些特定的樣式。在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>運行效果如下：
原理分析：
對于基礎列表組并沒有做過多的樣式設置，主要設置了其間距，邊框和圓角等：
/*bootstrap.css文件第4820行～第4840行*/.list-group { padding-left: 0; margin-bottom: 20px;}.list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd;}.list-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px;}.list-group-item:last-child { margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;}列表組--帶徽章的列表組
帶徽章的列表組其實就是將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>運行效果如下：
實現原理：
實現效果非常簡單，就是給徽章設置了一個右浮動，當然如果有兩個徽章同時在一個列表項中出現時，還設置了他們之間的距離：
/*bootstrap.css文件第4841行～第4846行*/.list-group-item > .badge { float: right;}.list-group-item > .badge + .badge { margin-right: 5px;}列表組--帶鏈接的列表組
帶鏈接的列表組，其實就是每個列表項都具有鏈接效果。大家可能最初想到的就是在基礎列表組的基礎上，給列表項的文本添加鏈接：
<ul class="list-group"> <li class="list-group-item"> <a href="##">揭開CSS3的面</a> </li> <li class="list-group-item"> <a href="##">CSS3選擇器</a> </li> ...</ul>運行效果如下：
這樣做有一個不足之處，就是鏈接的點擊區域只在文本上有效：
但很多時候，都希望在列表項的任何區域都具備可點擊。這個時候就需要在鏈接標簽上增加額外的樣式：“display:block”；
雖然這樣能解決問題，達到需求。但在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>運行效果如下：
原理實現：
如果使用a.list-group-item時，在樣式需要做一定的處理，比如說去文本下劃線，增加懸浮效果等：
/*bootstrap.css文件第4847行～第4858行*/a.list-group-item { color: #555;}a.list-group-item .list-group-item-heading { color: #333;}a.list-group-item:hover,a.list-group-item:focus { color: #555; text-decoration: none; background-color: #f5f5f5;}列表組--自定義列表組
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>運行效果如下：
原理實現：
‘這兩個樣式主要控制不同狀態下的文本顏色：
/*bootstrap.css文件第4850行～第4852行*/a.list-group-item .list-group-item-heading { color: #333;}/*bootstrap文件第4865行～第4874行*/.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading { color: inherit;}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text { color: #777;}/*bootstrap.css文件第4883行～第4898行*/.list-group-item.active .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active .list-group-item-heading > small,.list-group-item.active:hover .list-group-item-heading > small,.list-group-item.active:focus .list-group-item-heading > small,.list-group-item.active .list-group-item-heading > .small,.list-group-item.active:hover .list-group-item-heading > .small,.list-group-item.active:focus .list-group-item-heading > .small { color: inherit;}.list-group-item.active .list-group-item-text,.list-group-item.active:hover .list-group-item-text,.list-group-item.active:focus .list-group-item-text { color: #e1edf7;}/*bootstrap.css文件第4987行～第4994行*/.list-group-item-heading { margin-top: 0; margin-bottom: 5px;}.list-group-item-text { margin-bottom: 0; line-height: 1.3;}列表組--列表項的狀態設置
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>運行效果如下：
原理實現：
在樣式上主要對列表項的背景色和文本做了樣式設置：
/*bootstrap.css文件第4859行～第4864行*/.list-group-item.disabled,.list-group-item.disabled:hover,.list-group-item.disabled:focus { color: #777; background-color: #eee;}/*bootstrap.css文件第4875行～第4882行*/.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus { z-index: 2; color: #fff; background-color: #428bca; border-color: #428bca;}為列表項添加狀態,效果圖如下:
代碼：
<h2>代碼任務部分</h2><div class="list-group"> <a href="##" class="list-group-item active">性能優化之php優化<span class="badge">10</span></a> <a href="##" class="list-group-item">Canvas繪圖詳解<span class="badge">3</span></li> <a href="##" class="list-group-item">玩轉Bootstrap<span class="badge">0</span></a> <a href="##" class="list-group-item disabled">基于bootstrap的網頁開發<span class="badge">22</span></a></div>列表組--多彩列表組
列表組組件和警告組件一樣，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>運行效果如下：
原理實現：
同樣的，這幾個類名僅修改了背景色和文本色，對應的源碼為：boostrap.css文件第4899行～第4986行：
.list-group-item-success { color: #3c763d; background-color: #dff0d8;}a.list-group-item-success { color: #3c763d;}a.list-group-item-success .list-group-item-heading { color: inherit;}a.list-group-item-success:hover,a.list-group-item-success:focus { color: #3c763d; background-color: #d0e9c6;}a.list-group-item-success.active,a.list-group-item-success.active:hover,a.list-group-item-success.active:focus { color: #fff; background-color: #3c763d; border-color: #3c763d;}由于篇幅問題，其它狀態樣式代碼請查看源碼文件。
實現多彩列表組,效果圖如下：
<h2>代碼任務部分</h2><div class="list-group"> <a href="##" class="list-group-item list-group-item-success">性能優化之PHP優化<span class="badge">10</span></a> <a href="##" class="list-group-item list-group-item-info">Canvas繪圖詳解<span class="badge">3</span></a> <a href="##" class="list-group-item list-group-item-warning">玩轉Bootstrap<span class="badge">0</span></a> <a href="##" class="list-group-item list-group-item-danger">基于bootstrap的網頁開發<span class="badge">22</span></a></div>面板
面板（Panels）是Bootstrap框架新增的一個組件，其主要作用就是用來處理一些其他組件無法完成的功能。同樣在不同的版本中具有不同的源碼：
? Less版本：對應的源碼文件是 panels.less
? Sass版本：對應的源碼文件是 _panels.scss
? 編譯后的Bootstrap：對應bootstrap.css文件第4995行～第5302行
代碼示例：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>面板</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><h3>基礎面板</h3><div class="panel panel-default"> <div class="panel-body">我是一個基礎面板，帶有默認主題樣式風格</div></div><h3>帶有頭和尾的面板</h3><div class="panel panel-default"> <div class="panel-heading">圖解CSS3</div> <div class="panel-body">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性 </div> <div class="panel-footer">作者：大漠</div></div><h3>彩色面板</h3><div class="panel panel-default"> <div class="panel-heading">圖解CSS3</div> <div class="panel-body"> 詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性 </div> <div class="panel-footer">作者：大漠</div></div><div class="panel panel-primary"> <div class="panel-heading">圖解CSS3</div> <div class="panel-body">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性</div> <div class="panel-footer">作者：</div></div><div class="panel panel-success"> <div class="panel-heading">圖解CSS3</div> <div class="panel-body">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性</div> <div class="panel-footer">作者：</div></div><div class="panel panel-info"> <div class="panel-heading">圖解CSS3</div> <div class="panel-body">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性</div> <div class="panel-footer">作者：</div></div><div class="panel panel-warning"> <div class="panel-heading">圖解CSS3</div> <div class="panel-body">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性</div> <div class="panel-footer">作者：</div></div><div class="panel panel-danger"> <div class="panel-heading">圖解CSS3</div> <div class="panel-body">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性</div> <div class="panel-footer">作者：</div></div><h3>面板中嵌套表格</h3><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> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>基礎面板
我是一個基礎面板，帶有默認主題樣式風格帶有頭和尾的面板
圖解CSS3詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性作者：彩色面板
圖解CSS3詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性作者：圖解CSS3詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性作者：圖解CSS3詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性作者：圖解CSS3詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性作者：圖解CSS3詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性作者：圖解CSS3詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性作者：面板中嵌套表格
圖解CSS3詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性
| ＃ | 我的書 | 發布時間 |
|---|---|---|
| 1 | 《圖解CSS3》 | 2014-07-10 |
基礎面板非常簡單，就是一個div容器運用了“panel”樣式，產生一個具有邊框的文本顯示塊。由于“panel”不控制主題顏色，所以在“panel”的基礎上增加一個控制顏色的主題“panel-default”，另外在里面添加了一個“div.panel-body”來放置面板主體內容：
<div class="panel panel-default"> <div class="panel-body">我是一個基礎面板，帶有默認主題樣式風格</div></div>運行效果如下：
原理分析：
“panel“主要對邊框，間距和圓角做了一定的設置：
/*bootstrap.css文件第4995行～第5005行*/.panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05);}.panel-body { padding: 15px;}<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>面板--基礎面板</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><!--下面是代碼任務部分--><div class="panel panel-default"> <div class="panel-body">我是一個基礎面板，帶有默認主題樣式風格</div></div><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>面板--帶有頭和尾的面板
基礎面板看上去太簡單了，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>運行效果如下：
原理分析：
panel-heading和panel-footer也僅僅間距和圓角等樣式進行了設置：
/*bootstrap.css文件第5006行～第5030行*/.panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px;}.panel-heading > .dropdown .dropdown-toggle { color: inherit;}.panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit;}.panel-title > a { color: inherit;}.panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}<div class="panel panel-default"> <div class="panel-heading">rocky</div> <div class="panel-body">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性 </div> <div class="panel-footer">rocky</div></div>面板--彩色面板
在基礎面板一節中了解到，panel樣式并沒有對主題進行樣式設置，而主題樣式是通過panel-default來設置。在Bootstrap框架中面板組件除了默認的主題樣式之外，還包括以下幾種主題樣式，構成了一個彩色面板：
? panel-primary：重點藍
? panel-success：成功綠
? panel-info:信息藍
? panel-warning：警告黃
? panel-danger：危險紅
使用方法就很簡單了，只需要在panel的類名基礎上增加自己需要的類名：
<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>運行效果如下：
從效果中不難發現，這幾個樣式只是改變了面板的背景色、文本和邊框顏色：具體源碼可以查看bootstrap.css文件第5195行～第5302行。
面板--面板中嵌套表格
一般情況下可以把面板理解為一個區域，在使用面板的時候，都會在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>運行效果如下：
優化代碼：
在實際應用運中，你或許希望表格和面板邊緣不需要有任何的間距。但由于panel-body設置了一個padding：15px的值，為了實現這樣的效果。我們在實際使用的時候需要把table提取到panel-body外面：
<div class="panel panel-default"> <div class="panel-heading">圖解CSS3</div> <div class="panel-body">…</div> <table class="table table-bordered">…</table> <div class="panel-footer">作者：大漠</div></div>運行效果如下：
這樣的效果是不是完美多了。大家可能會問，前面介紹表格的時候table-bordered明明有邊框，按理說這里應該會出現邊框重疊效果才對，怎么沒有呢？其實原本是有邊框重疊的，只不過在面板中對表格又做了一次優化。對應的代碼是bootstrap.css文件中第5054行～第5172行。
面板--面板中嵌套列表組
在上一節，我們介紹了如何在面板中放置表格，現在我們來學習如何在面板中放置列表組，我們簡單的來看一個示例：
<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>運行效果如下：
優化代碼：
和嵌套表格一樣，如果你覺得這樣有間距不好看，你完全可以把列表組提取出來：
<div class="panel panel-default"> <div class="panel-heading">圖解CSS3</div> <div class="panel-body">…</div> <ul class="list-group"> <li class="list-group-item">我是列表項</li> <li class="list-group-item">我是列表項</li> <li class="list-group-item">我是列表項</li> </ul> <div class="panel-footer">作者：大漠</div></div>運行效果如下：
同樣的道理，Bootstrap將嵌套在面板中的列表組做了一定的樣式優化。具體源碼可以查看bootstrap.css文件第5031行～第5053行。
新聞熱點
疑難解答
