Bootstrap 警告、進度條、列表組、面板

摘要：該部分包括警告、進度條、列表組、面板等部分。

1.警告（alert）

1.1 基本的警告（.alert）

警告的基類是 .alert 。和其餘樣式類一塊使用。例如: .alert-success、.alert-info、.alert-danger、.alert-warning.代碼示例：

1 <div class="alert alert-success">成功</div>
2 <div class="alert alert-info">信息，請覈對信息</div>
3 <div class="alert alert-warning">警告，中止操做</div>
4 <div class="alert alert-danger">發現錯誤，請更改</div>

顯示結果以下:

1.2 可取消的警告框（.alert-dismissable）

在<div>中添加類 .alert-dismissable，並在其中添加取消按鈕便可。代碼示例：

1 <div class="alert alert-success alert-dismissable">
2     <button class="close" type="button" data-dismiss="alert"> &times;</button>
3     成功
4 </div>
5 <div class="alert alert-info alert-dismissable">
6     <button class="close" type="button" data-dismiss="alert"> &times;</button>
7     信息，請覈對信息
8 </div>

顯示以下，點擊右側的×便可取消該警告：

其中，必定要有帶有data-dismiss="alert" 屬性的按鈕元素。

 1.3 帶有連接的警告（alert-link）

 在帶有基類 .alert 和樣式類 （四個中的一個）的<div>元素中，添加錨元素，而且爲該錨元素添加實體類 .alert-link 來提供匹配顏色的連接。代碼示例：

1 <div class="alert alert-success alert-dismissable">
2     <button class="close" type="button" data-dismiss="alert"> &times;</button>
3     <a href="#" class="alert-link" >成功啦！</a>
4 </div>
5 <div class="alert alert-info alert-dismissable">
6     <button class="close" type="button" data-dismiss="alert"> &times;</button>
7     <a href="#" class="alert-link" >信息，請覈對信息</a>
8 </div>

顯示結果，鼠標懸停在連接上回出現下劃線：

 2.進度條（progress）

2.1 基本的進度條（progress-bar）

進度條總體包括兩個部分: 進度條所在的位置  和  顯示的文字（可省略）。代碼示例：

1 <div class="progress"> 
2     <div class="progress-bar" role="progressbar" aria-valuenow="60" 
3         aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
4         <span>60%</span> 
5     </div> 
6 </div>

其中，aria-valuenow="60"表示當前進度條的進度是60%；aria-valuemin="0"表示進度條的最小值是0；aria-valuemax="100"表示進度條的最大值是100%；

顯示以下：

2.2 進度條的樣式（progress-bar-* : success、info、warning、danger）

爲了代碼看起來簡潔一些，一下代碼省略aria-value*部份內容，不影響進度條的顯示。四種樣式的進度條代碼示例:

 1 <div class="progress">        
 2     <div class="progress-bar progress-bar-success" style="width:100%">
 3         <span>100%</span>
 4     </div>
 5 </div>
 6 <div class="progress">                
 7     <span>50%</span>
 8     <div class="progress-bar progress-bar-info" style="width:50%"></div>
 9 </div>
10 <div class="progress">                    
11     <span>30%</span>
12     <div class="progress-bar progress-bar-warning" style="width:30%"></div>
13 </div>
14 <div class="progress">                    
15     <span>10%</span>
16     <div class="progress-bar progress-bar-danger" style="width:10%"></div>
17 </div>

 顯示結果以下：

 

 

 2.3 帶條紋的進度條（progress-striped）

在類 progress所在的容器中添加類 progress-striped.代碼示例：

<div class="progress progress-striped">    
    <span>50%</span>
    <div class="progress-bar progress-bar-info" style="width:50%"></div>
</div>

結果顯示以下：

2.4 動畫效果（active）

在上述的帶有條紋的進度條中添加類 active，便可獲得條紋持續滾動的動態進度條。代碼示例：

1 <div class="progress progress-striped active">    
2     <div class="progress-bar progress-bar-success" style="width:100%">
3         <span>100%</span>
4     </div>
5 </div>

因爲圖片顯示不出動態效果，讀者可自行運行代碼，查看效果。

2.5  堆疊的進度條

多個進度條放在同一個帶有類progress的容器中，就會產生堆疊的進度條，代碼示例：

 1 <div class="progress progress-striped active">    
 2     <div class="progress-bar progress-bar-success" style="width:50%">
 3         <span>50%</span>
 4     </div>    
 5     <div class="progress-bar progress-bar-info" style="width:20%">
 6         <span>20%</span>
 7     </div>    
 8     <div class="progress-bar progress-bar-warning" style="width:30%">
 9         <span>30%</span>
10     </div>
11 </div>

其中，在同一個progress的容器中，進度條的進度和要不大於100%，不然沒法正常顯示。

上述代碼顯示結果以下，其中的條紋會持續滾動：

3.列表組（list-group）

3.1 基本的列表組

列表組是把複雜的內容或者自定義的內容用列表的形式展示出來。列表組的基本結構以下，帶有類.list-group的無序列表，列表項使用類.list-group-item來設置樣式：

<ul class="list-group"> 
    <li class="list-group-item">相冊</li> 
    <li class="list-group-item">收藏</li> 
    <li class="list-group-item">錢包</li> 
    <li class="list-group-item">表情</li> 
    <li class="list-group-item">設置</li> 
    <li class="list-group-item">版本</li> 
</ul>

顯示結果以下:

3.2 帶徽章的列表組（badge）

能夠向任意的列表選項添加徽章組件，徽章組件會自動定位到列表項的右邊。代碼以下:

 1 <ul class="list-group"> 
 2     <li class="list-group-item">相冊</li> 
 3     <li class="list-group-item">收藏</li> 
 4     <li class="list-group-item">錢包</li> 
 5     <li class="list-group-item">表情</li> 
 6     <li class="list-group-item">
 7         設置<span class="badge">新</span>
 8     </li> 
 9     <li class="list-group-item">
10         版本<span class="badge">新</span>
11     </li> 
12 </ul>

顯示結果以下：

 3.3 向列表組添加連接

代碼格式：

 1 <ul class="list-group"> 
 2     <a href="#" class="list-group-item active">相冊</a> 
 3     <a href="#" class="list-group-item">收藏</a> 
 4     <a href="#" class="list-group-item">錢包</a> 
 5     <a href="#" class="list-group-item">表情</a> 
 6     <a href="#" class="list-group-item">設置</a> 
 7     <a href="#" class="list-group-item">
 8         版本<span class="badge">新</span>
 9     </a> 
10 </ul>

顯示結果：

3.4 想列表組添加自定義內容

代碼示例（借用菜鳥教程中的示例）：

 1 <div class="list-group"> 
 2     <a href="#" class="list-group-item active"> 
 3         <h4 class="list-group-item-heading"> 
 4             入門網站包 
 5         </h4> 
 6     </a> 
 7     <a href="#" class="list-group-item"> 
 8         <h4 class="list-group-item-heading"> 
 9             免費域名註冊 
10         </h4> 
11         <p class="list-group-item-text"> 
12             您將經過網頁進行免費域名註冊。 
13         </p> 
14     </a> 
15     <a href="#" class="list-group-item"> 
16         <h4 class="list-group-item-heading"> 
17             24*7 支持 
18         </h4> 
19         <p class="list-group-item-text"> 
20             咱們提供 24*7 支持。 
21         </p> 
22     </a> 
23 </div> 
24 <div class="list-group"> 
25     <a href="#" class="list-group-item active"> 
26         <h4 class="list-group-item-heading"> 
27             商務網站包 
28         </h4> 
29     </a> 
30     <a href="#" class="list-group-item"> 
31         <h4 class="list-group-item-heading"> 
32             免費域名註冊 
33         </h4> 
34         <p class="list-group-item-text"> 
35             您將經過網頁進行免費域名註冊。 
36         </p> 
37     </a> 
38     <a href="#" class="list-group-item"> 
39         <h4 class="list-group-item-heading">24*7 支持</h4> 
40         <p class="list-group-item-text">咱們提供 24*7 支持。</p> 
41     </a> 
42 </div>

顯示結果：

 4.面板（panel）

4.1 基本的面板格式

完整的面板格式包括：面板的頭（標題）、身體（主題內容）和腳（腳註，存放副文本）。另外腳註不會從帶語境色彩的面板中繼承顏色和邊框。

其中第3行的panel-title是爲了添加帶有預約義樣式的標題（若是不須要該部分能夠省略），好比<h1>~<h6>

 1 <div class="panel panel-default">
 2     <div class="panel-heading">
 3         <h4 class="panel-title">面板頭部的標題</h3>
 4     </div>
 5     <div class="panel-body">
 6         面板的主體部分<br>
 7         面板的主體部分<br>
 8         面板的主體部分<br>
 9         面板的主體部分
10     </div>
11     <div class="panel-footer">
12         面板得腳註部分
13     </div>
14 </div>

結果顯示以下：

4.2 帶語境色彩的面板（panel-*  primary\success\info\warning\danger）

把4.1中程序第1行中的panel-default換成 panel-primary、panel-success、panel-info、panel-warning、panel-danger中的任意一個，能夠獲得一下結果。

注意：腳註不會從帶語境色彩的面板中繼承顏色和邊框！

顯示結果以下：

 

 

4.3 帶表格的面板

 代碼示例，能夠省略panel-body部分：

 1 <div class="panel panel-info">
 2     <div class="panel-heading">
 3         不帶title的標題 panel-info
 4     </div>
 5     <div class="panel-body">
 6         帶表格的面板
 7     </div>
 8     <table class="table"> 
 9         <th>姓名</th>
10         <th>年齡</th> 
11         <tr>
12             <td>張三</td>
13             <td>20</td>
14         </tr> 
15         <tr>
16             <td>李四</td>
17             <td>24</td>
18         </tr> 
19     </table> 
20 </div>

顯示結果以下：

4.4 帶列表組的面板

 1 <div class="panel panel-default"> 
 2     <div class="panel-heading">面板標題</div> 
 3     <div class="panel-body"> 
 4         <p>這是一個基本的面板內容。這是一個基本的面板內容。 
 5             這是一個基本的面板內容。這是一個基本的面板內容。  
 6         </p> 
 7     </div> 
 8     <ul class="list-group"> 
 9         <li class="list-group-item">相冊</li> 
10         <li class="list-group-item">收藏</li> 
11         <li class="list-group-item">錢包</li> 
12         <li class="list-group-item">設置</li> 
13         <li class="list-group-item">關於</li> 
14     </ul> 
15 </div>

顯示以下：