BootStrap學習筆記

本文轉載自查看原文 2016-03-12 13:57 1091 HTML+CSS

BootStrap筆記

一．BootStrap簡介

1、Bootstrap的由來

　　2011年，twitter的“一小撮”工程師為了提高他們內部的分析和管理能力，用業余時間為他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所設計和建立，在github上開源之后，迅速成為該站上最多人watch&fork的項目。大量工程師踴躍為該項目貢獻代碼，社區驚人地活躍，代碼版本進化非常快速，官方文檔質量極其高(可以說是優雅)，同時涌現了許多基於Bootstrap建設的網站：界面清新、簡潔;要素排版利落大方。如屏幕這幾個網站頁面都是用Bootstrap框架制作的。

2、基本的HTML模板

（1）bootstrap模板為使IE6、7、8版本（IE9以下版本）瀏覽器兼容html5新增的標簽，引入下面代碼文件即可：

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

（2）同理為使IE6、7、8版本瀏覽器兼容css3樣式，引入下面代碼：

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

***Bootstrap用到的HTML元素和CSS屬性需要HTML5 doctype。因此每個使用Bootstrap的頁面都應該包啟HTML5聲明。

3、全局樣式

（1）移除body的margin聲明

（2）設置body的背景色為白色

（3）為排版設置了基本的字體、字號和行高

（4）設置全局鏈接顏色，且當鏈接處於懸浮“:hover”狀態時才會顯示下划線樣式

 1 <!--之前要引入bootstrap.min.css樣式表-->
 2 
 3 <body>
 4 
 5     <div class="jumbotron">
 6 
 7         <h1>Hello, world!</h1>
 8 
 9         <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
10 
11         <p><a href="#" >Learn more »</a></p>
12 
13     </div>
14 
15 </body>

二、排版

1、標題

（1）Bootstrap和普通的HTML頁面一樣，定義標題都是使用標簽<h1>到<h6>,只不過Bootstrap覆蓋了其默認的樣式，使用其在所有瀏覽器下顯示的效果一樣，具體定義的規則可以如下表所示：

　　通過比較可以發現，Bootstrap標題樣式進行了以下顯著的優化重置：

1、重新設置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有標題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。
3、固定不同級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

標題的具體運用非常簡單，和我們平時運用是一樣的，使用<h1>~<h6>標簽，分別表示標題一至標題六，h 后面的數字越大，表示級別越小，文本也越小。來看一個簡單的效果：右側代碼編輯器中的10-16行的代碼。

在Bootstrap中為了讓非標題元素和標題使用相同的樣式，還特意定義了.h1~.h6六個類名。

 1 <!--之前要引入bootstrap.min.css樣式表-->
 2 
 3 <body>
 4 
 5     <!--Bootstrap中的標題-->
 6 
 7     <h1>Bootstrap標題一</h1>
 8 
 9     <h2>Bootstrap標題二</h2>
10 
11     <h3>Bootstrap標題三</h3>
12 
13     <h4>Bootstrap標題四</h4>
14 
15     <h5>Bootstrap標題五</h5>
16 
17     <h6>Bootstrap標題六</h6>
18 
19     <!--Bootstrap中讓非標題元素和標題使用相同的樣式-->
20 
21     <div class="h1">Bootstrap標題一</div>
22 
23     <div class="h2">Bootstrap標題二</div>
24 
25     <div class="h3">Bootstrap標題三</div>
26 
27     <div class="h4">Bootstrap標題四</div>
28 
29     <div class="h5">Bootstrap標題五</div>
30 
31     <div class="h6">Bootstrap標題六</div>
32 
33 </body>

（2）除此之外，我們在Web的制作中，常常會碰到在一個標題后面緊跟着一行小的副標題。在Bootstrap中他也考慮了這種排版效果，使用了<small>標簽來制作副標題。這個副標題具有其自己的一些獨特樣式：

1、行高都是1，而且font-weight設置了normal變成了常規效果（不加粗），同時顏色被設置為灰色（#999）。
2、由於<small>內的文本字體在h1~h3內，其大小都設置為當前字號的65%；而在h4~h6內的字號都設置為當前字號的75%；

 1 <!--之前要引入bootstrap.min.css樣式表-->
 2 
 3 <h1>Bootstrap標題一<small>我是副標題</small></h1>
 4 
 5 <h2>Bootstrap標題二<small>我是副標題</small></h2>
 6 
 7 <h3>Bootstrap標題三<small>我是副標題</small></h3>
 8 
 9 <h4>Bootstrap標題四<small>我是副標題</small></h4>
10 
11 <h5>Bootstrap標題五<small>我是副標題</small></h5>
12 
13 <h6>Bootstrap標題六<small>我是副標題</small></h6>

2、段落

　　段落是排版中另一個重要元素之一。在Bootstrap中為文本設置了一個全局的文本樣式（這里所說的文本是指正文文本）：

1、全局文本字號為14px(font-size)。

2、行高為1.42857143（line-height），大約是20px(大家看到一串的小數或許會有疑惑，其實他是通過LESS編譯器計算出來的，當然Sass也有這樣的功能)。

3、顏色為深灰色（#333）；

4、字體為"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對我們中文並不太合適，但在實際項目中，大家可以根據自己的需求進行重置，在此我們不做過多闡述，我們回到這里。該設置都定義在<body>元素上，由於這幾個屬性都是繼承屬性，所以Web頁面中文本（包括段落p元素）如無重置都會具有這些樣式效果。

1 <body>
2 
3     <p>超酷的互聯網、IT技術免費學習平台，創新的網絡一站式學習、實踐體驗；服務及時貼心，內容專業、有趣易學。專注服務互聯網工程師快速成為技術高手！</p>
4 
5     <p>超酷的互聯網、IT技術免費學習平台，創新的網絡一站式學習、實踐體驗；服務及時貼心，內容專業、有趣易學。專注服務互聯網工程師快速成為技術高手！</p>
6 
7 </body>

3、強調內容

　　在實際項目中，對於一些重要的文本，希望突出強調的部分都會做另外的樣式處理。Bootstrap同樣對這部分做了一些輕量級的處理。

　　如果想讓一個段落p突出顯示，可以通過添加類名“lead”實現，其作用就是增大文本字號，加粗文本，而且對行高和margin也做相應的處理。

1 <p>我是普通文本，我的樣子長成這樣我是普通文本，我的樣子長成這樣我是普通文本，</p>
2 <p class="lead">我是特意要突出的文本，我的樣子成這樣。我是特意要突出的文本，我的樣子長成這樣。</p>

4、粗體

　　粗體就是給文本加粗，在普通的元素中我們一般通過font-weight設置為bold關鍵詞給文本加粗。在Bootstrap中，可以使用<b>和<strong>標簽讓文本直接加粗。

5、斜體

　　在排版中，除了用加粗來強調突出的文本之外，還可以使用斜體。斜體類似於加粗一樣，除了可以給元素設置樣式font-style值為italic實現之外，在Bootstrap中還可以通過使用標簽<em>或<i>來實現。

6、強調相關的類

在Bootstrap中除了使用標簽<strong>、<em>等說明正文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這里稱其為強調類名（類似前面說的“.lead”）,這些強調類都是通過顏色來表示強調，具本說明如下：

.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）

 1 <body>
 2 
 3     <div class="text-muted">.text-muted 效果</div>
 4 
 5     <div class="text-primary">.text-primary效果</div>
 6 
 7     <div class="text-success">.text-success效果</div>
 8 
 9     <div class="text-info">.text-info效果</div>
10 
11     <div class="text-warning">.text-warning效果</div>
12 
13     <div class="text-danger">.text-danger效果</div>
14 
15 </body>

7、文本對齊風格

　　在排版中離不開文本的對齊方式。在CSS中常常使用text-align來實現文本的對齊風格的設置。其中主要有四種風格：

☑ 左對齊，取值left

☑ 居中對齊，取值center

☑ 右對齊，取值right

☑ 兩端對齊，取值justify

　　為了簡化操作，方便使用，Bootstrap通過定義四個類名來控制文本的對齊風格：

☑ .text-left：左對齊

☑ .text-center：居中對齊

☑ .text-right：右對齊

☑ .text-justify：兩端對齊

<p class="text-left">我居左</p>

<p class="text-center">我居中</p>

<p class="text-right">我居右</p>

8、列表

（1）簡介

　　在HTML文檔中，列表結構主要有三種：有序列表、無序列表和定義列表。具體使用的標簽說明如下：
　無序列表

<ul>

</ul>

有序列表

<ol>

</ol>

定義列表

<dl>

</dl>

（2）無序列表、有序列表

無序列表和有序列表使用方式和我們平時使用的一樣（無序列表使用ul，有序列表使用ol標簽），在樣式方面，Bootstrap只是在此基礎上做了一些細微的優化（只是在margin上做了一些調整）

在Bootstrap中列表也是可以嵌套的。

<ul>

</ul>

<ol>

<li>項目列表一</li>

<li>項目列表二</li>

<li>項目列表三</li>

</ol>

<h5>有序列表嵌套</h5>

<ol>

<li>

有序列表

<ol>

</ol>

</li>

</ol>

（3）去點列表

　　Bootstrap為眾多開發者考慮的非常周道，通過給無序列表添加一個類名“.list-unstyled”,這樣就可以去除默認的列表樣式的風格。

1 <ul class="list-unstyled">
2 
3             <li>不帶項目符號</li>
4 
5             <li>不帶項目符號</li>
6 
7  </ul>

（4）內聯列表

Bootstrap像去點列表一樣，通過添加類名“.list-inline”來實現內聯列表，簡單點說就是把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示。也可以說內聯列表就是為制作水平導航而生。

 1 <ul class="list-inline">
 2 
 3     <li>W3cplus</li>
 4 
 5     <li>Blog</li>
 6 
 7     <li>CSS3</li>
 8 
 9     <li>jQuery</li>
10 
11     <li>PHP</li>
12 
13 </ul>

（5）定義列表

對於定義列表而言，Bootstrap並沒有做太多的調整，只是調整了行間距，外邊距和字體加粗效果。

<dl>
    <dt>W3cplus</dt>
    <dd>一個致力於推廣國內前端行業的技術博客</dd>
    <dt>慕課網</dt>
    <dd>一個真心在做教育的網站</dd>
</dl>

9、表格

（1）Bootstrap為表格不同的樣式風格提供了不同的類名，主要包括：

☑ .table：基礎表格

☑ .table-striped：斑馬線表格（讓表格帶有背景條紋效果）

☑ .table-bordered：帶邊框的表格（所有單元格具有一條1px的邊框。）

☑ .table-hover：鼠標懸停高亮的表格（當鼠標懸停在表格的行上面有一個高亮的背景色）

☑ .table-condensed：緊湊型表格（單元格沒內距或者內距較其他表格的內距更小）

☑ .table-responsive：響應式表格（當你的瀏覽器可視區域小於768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大於768px時，表格底部水平滾動條就會消失）

（2）Bootstrap還為表格的行元素<tr>提供了五種不同的類名，每種類名控制了行的不同背景顏色，具體說明如下表所示：

其使用非常的簡單，只需要在<tr>元素中添加上表對應的類名，就能達到你自己需要的效果。

 1 <table class="table table-bordered">
 2   <thead>
 3     <tr>
 4       <th>類名</th>
 5       <th>描述</th>
 6     </tr>
 7   </thead>
 8   <tbody>
 9     <tr class="active">
10       <td>.active</td>
11       <td>表示當前活動的信息</td>
12     </tr>
13     <tr class="success">
14       <td>.success</td>
15       <td>表示成功或者正確的行為</td>
16     </tr>
17     <tr class="info">
18       <td>.info</td>
19       <td>表示中立的信息或行為</td>
20     </tr>
21     <tr class="warning">
22       <td>.warning</td>
23       <td>表示警告，需要特別注意</td>
24     </tr>
25     <tr class="danger">
26       <td>.danger</td>
27       <td>表示危險或者可能是錯誤的行為</td>
28     </tr>
29   </tbody>

三、表單

1、基礎表單

對於基礎表單，Bootstrap並未對其做太多的定制性效果設計，僅僅對表單內的fieldset、legend、label標簽進行了定制。

　　在Bootstrap框架中，通過定制了一個類名`form-control`，也就是說，如果這幾個元素使用了類名“form-control”，將會實現一些設計上的定制效果。

1、寬度變成了100%

2、設置了一個淺灰色（#ccc）的邊框

3、具有4px的圓角

4、設置陰影效果，並且元素得到焦點之時，陰影和邊框效果會有所變化

5、設置了placeholder的顏色為#999

 1 <form role="form">
 2 
 3   <div class="form-group">
 4 
 5     <label for="exampleInputEmail1">郵箱：</label>
 6 
 7     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="請輸入您的郵箱地址">
 8 
 9   </div>
10 
11   <div class="form-group">
12 
13     <label for="exampleInputPassword1">密碼</label>
14 
15     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="請輸入您的郵箱密碼">
16 
17   </div>
18 
19   <div class="checkbox">
20 
21     <label>
22 
23       <input type="checkbox"> 記住密碼
24 
25     </label>
26 
27   </div>
28 
29   <button type="submit" class="btn btn-default">進入郵箱</button>
30 
31 </form>

2、水平表單

Bootstrap框架默認的表單是垂直顯示風格，但很多時候我們需要的水平表單風格（標簽居左，表單控件居右）

在Bootstrap框架中要實現水平表單效果，必須滿足以下兩個條件：
1、在<form>元素是使用類名“form-horizontal”。
2、配合Bootstrap框架的網格系統。（網格布局會在以后的章節中詳細講解）

在<form>元素上使用類名“form-horizontal”主要有以下幾個作用：
1、設置表單控件padding和margin值。
2、改變“form-group”的表現形式，類似於網格系統的“row”。

 1 <form class="form-horizontal" role="form">
 2 
 3   <div class="form-group">
 4 
 5     <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
 6 
 7     <div class="col-sm-10">
 8 
 9       <input type="email" class="form-control" id="inputEmail3" placeholder="請輸入您的郵箱地址">
10 
11     </div>
12 
13   </div>
14 
15   <div class="form-group">
16 
17     <label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
18 
19     <div class="col-sm-10">
20 
21       <input type="password" class="form-control" id="inputPassword3" placeholder="請輸入您的郵箱密碼">
22 
23     </div>
24 
25   </div>
26 
27   <div class="form-group">
28 
29     <div class="col-sm-offset-2 col-sm-10">
30 
31       <div class="checkbox">
32 
33         <label>
34 
35           <input type="checkbox"> 記住密碼
36 
37         </label>
38 
39       </div>
40 
41     </div>
42 
43   </div>
44 
45   <div class="form-group">
46 
47     <div class="col-sm-offset-2 col-sm-10">
48 
49       <button type="submit" class="btn btn-default">進入郵箱</button>
50 
51     </div>
52 
53   </div>
54 
55 </form>

3、內聯表單

（1）有時候我們需要將表單的控件都在一行內顯示。在Bootstrap框架中實現這樣的表單效果是輕而易舉的，你只需要在<form>元素中添加類名“form-inline”即可。
（2）內聯表單實現原理非常簡單，欲將表單控件在一行顯示，就需要將表單控件設置成內聯塊元素（display:inline-block）。如果你要在input前面添加一個label標簽時，會導致input換行顯示。如果你必須添加這樣的一個label標簽，並且不想讓input換行，你需要將label標簽也放在容器“form-group”中。

 1 <form class="form-inline" role="form">
 2 
 3   <div class="form-group">
 4 
 5     <label class="sr-only" for="exampleInputEmail2">郵箱</label>
 6 
 7     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="請輸入你的郵箱地址">
 8 
 9   </div>
10 
11   <div class="form-group">
12 
13     <label class="sr-only" for="exampleInputPassword2">密碼</label>
14 
15     <input type="password" class="form-control" id="exampleInputPassword2" placeholder="請輸入你的郵箱密碼">
16 
17   </div>
18 
19   <div class="checkbox">
20 
21     <label>
22 
23       <input type="checkbox"> 記住密碼
24 
25     </label>
26 
27   </div>
28 
29   <button type="submit" class="btn btn-default">進入郵箱</button>
30 
31 </form>

View Code

4、表單控件--輸入框

常見的文本輸入框，也就是input的type屬性值為text。在Bootstrap中使用input時也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式。為了讓控件在各種表單風格中樣式不出錯，需要添加類名“form-control”。

1 <form role="form">
2 
3   <div class="form-group">
4 
5     <input type="email" class="form-control" placeholder="Enter email">
6 
7   </div>
8 
9 </form>

5、表單控件--下拉框

Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設置multiple屬性的值為multiple。Bootstrap框架會為這些元素提供統一的樣式風格。

 1 <form role="form">
 2 
 3   <div class="form-group">
 4 
 5     <select class="form-control">
 6 
 7       <option>1</option>
 8 
 9       <option>2</option>
10 
11       <option>3</option>
12 
13       <option>4</option>
14 
15       <option>5</option>
16 
17       </select>
18 
19   </div>
20 
21   <div class="form-group">
22 
23       <select multiple class="form-control">
24 
25         <option>1</option>
26 
27         <option>2</option>
28 
29         <option>3</option>
30 
31         <option>4</option>
32 
33         <option>5</option>
34 
35       </select>
36 
37   </div>
38 
39 </form>

View Code

6、表單控件--文本域

文本域和原始使用方法一樣，設置rows可定義其高度，設置cols可以設置其寬度。但如果textarea元素中添加了類名“form-control”類名，則無需設置cols屬性。因為Bootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。

1 <form role="form">
2 
3   <div class="form-group">
4 
5     <textarea class="form-control" rows="3"></textarea>
6 
7   </div>
8 
9 </form>

7、表單控件--復選框和單選按鈕

Bootstrap框架中checkbox和radio有點特殊，Bootstrap針對他們做了一些特殊化處理，主要是checkbox和radio與label標簽配合使用會出現一些小問題（最頭痛的是對齊問題）。使用Bootstrap框架，開發人員無需考慮太多，只需要按照下面的方法使用即可。

 1 <form role="form">
 2 
 3   <h3>案例1</h3>
 4 
 5   <div class="checkbox">
 6 
 7     <label>
 8 
 9       <input type="checkbox" value="">
10 
11       記住密碼
12 
13     </label>
14 
15   </div>
16 
17   <div class="radio">
18 
19     <label>
20 
21       <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
22 
23       喜歡
24 
25     </label>
26 
27   </div>
28 
29     <div class="radio">
30 
31     <label>
32 
33       <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
34 
35       不喜歡
36 
37     </label>
38 
39   </div>
40 
41 </form>

View Code

8、表單控件--復選框和單選按鈕水平排列

有時候，為了布局的需要，將復選框和單選按鈕需要水平排列。Bootstrap框架也做了這方面的考慮：
1、如果checkbox需要水平排列，只需要在label標簽上添加類名“checkbox-inline”
2、如果radio需要水平排列，只需要在label標簽上添加類名“radio-inline”

 1 <form role="form">
 2 
 3   <div class="form-group">
 4 
 5     <label class="checkbox-inline">
 6 
 7       <input type="checkbox"  value="option1">游戲
 8 
 9     </label>
10 
11     <label class="checkbox-inline">
12 
13       <input type="checkbox"  value="option2">攝影
14 
15     </label>
16 
17     <label class="checkbox-inline">
18 
19     <input type="checkbox"  value="option3">旅游
20 
21     </label>
22 
23   </div>
24 
25   <div class="form-group">
26 
27     <label class="radio-inline">
28 
29       <input type="radio"  value="option1" name="sex">男性
30 
31     </label>
32 
33     <label class="radio-inline">
34 
35       <input type="radio"  value="option2" name="sex">女性
36 
37     </label>
38 
39     <label class="radio-inline">
40 
41       <input type="radio"  value="option3" name="sex">中性
42 
43     </label>
44 
45   </div>
46 
47 </form>

View Code

9、表單控件--按鈕

制作按鈕通常使用下面代碼來實現：

☑ input[type=“submit”]

☑ input[type=“button”]

☑ input[type=“reset”]

☑ <button>

在Bootstrap框架中的按鈕都是采用<button>來實現。

 1 <table class="table table-bordered table-striped"> 
 2 
 3     <thead> 
 4 
 5       <tr> 
 6 
 7         <th>Button</th> 
 8 
 9         <th>class=""</th> 
10 
11         <th>Description</th> 
12 
13       </tr> 
14 
15     </thead> 
16 
17     <tbody> 
18 
19       <tr> 
20 
21         <td><button class="btn" href="#">Default</button></td> 
22 
23         <td><code>btn</code></td> 
24 
25         <td>Standard gray button with gradient</td> 
26 
27       </tr> 
28 
29       <tr> 
30 
31         <td><button class="btn btn-primary" href="#">Primary</button></td> 
32 
33         <td><code>btn btn-primary</code></td> 
34 
35         <td>Provides extra visual weight and identifies the primary action in a set of buttons</td> 
36 
37       </tr> 
38 
39       <tr> 
40 
41         <td><button class="btn btn-info" href="#">Info</button></td>
42 
43         <td><code>btn btn-info</code></td> 
44 
45         <td>Used as an alternative to the default styles</td> 
46 
47       </tr> 
48 
49       <tr> 
50 
51         <td><button class="btn btn-success" href="#">Success</button></td> 
52 
53         <td><code>btn btn-success</code></td> 
54 
55         <td>Indicates a successful or positive action</td> 
56 
57       </tr> 
58 
59       <tr> 
60 
61         <td><button class="btn btn-warning" href="#">Warning</button></td> 
62 
63         <td><code>btn btn-warning</code></td> 
64 
65         <td>Indicates caution should be taken with this action</td> 
66 
67       </tr> 
68 
69       <tr> 
70 
71         <td><button class="btn btn-danger" href="#">Danger</button></td> 
72 
73         <td><code>btn btn-danger</code></td> 
74 
75         <td>Indicates a dangerous or potentially negative action</td> 
76 
77       </tr> 
78 
79       <tr> 
80 
81         <td><button class="btn btn-inverse" href="#">Inverse</button></td> 
82 
83         <td><code>btn btn-inverse</code></td> 
84 
85         <td>Alternate dark gray button, not tied to a semantic action or use</td> 
86 
87       </tr> 
88 
89     </tbody> 
90 
91   </table>

View Code

10、表單控件大小

前面看到的表單控件都正常的大小。可以通過設置控件的height，line-height，padding和font-size等屬性來實現控件的高度設置。不過Bootstrap框架還提供了兩個不同的類名，用來控制表單控件的高度。這兩個類名是：
1、input-sm:讓控件比正常大小更小
2、input-lg:讓控件比正常大小更大

這兩個類適用於表單中的input，textarea和select控件。

 1 <form role="form">
 2 
 3   <div class="form-group">
 4 
 5     <label class="control-label">控件變大</label>
 6 
 7     <input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件變大">
 8 
 9   </div>
10 
11   <div class="form-group">
12 
13     <label class="control-label">正常大小</label>
14 
15     <input class="form-control" type="text" placeholder="正常大小">
16 
17   </div> 
18 
19   <div class="form-group">
20 
21     <label class="control-label">控件變小</label>
22 
23     <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件變小">
24 
25   </div>
26 
27 </form>
28 
29   <br>
30 
31   <br>
32 
33   <br>
34 
35  <h1>案例2</h1>
36 
37 <form role="form" class="form-horizontal">
38 
39   <div class="form-group">
40 
41     <div class="col-xs-4">
42 
43       <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
44 
45     </div>
46 
47     <div class="col-xs-4">
48 
49       <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
50 
51     </div>
52 
53     <div class="col-xs-4">
54 
55       <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
56 
57     </div>
58 
59   </div>
60 
61   <div class="form-group">
62 
63     <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>
64 
65     <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>
66 
67    
68 
69   </div> 
70 
71   <div class="form-group">
72 
73     <div class="col-xs-5">
74 
75       <input class="form-control input-sm" type="text" placeholder=".col-xs-5">
76 
77     </div>
78 
79     <div class="col-xs-7">
80 
81       <input class="form-control input-sm" type="text" placeholder=".col-xs-7">
82 
83     </div>
84 
85   </div>
86 
87 </form>

View Code

11、表單控件狀態--焦點狀態

　　表單主要用來與用戶溝通，好的表單就能更好的與用戶進行溝通，而好的表單一定離不開表單的控件狀態。

　　表單狀態的作用：

　　每一種狀態都能給用戶傳遞不同的信息，比如表單有焦點的狀態可以告訴用戶可以輸入或選擇東西，禁用狀態可以告訴用戶不可以輸入或選擇東西，還有就是表單控件驗證狀態，可以告訴用戶的操作是否正確等。那么在Bootstrap框架中的表單控件也具備這些狀態。

　　要讓控件在焦點狀態下有上面樣式效果，需要給控件添加類名“form-control”（鼠標單擊輸入框，使其獲得焦點就可以看到加入藍色邊框效果）

　　在Bootstrap框架中，file、radio和checkbox控件在焦點狀態下的效果也與普通的輸入框控件不太一樣，主要是因為Bootstrap對他們做了一些特殊處理。

1 <div class="col-xs-6">
2 
3       <input class="form-control input-lg" type="text" placeholder="焦點點狀態下效果">
4 
5 </div>

12、表單控件狀態--禁用狀態

　　Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的，在相應的表單控件上添加屬性“disabled”。和其他表單的禁用狀態不同的是，Bootstrap框架做了一些樣式風格的處理。

　　使用方法為：只需要在需要禁用的表單控件上加上“disabled”即可。

　　在使用了“form-control”的表單控件中，樣式設置了禁用表單背景色為灰色，而且手型變成了不准輸入的形狀。如果控件中不使用類名“form-control”，禁用的控件只會有一個不准輸入的手型出來。

1 <div class="col-xs-6">
2 
3       <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表單已被禁用，不可輸入" disabled>
4 
5 </div>

13、表單控件狀態(驗證狀態)

　　在制作表單時，不免要做表單驗證。同樣也需要提供驗證狀態樣式，在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態（黃色）
2、.has-error：錯誤狀態（紅色）
3、.has-success：成功狀態（綠色）
使用的時候只需要在form-group容器上對應添加狀態類名。

很多時候，在表單驗證的時候，不同的狀態會提供不同的 icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應的狀態下顯示 icon 出來，只需要在對應的狀態下添加類名“has-feedback”。請注意，此類名要與“has-error”、“has-warning”和“has-success”在一起。

 1 <form role="form">
 2 
 3   <div class="form-group has-success has-feedback">
 4 
 5     <label class="control-label" for="inputSuccess1">成功狀態</label>
 6 
 7     <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
 8 
 9     <span class="glyphicon glyphicon-ok form-control-feedback"></span>
10 
11   </div>
12 
13   <div class="form-group has-warning has-feedback">
14 
15     <label class="control-label" for="inputWarning1">警告狀態</label>
16 
17     <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態">
18 
19     <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
20 
21   </div>
22 
23   <div class="form-group has-error has-feedback">
24 
25     <label class="control-label" for="inputError1">錯誤狀態</label>
26 
27     <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
28 
29     <span class="glyphicon glyphicon-remove form-control-feedback"></span> 
30 
31   </div>
32 
33 </form>

View Code

14、表單提示信息

（1）平常在制作表單驗證時，要提供不同的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式，將提示信息以塊狀顯示，並且顯示在控件底部。

（2）在Bootstrap V2.x版本中還提供了一個行內提示信息，其使用了類名“help-inline”。一般讓提示信息顯示在控件的后面，也就是同一水平顯示。如果你想在BootstrapV3.x版本也有這樣的效果，你可以添加這段代碼：

1 .help-inline{
2 
3   display:inline-block;
4 
5   padding-left:5px;
6 
7   color: #737373;
8 
9 }

如果你不想為bootstrap.css增加自己的代碼，而且設計又有這種樣的需求，那么只能借助於Bootstrap的網格系統.

 1 <h3>示例1</h3>
 2 
 3 <form role="form">
 4 
 5   <div class="form-group has-success has-feedback">
 6 
 7     <label class="control-label" for="inputSuccess1">成功狀態</label>
 8 
 9     <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
10 
11     <span class="help-block">你輸入的信息是正確的</span>
12 
13     <span class="glyphicon glyphicon-ok form-control-feedback"></span>
14 
15   </div>
16 
17   <div class="form-group has-warning has-feedback">
18 
19     <label class="control-label" for="inputWarning1">警告狀態</label>
20 
21     <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態">
22 
23     <span class="help-block">請輸入正確信息</span>
24 
25     <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
26 
27   </div>
28 
29   <div class="form-group has-error has-feedback">
30 
31     <label class="control-label" for="inputError1">錯誤狀態</label>
32 
33     <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
34 
35    
36 
37     <span class="glyphicon glyphicon-remove form-control-feedback"></span> 
38 
39   </div>
40 
41 </form>   
42 
43 <br>
44 
45 <br>
46 
47 <br>
48 
49 <h3>示例2</h3>
50 
51 <form role="form">
52 
53   <div class="form-group">
54 
55     <label class="control-label" for="inputSuccess1">成功狀態</label>
56 
57     <div class="row">
58 
59       <div class="col-xs-6">
60 
61         <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
62 
63       </div>
64 
65        <span class="col-xs-6 help-block">你輸入的信息是正確的</span>
66 
67     </div>
68 
69   </div>
70 
71 </form>

View Code

15、按鈕

（1）基本按鈕

　　Bootstrap框架V3.x版本的基本按鈕和V2.x版本的基本按鈕一樣，都是通過類名“btn”來實現。不同的是在V3.x版本要簡約很多，去除了V2.x版本中的大量的CSS3中的部分特效，比如說文本陰影（text-shadow）、漸變背景（background-image）、邊框陰影（box-shadow）等。
　　難能可貴的是，Bootstrap框架中的考慮了不同瀏覽器的解析差異，進行了比較安全的兼容性處理，使按鈕效果在不同的瀏覽器中所呈現的效果基本相同。

<button class="btn" type="button">我是一個基本按鈕</button>

（2）默認按鈕

　　Bootstrap框架首先通過基礎類名“.btn”定義了一個基礎的按鈕風格，然后通過“.btn-default”定義了一個默認的按鈕風格。默認按鈕的風格就是在基礎按鈕的風格的基礎上修改了按鈕的背景顏色、邊框顏色和文本顏色。使用默認按鈕風格也非常的簡單，只需要在基礎按鈕“btn”的基礎上增加類名“btn-default”即可。

<button class="btn btn-default" type="button">默認按鈕</button>

（3）多標簽支持

一般制作按鈕除了使用<button>標簽元素之外，還可以使用<input type="submit">和<a>標簽等。同樣，在Bootstrap框架中制作按鈕時，除了剛才所說的這些標簽元素之外，還可以使用在其他的標簽元素上，唯一需要注意的是，要在制作按鈕的標簽元素上添加類名“btn”。如果不添加是不會有任何按鈕效果。

雖然在Bootstrap框架中使用任何標簽元素都可以實現按鈕風格，但個人並不建議這樣使用，為了避免瀏覽器兼容性問題，個人強烈建議使用button或a標簽來制作按鈕。

1 <button class="btn btn-default" type="button">button標簽按鈕</button>
2 
3 <input type="submit" class="btn btn-default" value="input標簽按鈕"/>
4 
5 <span class="btn btn-default">span標簽按鈕</span> 
6 
7 <div class="btn btn-default">div標簽按鈕</div>

（4）定制風格

在介紹按鈕開篇就說過，Web頁面可能會有不同的按鈕風格。那么在Bootstrap框架也考慮了。在Bootstrap框架中除了默認的按鈕風格之外，還有其他六種按鈕風格，每種風格的其實都一樣，不同之處就是按鈕的背景顏色、邊框顏色和文本顏色。

在Bootstrap框架中不同的按鈕風格都是通過不同的類名來實現，在使用過程中，開發者只需要選擇不同的類名即可：

使用起來就很簡單，就像前面介紹的默認按鈕一樣的使用方法，只需要在基礎按鈕“.btn”基礎上追加對應的類名，就可以得到需要的按鈕風格。

 1 <body>
 2 
 3    <button class="btn" type="button">基礎按鈕.btn</button> 
 4 
 5    <button class="btn btn-default" type="button">默認按鈕.btn-default</button>
 6 
 7    <button class="btn btn-primary" type="button">主要按鈕.btn-primary</button>
 8 
 9    <button class="btn btn-success" type="button">成功按鈕.btn-success</button>
10 
11    <button class="btn btn-warning" type="button">警告按鈕.btn-warning</button>
12 
13    <button class="btn btn-danger" type="button">危險按鈕.btn-danger</button>
14 
15    <button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>
16 
17 </body>

View Code

（5）按鈕大小

上一節介紹了按鈕的定制風格，也就是如何實現Web頁面中多種風格按鈕。在Bootstrap框架中，對於按鈕的大小，也是可以定制的。類似於input一樣，通過在基礎按鈕“.btn”的基礎上追加類名來控制按鈕的大小。

在Bootstrap框架中提供了三個類名來控制按鈕大小：

從上表中不難發現，在Bootstrap框架中控制按鈕的大小都是通過修改按鈕的padding、line-height、font-size和border-radius幾個屬性。

那么在實際使用中，這幾個類名可以配合按鈕中其他顏色類名一起使用，但唯一一點不能缺少“.btn”類名

1 <body>
2 
3     <button class="btn btn-primary btn-lg" type="button">大型按鈕.btn-lg</button>
4 
5     <button class="btn btn-primary" type="button">正常按鈕</button>
6 
7 <button class="btn btn-primary btn-sm" type="button">小型按鈕.btn-sm</button>
8 
9 </body>

（6）按鈕狀態——禁用狀態

和input等表單控件一樣，在Bootstrap框架的按鈕中也具有禁用狀態的設置。禁用狀態與其他狀態按鈕相比，就是背景顏色的透明度做了一定的處理，opcity的值從100%調整為65%。

在Bootstrap框架中，要禁用按鈕有兩種實現方式：

方法1：在標簽中添加disabled屬性

方法2：在元素標簽中添加類名“disabled”

兩者的主要區別是：

“.disabled”樣式不會禁止按鈕的默認行為，比如說提交和重置行為等。如果想要讓這樣的禁用按鈕也能禁止按鈕的默認行為，則需要通過JavaScript這樣的語言來處理。對於<a>標簽也存在類似問題，如果通過類名“.disable”來禁用按鈕，其鏈接行為是無法禁止。而在元素標簽中添加“disabled”屬性的方法是可以禁止元素的默認行為的。

1 <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通過disabled屬性禁用按鈕</button>
2 
3 <button class="btn btn-primary btn-block disabled" type="button">通過添加類名disabled禁用按鈕</button>
4 
5 <button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按鈕</button>

16、圖像

圖像在網頁制作中也是常要用到的元素，在Bootstrap框架中對於圖像的樣式風格提供以下幾種風格：

1、img-responsive：響應式圖片，主要針對於響應式設計
2、img-rounded：圓角圖片
3、img-circle：圓形圖片
4、img-thumbnail：縮略圖片

使用方法：

使用方法非常簡單，只需要在<img>標簽上添加對應的類名

設置圖片大小：

由於樣式沒有對圖片做大小上的樣式限制，所以在實際使用的時候，需要通過其他的方式來處理圖片大小。比如說控制圖片容器大小。（注意不可以通過css樣式直接修改img圖片的大小，這樣操作就不響應了）

 1 <div class="container">
 2 
 3   <div class="row">
 4 
 5     <div class="col-sm-4">
 6 
 7       <img   alt="140x140" src="http://placehold.it/140x140">
 8 
 9         <div>默認圖片</div>
10 
11     </div>
12 
13     <div class="col-sm-4">
14 
15       <img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
16 
17         <div>圓角圖片</div>
18 
19     </div>
20 
21     <div class="col-sm-4">
22 
23       <img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
24 
25         <div>圓形圖片</div>
26 
27     </div>
28 
29       <div class="row">
30 
31         <div class="col-sm-6">
32 
33           <img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
34 
35             <div>縮略圖</div>
36 
37         </div>
38 
39         <div class="col-sm-6">
40 
41           <img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140" />
42 
43           <div>響應式圖片</div>
44 
45         </div>
46 
47       </div>
48 
49   </div>
50 
51 </div>

View Code

17、圖標

這里說的圖標就是Web制作中常看到的小icon圖標，可以說這些小icon圖標是一個優秀Web中不可缺少的一部分，起到畫龍點睛的效果。

在網頁中使用圖標也非常的簡單，在任何內聯元素上應用所對應的樣式即可（以”glyphicon”前綴的類名開始，然后后綴表示圖標的名稱。）

1 <span class="glyphicon glyphicon-search"></span>
2 
3 <span class="glyphicon glyphicon-asterisk"></span>
4 
5 <span class="glyphicon glyphicon-plus"></span>
6 
7 <span class="glyphicon glyphicon-cloud"></span>

四、網格系統

1、實現原理

　　網格系統的實現原理非常簡單，僅僅是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調整內外邊距，最后結合媒體查詢，就制作出了強大的響應式網格系統。Bootstrap框架中的網格系統就是將容器平分成12份。

　　在使用的時候大家可以根據實際情況重新編譯LESS（或Sass）源碼來修改12這個數值（也就是換成24或32，當然你也可以分成更多，但不建議這樣使用）。

 1 <div class="container">
 2 
 3   <div class="row">
 4 
 5     <div class="col-md-1">.col-md-1</div>
 6 
 7     <div class="col-md-1">.col-md-1</div>
 8 
 9     <div class="col-md-1">.col-md-1</div>
10 
11     <div class="col-md-1">.col-md-1</div>
12 
13     <div class="col-md-1">.col-md-1</div>
14 
15     <div class="col-md-1">.col-md-1</div>
16 
17     <div class="col-md-1">.col-md-1</div>
18 
19     <div class="col-md-1">.col-md-1</div>
20 
21     <div class="col-md-1">.col-md-1</div>
22 
23     <div class="col-md-1">.col-md-1</div>
24 
25     <div class="col-md-1">.col-md-1</div>
26 
27     <div class="col-md-1">.col-md-1</div>
28 
29   </div>
30 
31   <div class="row">
32 
33     <div class="col-md-1">.col-md-1</div>
34 
35     <div class="col-md-1">.col-md-1</div>
36 
37     <div class="col-md-1">.col-md-1</div>
38 
39     <div class="col-md-1">.col-md-1</div>
40 
41     <div class="col-md-1">.col-md-1</div>
42 
43     <div class="col-md-1">.col-md-1</div>
44 
45     <div class="col-md-1">.col-md-1</div>
46 
47     <div class="col-md-1">.col-md-1</div>
48 
49     <div class="col-md-1">.col-md-1</div>
50 
51     <div class="col-md-1">.col-md-1</div>
52 
53     <div class="col-md-1">.col-md-1</div>
54 
55     <div class="col-md-1">.col-md-1</div>
56 
57   </div>
58 
59     <div class="row">
60 
61     <div class="col-md-1">.col-md-1</div>
62 
63     <div class="col-md-1">.col-md-1</div>
64 
65     <div class="col-md-1">.col-md-1</div>
66 
67     <div class="col-md-1">.col-md-1</div>
68 
69     <div class="col-md-1">.col-md-1</div>
70 
71     <div class="col-md-1">.col-md-1</div>
72 
73     <div class="col-md-1">.col-md-1</div>
74 
75     <div class="col-md-1">.col-md-1</div>
76 
77     <div class="col-md-1">.col-md-1</div>
78 
79     <div class="col-md-1">.col-md-1</div>
80 
81     <div class="col-md-1">.col-md-1</div>
82 
83     <div class="col-md-1">.col-md-1</div>
84 
85   </div>
86 
87 </div>

View Code

2、工作原理

Bootstrap框架的網格系統工作原理如下：

1、數據行(.row)必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內距(padding)。如：

<div class="container">

<div class="row"></div>

</div>

2、在行(.row)中可以添加列(.column)，但列數之和不能超過平分的總列數，比如12。如：

<div class="container">

<div class="row">

  <div class="col-md-4"></div>

  <div class="col-md-8"></div>

</div>

</div>

3、具體內容應當放置在列容器（column）之內，而且只有列（column）才可以作為行容器(.row)的直接子元素

4、通過設置內距（padding）從而創建列與列之間的間距。然后通過為第一列和最后一列設置負值的外距（margin）來抵消內距(padding)的影響

為了更好的理解Bootstrap框架的網格系統工作原理，我們來看一張草圖：

簡單對圖解釋一下：

1、最外邊框，帶有一大片白色區域，就是相當於瀏覽器的可視區域。在Bootstrap框架的網格系統中帶有響應式效果，其帶有四種類型的瀏覽器（超小屏，小屏，中屏和大屏），其斷點（像素的分界點）是768px、992px和1220px。

2、第二個邊框(1)相當於容器(.container)。針對不同的瀏覽器分辨率，其寬度也不一樣：自動、750px、970px和1170px。

3、２號橫條闡述的是，將容器的行（.row）平分了12等份，也就是列。每個列都有一個“padding-left:15px”(圖中粉紅色部分)和一個“padding-right:15px”(圖中紫色部分)。這樣也導致了第一個列的padding-left和最后一列的padding-right共占據了總寬度的30px，從而致使頁面不美觀，當然，如果你需要留有一定的間距，這個做法是不錯的。如bootstrap.css中第767行~第772行所示：

1 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
2   position: relative;
3   min-height: 1px;
4   padding-right: 15px;
5   padding-left: 15px;
6 ｝

4、３號橫條就是行容器(.row),其定義了“margin-left”和”margin-right”值為”-15px”，用來抵消第一個列的左內距和最后一列的右內距。在bootstrap.css的第763行~第767行可以看到：

.row {

  margin-right: -15px;

  margin-left: -15px;

}

5、將行與列給合在一起就能看到橫條4的效果。也就是我們期望看到的效果，第一列和最后一列與容器（.container）之間沒有間距。

6、橫條５只是想向大家展示，你可以根據需要，任意組合列與列，只是他們的組合數之和不要超過總列數。

 1 <div class="container">
 2 
 3   <div class="row">
 4 
 5     <div class="col-md-4">.col-md-4</div>
 6 
 7     <div class="col-md-8">.col-md-8</div>
 8 
 9   </div>
10 
11   <div class="row">
12 
13     <div class="col-md-4">.col-md-4</div>
14 
15     <div class="col-md-4">.col-md-4</div>
16 
17     <div class="col-md-4">.col-md-4</div>
18 
19   </div>
20 
21   <div class="row">
22 
23     <div class="col-md-3">.col-md-3</div>
24 
25     <div class="col-md-6">.col-md-6</div>
26 
27     <div class="col-md-3">.col-md-3</div>
28 
29   </div>
30 
31 </div>

View Code

3、基本用法

網格系統用來布局，其實就是列的組合。Bootstrap框架的網格系統中有四種基本的用法。由於Bootstrap框架在不同屏幕尺寸使用了不同的網格樣式，在這一節中所涉及到的示例，我們都以中屏（970px）為例進行介紹，其他屏幕的使用也類似這一種。關於屏幕尺寸如下圖：

（1）列組合

列組合簡單理解就是更改數字來合並列（原則：列總和數不能超12），有點類似於表格的colspan屬性，例如：

 1 <div class="container">
 2 
 3   <div class="row">
 4 
 5     <div class="col-md-4">.col-md-4</div>
 6 
 7     <div class="col-md-8">.col-md-8</div>
 8 
 9   </div>
10 
11   <div class="row">
12 
13     <div class="col-md-4">.col-md-4</div>
14 
15     <div class="col-md-4">.col-md-4</div>
16 
17     <div class="col-md-4">.col-md-4</div>
18 
19   </div>
20 
21   <div class="row">
22 
23     <div class="col-md-3">.col-md-3</div>
24 
25     <div class="col-md-6">.col-md-6</div>
26 
27     <div class="col-md-3">.col-md-3</div>
28 
29  </div>
30 
31 </div>

View Code

使用上面的結構，你將看到下圖的效果：

實現列組合方式非常簡單，只涉及兩個CSS兩個特性：浮動與寬度百分比。在bootstrap.css文件的第1088行～1126行：

/*確保所有列左浮動*/

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {

    float: left;

 }

/*定義每個列組合的寬度（使用的百分比）*/

 .col-md-12 {

    width: 100%;

  }

  .col-md-11 {

    width: 91.66666667%;

  }

  .col-md-10 {

    width: 83.33333333%;

  }

  .col-md-9 {

    width: 75%;

  }

  .col-md-8 {

    width: 66.66666667%;

  }

  .col-md-7 {

    width: 58.33333333%;

  }

  .col-md-6 {

    width: 50%;

  }

  .col-md-5 {

    width: 41.66666667%;

  }

  .col-md-4 {

    width: 33.33333333%;

  }

  .col-md-3 {

    width: 25%;

  }

  .col-md-2 {

    width: 16.66666667%;

  }

  .col-md-1 {

    width: 8.33333333%;

  }

（2）列偏移

有的時候，我們不希望相鄰的兩個列緊靠在一起，但又不想使用margin或者其他的技術手段來。這個時候就可以使用列偏移（offset）功能來實現。使用列偏移也非常簡單，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數)，那么具有這個類名的列就會向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示該列向右移動4個列的寬度。

 1 <div class="container">
 2 
 3 <div class="row">
 4 
 5 <div class="col-md-4">.col-md-4</div>
 6 
 7 <div class="col-md-2 col-md-offset-4">列向右移動四列的間距</div>
 8 
 9 <div class="col-md-2">.col-md-3</div>
10 
11 </div>
12 
13 <div class="row">
14 
15 <div class="col-md-4">.col-md-4</div>
16 
17 <div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div>
18 
19 </div>
20 
21 </div>

View Code

如上面的示例代碼，得到的效果如下或在最右側結果窗口中可以看到(鼠標移到結果窗口，單擊出現的全屏按鈕):

不過有一個細節需要注意，使用”col-md-offset-*”對列進行向右偏移時，要保證列與偏移列的總數不超過12，不然會致列斷行顯示。

（3）列排序

列排序其實就是改變列的方向，就是改變左右浮動，並且設置浮動的距離。在Bootstrap框架的網格系統中是通過添加類名“col-md-push-*”和“col-md-pull-*” (其中星號代表移動的列組合數)。

我們來看一個簡單的示例：

 1 <div class="container">
 2 
 3   <div class="row">
 4 
 5     <div class="col-md-4">.col-md-4</div>
 6 
 7     <div class="col-md-8">.col-md-8</div>
 8 
 9   </div>
10 
11 </div>

默認情況之下，上面的代碼效果如下：

“col-md-4”居左，“col-md-8”居右，如果要互換位置，需要將“col-md-4”向右移動８個列的距離,也就是在“<div class=“col-md-4”>”添加類名“col-md-push-8”，調用其樣式。

也要將“col-md-8”向左移動４個列的距離，在“<div class=”col-md-8”>”上添加類名“col-md-pull-4”：

Bootstrap僅通過設置left和right來實現定位效果。

（4）列的嵌套

Bootstrap框架的網格系統還支持列的嵌套。你可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時，就是當前外部列的寬度。

 1 <div class="container">
 2 
 3   <div class="row">
 4 
 5     <div class="col-md-8">
 6 
 7       我的里面嵌套了一個網格
 8 
 9       <div class="row">
10 
11         <div class="col-md-6">col-md-6</div>
12 
13         <div class="col-md-6">col-md-6</div>
14 
15       </div>
16 
17     </div>
18 
19     <div class="col-md-4">col-md-4</div>
20 
21   </div>
22 
23   <div class="row">
24 
25     <div class="col-md-4">.col-md-4</div>
26 
27     <div class="col-md-8">
28 
29       我的里面嵌套了一個網格
30 
31       <div class="row">
32 
33         <div class="col-md-4">col-md-4</div>
34 
35         <div class="col-md-4">col-md-4</div>
36 
37         <div class="col-md-4">col-md-4</div>
38 
39       </div>
40 
41     </div>
42 
43   </div>
44 
45 </div>

View Code

五、下拉菜單

1、下拉菜單（基本用法）

小伙伴們注意，在Bootstrap框架中的下拉菜單組件是一個獨立的組件。

在使用Bootstrap框架的下拉菜單時，必須調用Bootstrap框架提供的bootstrap.js文件。

因為Bootstrap的組件交互效果都是依賴於jQuery庫寫的插件，所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會生效果。

 1 <html>
 2 
 3 <head>
 4 
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 
 7 <title>下拉菜單</title>
 8 
 9 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
10 
11 <link rel="stylesheet" href="style.css">
12 
13 </head>
14 
15 <body>
16 
17  <div class="dropdown">
18 
19   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
20 
21     下拉菜單
22 
23     <span class="caret"></span>
24 
25   </button>
26 
27   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
28 
29     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
30 
31     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
32 
33     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
34 
35     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
36 
37   </ul>
38 
39 </div>
40 
41   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
42 
43   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
44 
45 </body>
46 
47 </html>

2、下拉菜單（原理分析）

Bootstrap框架中的下拉菜單組件，其下拉菜單項默認是隱藏的，如下所示：

因為“dropdown-menu”默認樣式設置了“display:none”.

當用戶點擊父菜單項時，下拉菜單將會被顯示出來，當用戶再次點擊時，下拉菜單將繼續隱藏。

原理分析：

現在我們來分析一下實現原理，非常簡單，通過js技術手段，給父容器“div.dropdown”添加或移除類名“open”來控制下拉菜單顯示或隱藏。也就是說，默認情況，“div.dropdown”沒有類名“open”，當用戶第一次點擊時，“div.dropdown”會添加類名“open”；當用戶再次點擊時，“div.dropdown”容器中的類名“open”又會被移除。

3、下拉菜單（下拉分隔線）

在Bootstrap框架中的下拉菜單還提供了下拉分隔線，假設下拉菜單有兩個組，那么組與組之間可以通過添加一個空的<li>，並且給這個<li>添加類名“divider”來實現添加下拉分隔線的功能。

 1 <div class="dropdown">
 2 
 3   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 4 
 5     下拉菜單
 6 
 7     <span class="caret"></span>
 8 
 9   </button>
10 
11   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
12 
13     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
14 
15     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
16 
17     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
18 
19     <li role="presentation" class="divider"></li>
20 
21     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
22 
23   </ul>
24 
25 </div>
26 
27   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
28 
29   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

4、下拉菜單（菜單標題）

上一小節講解通過添加“divider”可以將下拉菜單分組，為了讓這個分組更明顯，還可以給每個組添加一個頭部（標題）

 1 <div class="dropdown">
 2 
 3   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 4 
 5     下拉菜單
 6 
 7     <span class="caret"></span>
 8 
 9   </button>
10 
11   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
12 
13     <li role="presentation" class="dropdown-header">第一部分菜單頭部</li>
14 
15     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
16 
17     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
18 
19     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
20 
21     <li role="presentation" class="divider"></li>
22 
23     <li role="presentation" class="dropdown-header">第二部分菜單頭部</li>
24 
25     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
26 
27     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
28 
29     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
30 
31   </ul>
32 
33 </div>
34 
35   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
36 
37   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

5、下拉菜單（對齊方式）

實現右對齊方法：

Bootstrap框架中下拉菜單默認是左對齊，如果你想讓下拉菜單相對於父容器右對齊時，可以在“dropdown-menu”上添加一個“pull-right”或者“dropdown-menu-right”類名

下拉菜單與父容器左邊對齊:

與此同時，還有一個類名剛好與“dropdown-menu-right”相反的類名“dropdown-menu-left”，其效果就是讓下拉菜單與父容器左邊對齊，其實就是默認效果。

 1 <h4>使用pull-right類使下拉菜單與父容器右邊對齊</h4>
 2 
 3  <div class="dropdown">
 4 
 5   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 6 
 7     下拉菜單
 8 
 9     <span class="caret"></span>
10 
11   </button>
12 
13   <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
14 
15     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
16 
17     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
18 
19     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
20 
21     <li role="presentation" class="divider"></li>
22 
23     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
24 
25   </ul>
26 
27 </div>
28 
29 <br />
30 
31 <br />
32 
33 <h4>使用dropdown-menu-right類使下拉菜單與父容器右邊對齊</h4>
34 
35 <div class="dropdown">
36 
37   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
38 
39     下拉菜單
40 
41     <span class="caret"></span>
42 
43   </button>
44 
45   <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
46 
47     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
48 
49     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
50 
51     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
52 
53     <li role="presentation" class="divider"></li>
54 
55     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
56 
57   </ul>
58 
59 </div>
60 
61 <br />
62 
63 <br />
64 
65 <h4>下拉菜單與父容器左邊對齊</h4>
66 
67 <div class="dropdown">
68 
69   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
70 
71     下拉菜單
72 
73     <span class="caret"></span>
74 
75   </button>
76 
77   <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1">
78 
79     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
80 
81     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
82 
83     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
84 
85     <li role="presentation" class="divider"></li>
86 
87     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
88 
89   </ul>
90 
91 </div>
92 
93   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
94 
95   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

6、下拉菜單（菜單項狀態）

下拉菜單項的默認的狀態（不用設置）有懸浮狀態（:hover）和焦點狀態（:focus）。

下拉菜單項除了上面兩種狀態，還有當前狀態（.active）和禁用狀態（.disabled）。這兩種狀態使用方法只需要在對應的菜單項上添加對應的類名。

 1 <div class="dropdown">
 2 
 3   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 4 
 5     下拉菜單
 6 
 7     <span class="caret"></span>
 8 
 9   </button>
10 
11   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
12 
13     <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
14 
15     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
16 
17     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
18 
19     <li role="presentation" class="divider"></li>
20 
21     <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
22 
23   </ul>
24 
25 </div>
26 
27   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
28 
29   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

7、按鈕（按鈕組）

單個按鈕在Web頁面中的運用有時候並不能滿足我們的業務需求，常常會看到將多個按鈕組合在一起使用，比如富文本編輯器里的一組小圖標按鈕等。

使用方法：

按鈕組和下拉菜單組件一樣，需要依賴於button.js插件才能正常運行。不過我們同樣可以直接只調用bootstrap.js文件。因為這個文件已集成了button.js插件功能。

對於結構方面，非常的簡單。使用一個名為“btn-group”的容器，把多個按鈕放到這個容器中。

除了可以使用<button>元素之外，還可以使用其他標簽元素，比如<a>標簽。唯一要保證的是：不管使用什么標簽，“.btn-group”容器里的標簽元素需要帶有類名“.btn”。

 1 <div class="btn-group">
 2 
 3     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
 4 
 5     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
 6 
 7     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
 8 
 9     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
10 
11     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
12 
13     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
14 
15     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
16 
17     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
18 
19     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
20 
21 </div>
22 
23   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

8、按鈕（按鈕工具欄）

在富文本編輯器中，將按鈕組分組排列在一起，比如說復制、剪切和粘貼一組；左對齊、中間對齊、右對齊和兩端對齊一組。

那么Bootstrap框架按鈕工具欄也提供了這樣的制作方法，你只需要將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中。

按鈕組大小設置

在介紹按鈕一節中，我們知道按鈕是通過btn-lg、btn-sm和btn-xs三個類名來調整padding、font-size、line-height和border-radius屬性值來改變按鈕大小。那么按鈕組的大小，我們也可以通過類似的方法：

☑ .btn-group-lg:大按鈕組

☑ .btn-group-sm:小按鈕組

☑ .btn-group-xs:超小按鈕組

只需要在“.btn-group”類名上追加對應的類名，就可以得到不同大小的按鈕組。

 1 <div class="btn-toolbar">
 2 
 3   <div class="btn-group">
 4 
 5     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
 6 
 7     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
 8 
 9     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
10 
11     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
12 
13   </div>
14 
15   <div class="btn-group">
16 
17     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
18 
19     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
20 
21   </div>
22 
23   <div class="btn-group">
24 
25     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
26 
27     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
28 
29     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
30 
31   </div>
32 
33   <div class="btn-group">
34 
35     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
36 
37     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
38 
39   </div>
40 
41 </div>
42 
43 <br />
44 
45 <br />
46 
47 <div class="btn-toolbar">
48 
49   <div class="btn-group btn-group-lg">
50 
51     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
52 
53     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
54 
55     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
56 
57     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
58 
59   </div>
60 
61   <div class="btn-group">
62 
63     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
64 
65     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
66 
67   </div>
68 
69   <div class="btn-group btn-group-sm">
70 
71     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
72 
73     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
74 
75     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
76 
77   </div>
78 
79   <div class="btn-group btn-group-xs">
80 
81     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
82 
83     <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
84 
85   </div>
86 
87 </div>
88 
89   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
90 
91   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

9、按鈕（嵌套分組）

很多時候，我們常把下拉菜單和普通的按鈕組排列在一起，實現類似於導航菜單的效果。

使用的時候，只需要把當初制作下拉菜單的“dropdown”的容器換成“btn-group”，並且和普通的按鈕放在同一級。

 1 <div class="btn-group">
 2 
 3   <button class="btn btn-default" type="button">首頁</button>
 4 
 5   <button class="btn btn-default" type="button">產品展示</button>
 6 
 7   <button class="btn btn-default" type="button">案例分析</button>
 8 
 9   <button class="btn btn-default" type="button">聯系我們</button>
10 
11   <div class="btn-group">
12 
13       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關於我們<span class="caret"></span></button>
14 
15     <ul class="dropdown-menu">
16 
17           <li><a href="##">公司簡介</a></li>
18 
19           <li><a href="##">企業文化</a></li>
20 
21           <li><a href="##">組織結構</a></li>
22 
23           <li><a href="##">客服服務</a></li>
24 
25     </ul>
26 
27   </div>
28 
29 </div>
30 
31   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
32 
33   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

10、按鈕（垂直分組）

前面看到的示例，按鈕組都是水平顯示的。但在實際運用當中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可。

 1 <div class="btn-group-vertical">
 2 
 3   <button class="btn btn-default" type="button">首頁</button>
 4 
 5   <button class="btn btn-default" type="button">產品展示</button>
 6 
 7   <button class="btn btn-default" type="button">案例分析</button>
 8 
 9   <button class="btn btn-default" type="button">聯系我們</button>
10 
11   <div class="btn-group">
12 
13       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關於我們<span class="caret"></span></button>
14 
15     <ul class="dropdown-menu">
16 
17           <li><a href="##">公司簡介</a></li>
18 
19           <li><a href="##">企業文化</a></li>
20 
21           <li><a href="##">組織結構</a></li>
22 
23           <li><a href="##">客服服務</a></li>
24 
25     </ul>
26 
27   </div>
28 
29 </div>
30 
31   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
32 
33   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

11、按鈕（等分按鈕）

等分按鈕的效果在移動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組里面的每個按鈕平分整個容器寬度。例如，如果你按鈕組里面有五個按鈕，那么每個按鈕是20%的寬度，如果有四個按鈕，那么每個按鈕是25%寬度，以此類推。

等分按鈕也常被稱為是自適應分組按鈕，其實現方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名。

 1 <div class="btn-group btn-group-justified">
 2 
 3     <a class="btn btn-default" href="#">首頁</a>
 4 
 5     <a class="btn btn-default" href="#">產品展示</a>
 6 
 7     <a class="btn btn-default" href="#">案例分析</a>
 8 
 9     <a class="btn btn-default" href="#">聯系我們</a>
10 
11   </div>
12 
13   <script src="http://img.mukewang.com/down/53c6484f00013d9300000000.js"></script>
14 
15   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

12、按鈕的向下向上三角形

按鈕的向下三角形，我們是通過在<button>標簽中添加一個“<span>”標簽元素，並且命名為“caret”:

有的時候我們的下拉菜單會向上彈起（接下來一個小節會介紹），這個時候我們的三角方向需要朝上顯示，實現方法：需要在“.btn-group”類上追加“dropup”類名。

 1 <div class="btn-group dropup">
 2 
 3     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>
 4 
 5     <ul class="dropdown-menu">
 6 
 7         <li><a href="##">按鈕下拉菜單項</a></li>
 8 
 9           <li><a href="##">按鈕下拉菜單項</a></li>
10 
11           <li><a href="##">按鈕下拉菜單項</a></li>
12 
13           <li><a href="##">按鈕下拉菜單項</a></li>
14 
15     </ul>
16 
17 </div>
18 
19   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
20 
21   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

13、導航（基礎樣式）

導航對於一位前端人員來說並不陌生。可以說導航是一個網站重要的元素組件之一，可以便於用戶查找網站所提供的各項功能服務。導航的制作方法也是千奇百怪，五花八門。在這一節中將向大家介紹如何使用Bootstrap框架制作各式各樣的導航。

在Bootstrap框架將導航獨立出來成為一個導航組件。

導航基礎樣式

Bootstrap框架中制作導航條主要通過“.nav”樣式。默認的“.nav”樣式不提供默認的導航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類。比如右側代碼編輯器中就有一個tab導航條的例子，他的實現方法就是為ul標簽加入.nav和nav-tabs兩個類樣式。

<ul class="nav nav-tabs">

    <li><a href="##">Home</a></li>

    <li><a href="##">CSS3</a></li>

      <li><a href="##">Sass</a></li>

      <li><a href="##">jQuery</a></li>

      <li><a href="##">Responsive</a></li>

</ul>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

14、導航（標簽形tab導航）

標簽形導航，也稱為選項卡導航。特別是在很多內容分塊顯示的時，使用這種選項卡來分組十分適合。

標簽形導航是通過“nav-tabs”樣式來實現。在制作標簽形導航時需要在原導航“nav”上追加此類名。

實現原理非常的簡單，將菜單項（li）按塊顯示，並且讓他們在同一水平上排列，然后定義非高亮菜單的樣式和鼠標懸浮效果。

其實上例的效果和我們平時看到的選項卡效果並不一致。一般情況之下，選項卡教會有一個當前選中項。其實在Bootstrap框架也相應提供了。假設我們想讓“Home”項為當前選中項，只需要在其標簽上添加類名“class="active"”即可。

除了當前項之外，有的選項卡還帶有禁用狀態，實現這樣的效果，只需要在標簽項上添加“class="disabled"”即可。

 1 <ul class="nav nav-tabs">
 2 
 3     <li><a href="##">Home</a></li>
 4 
 5       <li><a href="##">CSS3</a></li>
 6 
 7       <li><a href="##">Sass</a></li>
 8 
 9       <li><a href="##">jQuery</a></li>
10 
11       <li><a href="##">Responsive</a></li>
12 
13 </ul>
14 
15 <br />
16 
17 <ul class="nav nav-tabs">
18 
19     <li class="active"><a href="##">Home</a></li>
20 
21       <li><a href="##">CSS3</a></li>
22 
23       <li><a href="##">Sass</a></li>
24 
25       <li><a href="##">jQuery</a></li>
26 
27       <li><a href="##">Responsive</a></li>
28 
29 </ul>
30 
31 <br />
32 
33  <ul class="nav nav-tabs">
34 
35     <li class="active"><a href="##">Home</a></li>
36 
37       <li><a href="##">CSS3</a></li>
38 
39       <li><a href="##">Sass</a></li>
40 
41       <li><a href="##">jQuery</a></li>
42 
43       <li class="disabled"><a href="##">Responsive</a></li>
44 
45  </ul>
46 
47   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
48 
49   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

15、導航（膠囊形pills導航）

膠囊形（pills）導航聽起來有點別扭，因為其外形看起來有點像膠囊形狀。但其更像我們平時看到的大眾形導航。當前項高亮顯示，並帶有圓角效果。其實現方法和“nav-tabs”類似，同樣的結構，只需要把類名“nav-tabs”換成“nav-pills”即可。

 1 <ul class="nav nav-pills">
 2 
 3     <li class="active"><a href="##">Home</a></li>
 4 
 5       <li><a href="##">CSS3</a></li>
 6 
 7       <li><a href="##">Sass</a></li>
 8 
 9       <li><a href="##">jQuery</a></li>
10 
11       <li class="disabled"><a href="##">Responsive</a></li>
12 
13 </ul>
14 
15 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
16 
17 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

16、導航（垂直堆疊的導航）

在實際運用當中，除了水平導航之外，還有垂直導航，就類似前面介紹的垂直排列按鈕一樣。制作垂直堆疊導航只需要在“nav-pills”的基礎上添加一個“nav-stacked”類名即可。

在下拉菜單一節中，下拉菜單組與組之間有一個分隔線。其實在垂直堆疊導航也具有這樣的效果，只需要添加在導航項之間添加“<li class=”nav-divider”></li>”即可。

 1 <ul class="nav nav-pills nav-stacked">
 2 
 3      <li class="active"><a href="##">Home</a></li>
 4 
 5       <li><a href="##">CSS3</a></li>
 6 
 7       <li><a href="##">Sass</a></li>
 8 
 9       <li><a href="##">jQuery</a></li>
10 
11       <li class="disabled"><a href="##">Responsive</a></li>
12 
13  </ul>
14 
15  <br />
16 
17 <ul class="nav nav-pills nav-stacked">
18 
19     <li class="active"><a href="##">Home</a></li>
20 
21       <li><a href="##">CSS3</a></li>
22 
23       <li><a href="##">Sass</a></li>
24 
25       <li><a href="##">jQuery</a></li>
26 
27     <li class="nav-divider"></li>
28 
29       <li class="disabled"><a href="##">Responsive</a></li>
30 
31 </ul>
32 
33   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
34 
35   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

17、自適應導航（使用）

自適應導航指的是導航占據容器全部寬度，而且菜單項可以像表格的單元格一樣自適應寬度。自適應導航和前面使用“btn-group-justified”制作的自適應按鈕組是一樣的。只不過在制作自適應導航時更換了另一個類名“nav-justified”。當然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。

 1 <ul class="nav nav-tabs nav-justified">
 2 
 3   <li class="active"><a href="##">Home</a></li>
 4 
 5   <li><a href="##">CSS3</a></li>
 6 
 7   <li><a href="##">Sass</a></li>
 8 
 9   <li><a href="##">jQuery</a></li>
10 
11   <li><a href="##">Responsive</a></li>
12 
13 </ul>
14 
15 <br />
16 
17 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
18 
19 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

18、導航加下拉菜單（二級導航）

前面介紹的都是使用Bootstrap框架制作一級導航，但很多時候，在Web頁面中是離不開二級導航的效果。那么在Bootstrap框架中制作二級導航就更容易了。只需要將li當作父容器，使用類名“dropdown”，同時在li中嵌套另一個列表ul，使用前面介紹下拉菜單的方法即可。

 1 <ul class="nav nav-pills">
 2 
 3   <li class="active"><a href="##">首頁</a></li>
 4 
 5   <li class="dropdown">
 6 
 7       <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
 8 
 9       <ul class="dropdown-menu">
10 
11         <li><a href="##">CSS3</a></li>
12 
13         <li><a href="##">Sass</a></li>
14 
15         <li><a href="##">jQuery</a></li>
16 
17         <li><a href="##">Responsive</a></li>
18 
19       </ul>
20 
21   </li>
22 
23  <li><a href="##">關於我們</a></li>
24 
25 </ul>
26 
27 <br />
28 
29 <script src="http://img.mukewang.com/down/53c6484f00013d9300000000.js"></script>
30 
31 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

19、面包屑式導航

面包屑(Breadcrumb)一般用於導航，主要是起的作用是告訴用戶現在所處頁面的位置（當前位置）。在Bootstrap框架中面包屑也是一個獨立模塊組件：

使用方法：

使用方式就很簡單，為ol加入breadcrumb類。

 1 <ol class="breadcrumb">
 2 
 3   <li><a href="#">首頁</a></li>
 4 
 5   <li><a href="#">我的書</a></li>
 6 
 7   <li class="active">《圖解CSS3》</li>
 8 
 9 </ol>
10 
11 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
12 
13 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

六、導航條、分頁導航

1、基礎導航條

在Bootstrap框中，導航條和導航從外觀上差別不是太多，但在實際使用中導航條要比導航復雜得多。我們先來看導航條中最基礎的一個——基礎導航條。

使用方法：

在制作一個基礎導航條時，主要分以下幾步：

第一步：首先在制作導航的列表(<ul class=”nav”>)基礎上添加類名“navbar-nav”

第二步：在列表外部添加一個容器（div），並且使用類名“navbar”和“navbar-default”。

　　“.navbar”樣式的主要功能就是設置左右padding和圓角等效果，但他和顏色相關的樣式沒有進行任何的設置。

　　而導航條的顏色都是通過“.navbar-default”來進行控制。

　　navbar-nav樣式是在導航.nav的基礎上重新調整了菜單項的浮動與內外邊距。同時也不包括顏色等樣式設置，源碼請查看bootstrap.css文件第3785行～第3830行，我們把代碼節選出來放入右側bootstrap.css中。

　　而顏色和其他樣式是通過配合父容器“navbar-default”來一起實現。

 1 <div class="navbar navbar-default" role="navigation">
 2 
 3      <ul class="nav navbar-nav">
 4 
 5              <li class="active"><a href="##">網站首頁</a></li>
 6 
 7         <li><a href="##">系列教程</a></li>
 8 
 9         <li><a href="##">名師介紹</a></li>
10 
11         <li><a href="##">成功案例</a></li>
12 
13         <li><a href="##">關於我們</a></li>
14 
15         </ul>
16 
17 </div>
18 
19 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
20 
21 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

2、為導航條添加標題、二級菜單及狀態

加入導航條標題：

在Web頁面制作中，常常在菜單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也為大家做了這方面考慮，其通過“navbar-header”和“navbar-brand”來實現。

導航條狀態、二級菜單：

同樣的，在基礎導航條中對菜單提供了當前狀態，禁用狀態，懸浮狀態等效果，而且也可以帶有二級菜單的導航條。

 1 <div class="navbar navbar-default" role="navigation">
 2 
 3   　<div class="navbar-header">
 4 
 5   　    <a href="##" class="navbar-brand">慕課網</a>
 6 
 7   　</div>
 8 
 9     <ul class="nav navbar-nav">
10 
11           <li class="active"><a href="##">網站首頁</a></li>
12 
13        <li><a href="##">系列教程</a></li>
14 
15        <li><a href="##">名師介紹</a></li>
16 
17        <li><a href="##">成功案例</a></li>
18 
19        <li><a href="##">關於我們</a></li>
20 
21         </ul>
22 
23 </div>
24 
25 <!--導航條狀態及二級菜單-->
26 
27 <div class="navbar navbar-default" role="navigation">
28 
29   　<div class="navbar-header">
30 
31   　    <a href="##" class="navbar-brand">慕課網</a>
32 
33   　</div>
34 
35        <ul class="nav navbar-nav">
36 
37              <li class="active"><a href="##">網站首頁</a></li>
38 
39         <li class="dropdown">
40 
41           <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
42 
43           <ul class="dropdown-menu">
44 
45              <li><a href="##">CSS3</a></li>
46 
47              <li><a href="##">JavaScript</a></li>
48 
49              <li class="disabled"><a href="##">PHP</a></li>
50 
51           </ul>
52 
53        </li>
54 
55        <li><a href="##">名師介紹</a></li>
56 
57        <li><a href="##">成功案例</a></li>
58 
59        <li><a href="##">關於我們</a></li>
60 
61        </ul>
62 
63 </div>
64 
65 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
66 
67 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

3、帶表單的導航條

有的導航條中會帶有搜索表單，比如新浪微博的導航條：

在Bootstrap框架中提供了一個“navbar-form”，使用方法很簡單，在navbar容器中放置一個帶有navbar-form類名的表單。

 1 <div class="navbar navbar-default" role="navigation">
 2 
 3   　<div class="navbar-header">
 4 
 5   　    <a href="##" class="navbar-brand">慕課網</a>
 6 
 7   　</div>
 8 
 9     <ul class="nav navbar-nav">
10 
11        <li class="active"><a href="##">網站首頁</a></li>
12 
13        <li class="dropdown">
14 
15           <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
16 
17           <ul class="dropdown-menu">
18 
19              <li><a href="##">CSS3</a></li>
20 
21              <li><a href="##">JavaScript</a></li>
22 
23              <li class="disabled"><a href="##">PHP</a></li>
24 
25           </ul>
26 
27       </li>
28 
29       <li><a href="##">名師介紹</a></li>
30 
31       <li><a href="##">成功案例</a></li>
32 
33       <li><a href="##">關於我們</a></li>
34 
35         </ul>
36 
37      <form action="##" class="navbar-form navbar-left" rol="search">
38 
39        <div class="form-group">
40 
41              <input type="text" class="form-control" placeholder="請輸入關鍵詞" />
42 
43        </div>
44 
45         <button type="submit" class="btn btn-default">搜索</button>
46 
47      </form>
48 
49 </div>
50 
51 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
52 
53 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

4、固定導航條

很多情況之一，設計師希望導航條固定在瀏覽器頂部或底部，這種固定式導航條的應用在移動端開發中更為常見。Bootstrap框架提供了兩種固定導航條的方式：

☑ .navbar-fixed-top：導航條固定在瀏覽器窗口頂部

☑ .navbar-fixed-bottom：導航條固定在瀏覽器窗口底部

使用方法很簡單，只需要在制作導航條最外部容器navbar上追加對應的類名即可：

 1 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
 2 
 3 　…
 4 
 5 </div>
 6 
 7 <div class="content">我是內容</div>
 8 
 9 <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
10 
11 　…
12 
13 </div>

5、

6、反色導航條

反色導航條其實是Bootstrap框架為大家提供的第二種風格的導航條，與默認的導航條相比，使用方法並無區別，只是將navbar-deafult類名換成navbar-inverse。其變化只是導航條的背景色和文本做了修改。

 1 <div class="navbar navbar-inverse" role="navigation">
 2 
 3   <div class="navbar-header">
 4 
 5      <a href="##" class="navbar-brand">慕課網</a>
 6 
 7   </div>
 8 
 9   <ul class="nav navbar-nav">
10 
11       <li class="active"><a href="">首頁</a></li>
12 
13     <li><a href="">教程</a></li>
14 
15     <li><a href="">關於我們</a></li>
16 
17   </ul>
18 
19 </div>
20 
21  
22 
23 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
24 
25 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

7、分頁導航（帶頁碼的分頁導航）

分頁導航幾乎在哪個網站都可見。好的分頁導航能給用戶帶來更好的用戶體驗。

帶頁碼的分頁導航：

帶頁碼的分頁導航，可能是最常見的一種分頁導航，特別是在列表頁內容超多的時候，會給用戶提供分頁的導航方式。

使用方法：

在Bootstrap框架中使用的是ul>li>a這樣的結構，在ul標簽上加上類pagination。

從效果中可以看出，當前狀態頁碼會高亮顯示，而且不能點擊。而最后一頁是禁用狀態，也不能點擊。

大小設置：

在Bootstrap框架中，也可以通過幾個不同的情況來設置其大小。類似於按鈕一樣：

1、通過“pagination-lg”讓分頁導航變大；

2、通過“pagination-sm”讓分頁導航變小：

 1 <ul class="pagination pagination-lg">
 2 
 3   <li><a href="#">&laquo;第一頁</a></li>
 4 
 5   <li><a href="#">11</a></li>
 6 
 7   <li><a href="#">12</a></li>
 8 
 9   <li class="active"><a href="#">13</a></li>
10 
11   <li><a href="#">14</a></li>
12 
13   <li><a href="#">15</a></li>
14 
15   <li class="disabled"><a href="#">最后一頁&raquo;</a></li>
16 
17 </ul>
18 
19 <ul class="pagination">
20 
21   <li><a href="#">&laquo;第一頁</a></li>
22 
23   <li><a href="#">11</a></li>
24 
25   <li><a href="#">12</a></li>
26 
27   <li class="active"><a href="#">13</a></li>
28 
29   <li><a href="#">14</a></li>
30 
31   <li><a href="#">15</a></li>
32 
33   <li class="disabled"><a href="#">最后一頁&raquo;</a></li>
34 
35 </ul>  
36 
37 <ul class="pagination pagination-sm">
38 
39   <li><a href="#">&laquo;第一頁</a></li>
40 
41   <li><a href="#">11</a></li>
42 
43   <li><a href="#">12</a></li>
44 
45   <li class="active"><a href="#">13</a></li>
46 
47   <li><a href="#">14</a></li>
48 
49   <li><a href="#">15</a></li>
50 
51   <li class="disabled"><a href="#">最后一頁&raquo;</a></li>
52 
53 </ul>  
54 
55 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
56 
57 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

8、分頁導航（翻頁分頁導航）

Bootstrap框架除了提供帶頁碼的分頁導航之外還提供了翻頁導航。這種分頁導航常常在一些簡單的網站上看到，比如說個人博客，雜志網站等。這種分頁導航是看不到具體的頁碼，只會提供一個“上一頁”和“下一頁”的按鈕。

使用方法：

在實際使用中，翻頁分頁導航和帶頁碼的分頁導航類似，為ul標簽加入pager類

對齊樣式設置：

默認情況之下，翻頁分頁導航是居中顯示，但有的時候我們需要一個居左，一個居右。Bootstrap框架提供了兩個樣式：

☑ previous：讓“上一步”按鈕居左

☑ next：讓“下一步”按鈕居右

具體使用的時候，只需要在li標簽上添加對應類名即可。

 1 <ul class="pager">
 2 
 3   <li><a href="#">&laquo;上一頁</a></li>
 4 
 5   <li><a href="#">下一頁&raquo;</a></li>
 6 
 7 </ul>
 8 
 9 <ul class="pager">
10 
11   <li class="previous"><a href="#">&laquo;上一頁</a></li>
12 
13   <li class="next"><a href="#">下一頁&raquo;</a></li>
14 
15 </ul>
16 
17 <ul class="pager">
18 
19   <li class="disabled"><span>&laquo;上一頁</span></li>
20 
21   <li><a href="#">下一頁&raquo;</a></li>
22 
23 </ul> 
24 
25 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
26 
27 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

9、標簽

在一些Web頁面中常常會添加一個標簽用來告訴用戶一些額外的信息，比如說在導航上添加了一個新導航項，可能就會加一個“new”標簽，來告訴用戶。這是新添加的導航項。如下圖所示：

那么在Bootstrap框架中特意將這樣的效果提取出來成為一個標簽組件，並且以“.label”樣式來實現高亮顯示。

顏色樣式設置：

和按鈕元素button類似，label樣式也提供了多種顏色：

☑ label-deafult:默認標簽，深灰色

☑ label-primary：主要標簽，深藍色

☑ label-success：成功標簽，綠色

☑ label-info：信息標簽，淺藍色

☑ label-warning：警告標簽，橙色

☑ label-danger：錯誤標簽，紅色

主要是通過這幾個類名來修改背景顏色和文本顏色。

 1 <h3>Example heading <span class="label label-default">New</span></h3> 
 2 
 3 <!--代碼-->
 4 
 5 <span class="label label-default">默認標簽</span>
 6 
 7 <span class="label label-primary">主要標簽</span>
 8 
 9 <span class="label label-success">成功標簽</span>
10 
11 <span class="label label-info">信息標簽</span>
12 
13 <span class="label label-warning">警告標簽</span>
14 
15 <span class="label label-danger">錯誤標簽</span>
16 
17 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
18 
19 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

10、徽章

從某種意義上來說，徽章效果和前面介紹的標簽效果是極其的相似。也是用來做一些提示信息使用。常出現的是一些系統發出的信息，比如你登錄你的twitter后，如果你信息沒有看，系統會告訴你有多少信息未讀，如下圖所示：

在Bootstrap框架中，把這種效果稱作為徽章效果，使用“badge”樣式來實現。使用方法，其實也沒什么太多可說的，你可以像標簽一樣，使用span標簽來制作，然后為他加入badge類：

按鈕和膠囊形導航設置徽章：

另外，徽章在按鈕元素button和膠囊形導航nav-pills也可以有類似的樣式，只不過是顏色不同而已。

 1 <!--navbar-default導航條勛章-->
 2 
 3 <div class="navbar navbar-default" role="navigation">
 4 
 5   　<div class="navbar-header">
 6 
 7   　    <a href="##" class="navbar-brand">慕課網</a>
 8 
 9   　</div>
10 
11        <ul class="nav navbar-nav">
12 
13              <li class="active"><a href="##">網站首頁</a></li>
14 
15         <li><a href="##">系列教程</a></li>
16 
17         <li><a href="##">名師介紹</a></li>
18 
19         <li><a href="##">成功案例<span class="badge">23</span></a></li>
20 
21         <li><a href="##">關於我們</a></li>
22 
23        </ul>
24 
25 </div>
26 
27 <!--nav-pills導航條勛章-->
28 
29 <ul class="nav nav-pills">
30 
31   <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
32 
33   <li><a href="#">Profile</a></li>
34 
35   <li><a href="#">Messages <span class="badge">3</span></a></li>
36 
37 </ul>
38 
39 <br />
40 
41 <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
42 
43       <li class="active">
44 
45         <a href="#">
46 
47           <span class="badge pull-right">42</span>
48 
49           Home
50 
51         </a>
52 
53       </li>
54 
55       <li><a href="#">Profile</a></li>
56 
57       <li>
58 
59         <a href="#">
60 
61           <span class="badge pull-right">3</span>
62 
63           Messages
64 
65         </a>
66 
67       </li>
68 
69 </ul>
70 
71 <br />
72 
73 <!--按鈕勛章-->
74 
75 <button class="btn btn-primary" type="button">
76 
77       Messages <span class="badge">4</span>
78 
79 </button>
80 
81 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
82 
83 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

七、其他內置組件

1、縮略圖

縮略圖在網站中最常用的地方就是產品列表頁面，一行顯示幾張圖片，有的在圖片底下（左側或右側）帶有標題、描述等信息。Bootstrap框架將這一部獨立成一個模塊組件。並通過“thumbnail”樣式配合bootstrap的網格系統來實現。可以將產品列表頁變得更好看。

使用方法：

通過“thumbnail”樣式配合bootstrap的網格系統來實現。

 1 <h1>簡單的縮略圖</h1>
 2 
 3 <div class="container">
 4 
 5     <div class="row">
 6 
 7               <div class="col-xs-6 col-md-3">
 8 
 9                      <a href="#" class="thumbnail">
10 
11                             <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" >
12 
13                      </a>
14 
15               </div>
16 
17               <div class="col-xs-6 col-md-3">
18 
19                      <a href="#" class="thumbnail">
20 
21                             <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
22 
23                      </a>
24 
25               </div>
26 
27               <div class="col-xs-6 col-md-3">
28 
29                      <a href="#" class="thumbnail">
30 
31                             <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
32 
33                      </a>
34 
35               </div>
36 
37               <div class="col-xs-6 col-md-3">
38 
39                      <a href="#" class="thumbnail">
40 
41                             <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
42 
43                      </a>
44 
45               </div>
46 
47        </div>
48 
49 </div>
50 
51 <!--下面是任務部分-->
52 
53 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
54 
55 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

在寬屏幕（可視區域大於768px）的時候，一行顯示四個縮略圖(單擊全屏查看效果)：

在窄屏（可視區域小於768px）的時候，一行只顯示兩個縮略圖

除了這種方式之外，還可以讓縮略圖配合標題、描述內容，按鈕等：

在僅有縮略圖的基礎上，添加了一個div名為“caption“的容器，在這個容器中放置其他內容，比如說標題，文本描述，按鈕等

  1 <h1>復雜的縮略圖</h1>
  2 
  3 <div class="container">
  4 
  5     <div class="row">
  6 
  7               <div class="col-xs-6 col-md-3">
  8 
  9                      <a href="#" class="thumbnail">
 10 
 11                             <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
 12 
 13                      </a>
 14 
 15                      <div class="caption">
 16 
 17                             <h3>Bootstrap框架系列教程</h3>
 18 
 19                             <p>Bootstrap框架是一個優秀的前端框，就算您是一位后端程序員或者你是一位不懂設計的前端人員，你也能依賴於Bootstrap制作做優美的網站...</p>
 20 
 21                             <p>
 22 
 23                                    <a href="##" class="btn btn-primary">開始學習</a>
 24 
 25                                    <a href="##" class="btn btn-info">正在學習</a>
 26 
 27                             </p>
 28 
 29                      </div> 
 30 
 31               </div>
 32 
 33            <div class="col-xs-6 col-md-3">
 34 
 35                  <a href="#" class="thumbnail">
 36 
 37                         <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
 38 
 39                   </a>
 40 
 41                   <div class="caption">
 42 
 43                         <h3>Bootstrap框架系列教程</h3>
 44 
 45                         <p> Bootstrap框架是一個優秀的前端框，就算您是一位后端程序員或者你是一位不懂設計的前端人員，你也能依賴於Bootstrap制作做優美的網站...</p>
 46 
 47                         <p>
 48 
 49                                <a href="##" class="btn btn-primary">開始學習</a>
 50 
 51                                <a href="##" class="btn btn-info">正在學習</a>
 52 
 53                          </p>
 54 
 55                   </div>  
 56 
 57           </div>
 58 
 59           <div class="col-xs-6 col-md-3">
 60 
 61                   <a href="#" class="thumbnail">
 62 
 63                          <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
 64 
 65                   </a>
 66 
 67                   <div class="caption">
 68 
 69                          <h3>Bootstrap框架系列教程</h3>
 70 
 71                                 <p>Bootstrap框架是一個優秀的前端框，就算您是一位后端程序員或者你是一位不懂設計的前端人員，你也能依賴於Bootstrap制作做優美的網站...</p>
 72 
 73                                 <p>
 74 
 75                                       <a href="##" class="btn btn-primary">開始學習</a>
 76 
 77                                       <a href="##" class="btn btn-info">正在學習</a>
 78 
 79                                </p>
 80 
 81                   </div>  
 82 
 83            </div>
 84 
 85            <div class="col-xs-6 col-md-3">
 86 
 87                  <a href="#" class="thumbnail">
 88 
 89                          <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
 90 
 91                   </a>
 92 
 93                   <div class="caption">
 94 
 95                          <h3>Bootstrap框架系列教程</h3>
 96 
 97                         <p>Bootstrap框架是一個優秀的前端框，就算您是一位后端程序員或者你是一位不懂設計的前端人員，你也能依賴於Bootstrap制作做優美的網站...</p>
 98 
 99                         <p>
100 
101                                <a href="##" class="btn btn-primary">開始學習</a>
102 
103                                <a href="##" class="btn btn-info">正在學習</a>
104 
105                          </p>
106 
107                  </div>  
108 
109            </div>
110 
111        </div>
112 
113 </div>

View Code

2、警示框--默認警示框

Bootstrap框架通過“alert“樣式來實現警示框效果。在默認情況之下，提供了四種不同的警示框效果：

1、成功警示框：告訴用用戶操作成功，在“alert”樣式基礎上追加“alert-success”樣式，具體呈現的是背景、邊框和文本都是綠色；

2、信息警示框：給用戶提供提示信息，在“alert”樣式基礎上追加“alert-info”樣式，具體呈現的是背景、邊框和文本都是淺藍色；

3、警告警示框：提示用戶小心操作（提供警告信息），在“alert”樣式基礎上追加“alert-warning”樣式，具體呈現的是背景、邊框、文本都是淺黃色；

4、錯誤警示框：提示用戶操作錯誤，在“alert”樣式基礎上追加“alert-danger”樣式，具體呈現的是背景、邊框和文本都是淺紅色。

使用方法：

具體使用的時候，可以在類名為“alert”的div容器里放置提示信息。實現不同類型警示框，只需要在“alert”基礎上追加對應的類名

 1 <div class="alert alert-success" role="alert">恭喜您操作成功！</div>
 2 
 3 <div class="alert alert-info" role="alert">請輸入正確的密碼</div>
 4 
 5 <div class="alert alert-warning" role="alert">您已操作失敗兩次，還有最后一次機會</div>
 6 
 7 <div class="alert alert-danger" role="alert">對不起，您輸入的密碼有誤</div>
 8 
 9 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
10 
11 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

3、警示框--可關閉的警示框

大家在平時瀏覽網頁的時候，會發現一些警示框帶有關閉按鈕，用戶一點擊關閉按鈕就能自動關閉顯示的警示框（也就是讓警示框隱藏不顯示）。在Bootstrap框架中的警示框也具有這樣的功能。

使用方法：

只需要在默認的警示框里面添加一個關閉按鈕。然后進行三個步驟：

1、需要在基本警示框“alert”的基礎上添加“alert-dismissable”樣式。

2、在button標簽中加入class="close"類，實現警示框關閉按鈕的樣式。

3、要確保關閉按鈕元素上設置了自定義屬性：“data-dismiss="alert"”（因為可關閉警示框需要借助於Javascript來檢測該屬性，從而控制警示框的關閉）。

 1 <div class="alert alert-success alert-dismissable" role="alert">
 2 
 3     <button class="close" type="button" data-dismiss="alert">&times;</button>
 4 
 5        恭喜您操作成功！
 6 
 7 </div>
 8 
 9 <div class="alert alert-info alert-dismissable" role="alert">
10 
11        <button class="close" type="button" data-dismiss="alert">&times;</button>
12 
13        請輸入正確的密碼
14 
15 </div>
16 
17 <div class="alert alert-warning alert-dismissable" role="alert">
18 
19        <button class="close" type="button" data-dismiss="alert">&times;</button>
20 
21        您已操作失敗兩次，還有最后一次機會
22 
23 </div>
24 
25 <div class="alert alert-danger alert-dismissable" role="alert">
26 
27        <button class="close" type="button" data-dismiss="alert">&times;</button>
28 
29        對不起，您輸入的密碼有誤
30 
31 </div>
32 
33 <!--下面是代碼部分-->
34 
35 <h2>下面是代碼部區</h2>
36 
37 <div class="alert alert-info" role="alert">請修改相應信息</div>
38 
39 <div class="alert alert-success" role="alert">謝謝，操作成功！</div>
40 
41 <div class="alert alert-warning" role="alert">您已操作失敗兩次，還有最后一次機會</div>
42 
43 <div class="alert alert-danger" role="alert">對不起，您剛才的操作失敗</div>
44 
45 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
46 
47 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

4、進度條--基本樣式

Bootstrap框架中對於進度條提供了一個基本樣式，一個100%寬度的背景色，然后個高亮的色表示完成進度。其實制作這樣的進度條非常容易，一般是使用兩個容器，外容器具有一定的寬度，並且設置一個背景顏色，他的子元素設置一個寬度，比如完成度是30%（也就是父容器的寬度比例值），同時給其設置一個高亮的背景色。

使用方法：

Bootstrap框架中也是按這樣的方式實現的，他提供了兩個容器，外容器使用“progress”樣式，子容器使用“progress-bar”樣式。其中progress用來設置進度條的容器樣式，而progress-bar用於限制進度條的進度。使用方法非常的簡單：

<div class="progress">

       <div class="progress-bar" style="width:40%"></div>

</div>

運行效果如下：

5、進度條--彩色進度條

Bootstrap框架中的進度條和警告信息框一樣，為了能給用戶一個更好的體驗，也根據不同的狀態配置了不同的進度條顏色。在此稱為彩色進度條，其主要包括以下四種：

☑ progress-bar-info：表示信息進度條，進度條顏色為藍色

☑ progress-bar-success：表示成功進度條，進度條顏色為綠色

☑ progress-bar-warning：表示警告進度條，進度條顏色為黃色

☑ progress-bar-danger：表示錯誤進度條，進度條顏色為紅色

使用方法：

具體使用就非常簡單了，只需要在基礎的進度上增加對應的類名。

 1 <div class="progress">
 2 
 3     <div class="progress-bar progress-bar-success" style="width:40%"></div>
 4 
 5 </div>
 6 
 7 <div class="progress">
 8 
 9       <div class="progress-bar progress-bar-info" style="width:60%"></div>
10 
11 </div>
12 
13 <div class="progress">
14 
15       <div class="progress-bar progress-bar-warning" style="width:80%"></div>
16 
17 </div>
18 
19 <div class="progress">
20 
21       <div class="progress-bar progress-bar-danger" style="width:50%"></div>
22 
23 </div>

6、進度條--條紋進度條

在Bootstrap框架中除了提供了彩色進度條之外，還提供了一種條紋進度條，這種條紋進度條采用CSS3的線性漸變來實現，並未借助任何圖片。使用Bootstrap框架中的條紋進度條只需要在進度條的容器“progress”基礎上增加類名“progress-striped”。

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

7、進度條--動態條紋進度條

使用方法：

在進度條“progress progress-striped”兩個類的基礎上再加入“active”類名。

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

8、進度條--層疊進度條

Bootstrap框架除了提供上述幾種進度條之外，還提供了一種層疊進度條，層疊進度條，可以將不同狀態的進度條放置在一起，按水平方式排列。層疊進度條寬度之和不能大於100%，大於100%就會造成不良效果。

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

9、進度條--帶Label的進度條

上面介紹的各種進度條，都僅僅是通過顏色進度向用戶傳遞進度值。但實際中，有很多時候是需要在進度條中直接用相關的數值向用戶傳遞完成的進度值，在Bootstrap就為大家考慮了這種使用場景。

實現方法：

只需要在進度條中添加你需要的值

<div class="progress">

    <div class="progress-bar progress-bar-success" style="width:20%">20%</div> 

</div>

10、媒體對象--默認媒體對象

媒體對象一般是成組出現，而一組媒體對象常常包括以下幾個部分：

☑ 媒體對像的容器：常使用“media”類名表示，用來容納媒體對象的所有內容

☑ 媒體對像的對象：常使用“media-object”表示，就是媒體對象中的對象，常常是圖片

☑ 媒體對象的主體：常使用“media-body”表示，就是媒體對像中的主體內容，可以是任何元素，常常是圖片側邊內容

☑ 媒體對象的標題：常使用“media-heading”表示，就是用來描述對象的一個標題，此部分可選

如下圖所示：

除了上面四個部分之外，在Bootstrap框架中還常常使用“pull-left”或者“pull-right”來控制媒體對象中的對象浮動方式。

 1 <div class="media">
 2 
 3     <a class="pull-left" href="#">
 4 
 5           <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
 6 
 7      </a>
 8 
 9      <div class="media-body">
10 
11           <h4 class="media-heading">系列：十天精通CSS3</h4>
12 
13           <div>全方位深刻詳解CSS3模塊知識，經典案例分析，代碼同步調試，讓網頁穿上絢麗裝備！</div>
14 
15      </div>
16 
17 </div>
18 
19   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
20 
21   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

11、媒體對象--媒體對象的嵌套

在評論系統中，常常能看到下圖的效果：

從外往里看，這里有三個媒體對象，只不過是一個嵌套在另一個的里面。那么在Bootstrap框架中的媒體對象也具備這樣的功能，只需要將另一個媒體對象結構放置在媒體對象的主體內“media-body”

 1 <div class="media">
 2 
 3     <a class="pull-left" href="#">
 4 
 5               <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
 6 
 7        </a>
 8 
 9        <div class="media-body">
10 
11               <h4 class="media-heading">我是大漠</h4>
12 
13               <div>我是W3cplus站長大漠，我在寫Bootstrap框中的媒體對象測試用例</div>
14 
15               <div class="media">
16 
17                      <a class="pull-left" href="#">
18 
19                             <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
20 
21                      </a>
22 
23                      <div class="media-body">
24 
25                             <h4 class="media-heading">慕課網</h4>
26 
27                             <div>大漠寫的《玩轉Bootstrap》系列教程即將會在慕課網上發布</div>
28 
29                             <div class="media">
30 
31                                    <a class="pull-left" href="#">
32 
33                                           <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
34 
35                                    </a>
36 
37                                    <div class="media-body">
38 
39                                           <h4 class="media-heading">W3cplus</h4>
40 
41                                           <div>W3cplus站上還有很多教程....</div>
42 
43                                    </div>
44 
45                             </div>
46 
47                      </div>
48 
49               </div>
50 
51        </div>
52 
53 </div>
54 
55   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
56 
57   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

12、媒體對象--媒體對象列表

媒體對象的嵌套僅是媒體對象中一個簡單應用效果之一，在很多時候，我們還會碰到一個列表，每個列表項都和媒體對象長得差不多，同樣用評論系統來說事：

使用方法：

針對上圖的媒體對象列表效果，Bootstrap框架提供了一個列表展示的效果，在寫結構的時候可以使用ul，並且在ul上添加類名“media-list”，而在li上使用“media”，示例代碼如下：

 1 <ul class="media-list">
 2 
 3     <li class="media">
 4 
 5         <a class="pull-left" href="#">
 6 
 7             <img class="media-object" src=" " alt="...">
 8 
 9         </a>
10 
11         <div class="media-body">
12 
13             <h4 class="media-heading">Media Header</h4>
14 
15             <div>…</div>
16 
17         </div>
18 
19     </li>
20 
21     <li class="media">…</li>
22 
23     <li class="media">…</li>
24 
25 </ul>

View Code

13、列表組--基礎列表組

基礎列表組，看上去就是去掉了列表符號的列表項，並且配上一些特定的樣式。在Bootstrap框架中的基礎列表組主要包括兩個部分：

☑ list-group：列表組容器，常用的是ul元素，當然也可以是ol或者div元素

☑ list-group-item：列表項，常用的是li元素，當然也可以是div元素

 1 <ul class="list-group">
 2 
 3     <li class="list-group-item">揭開CSS3的面紗</li>
 4 
 5        <li class="list-group-item">CSS3選擇器</li>
 6 
 7        <li class="list-group-item">CSS3邊框</li>
 8 
 9        <li class="list-group-item">CSS3背景</li>
10 
11        <li class="list-group-item">CSS3文本</li>
12 
13 </ul>
14 
15   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
16 
17   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

14、列表組--帶徽章的列表組

帶徽章的列表組其實就是將Bootstrap框架中的徽章組件和基礎列表組結合在一起的一個效果。具體做法很簡單，只需要在“list-group-item”中添加徽章組件“badge”。

 1 <ul class="list-group">
 2 
 3     <li class="list-group-item">
 4 
 5               <span class="badge">13</span>揭開CSS3的面
 6 
 7        </li>
 8 
 9        <li class="list-group-item">
10 
11               <span class="badge">456</span>CSS3選擇器
12 
13        </li>
14 
15        <li class="list-group-item">
16 
17               <span class="badge">892</span>CSS3邊框
18 
19        </li>
20 
21        <li class="list-group-item">
22 
23               <span class="badge">90</span>CSS3背景
24 
25        </li>
26 
27        <li class="list-group-item">
28 
29               <span class="badge">1290</span>CSS3文本
30 
31        </li>
32 
33 </ul>
34 
35   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
36 
37   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

15、列表組--帶鏈接的列表組

帶鏈接的列表組，其實就是每個列表項都具有鏈接效果。大家可能最初想到的就是在基礎列表組的基礎上，給列表項的文本添加鏈接。

 1 <ul class="list-group">
 2 
 3     <li class="list-group-item">
 4 
 5               <a href="##">揭開CSS3的面</a>
 6 
 7        </li>
 8 
 9        <li class="list-group-item">
10 
11               <a href="##">CSS3選擇器</a>
12 
13        </li>
14 
15        <li class="list-group-item">
16 
17               <a href="##">CSS3邊框</a>
18 
19        </li>
20 
21        <li class="list-group-item">
22 
23               <a href="##">CSS3背景</a>
24 
25        </li>
26 
27        <li class="list-group-item">
28 
29               <a href="##">CSS3文本</a>
30 
31        </li>
32 
33 </ul>
34 
35 <h3>帶鏈接的列表組2</h3>
36 
37 <div class="list-group">
38 
39        <a href="##" class="list-group-item">圖解CSS3</a>
40 
41        <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
42 
43        <a href="##" class="list-group-item">玩轉Bootstrap</a>
44 
45 </div>
46 
47   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
48 
49   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

16、列表組--自定義列表組

Bootstrap框加在鏈接列表組的基礎上新增了兩個樣式：

☑ list-group-item-heading：用來定義列表項頭部樣式

☑ list-group-item-text：用來定義列表項主要內容

這兩個樣式最大的作用就是用來幫助開發者可以自定義列表項里的內容。

 1 <div class="list-group">
 2 
 3     <a href="##" class="list-group-item">
 4 
 5               <h4 class="list-group-item-heading">圖解CSS3</h4>
 6 
 7               <p class="list-group-item-text">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性...</p>
 8 
 9        </a>                 
10 
11        <a href="##" class="list-group-item">
12 
13               <h4 class="list-group-item-heading">Sass中國</h4>
14 
15               <p class="list-group-item-text">致力於為中國開發者提供最全面，最具影響力，最前沿的Sass相關技術與教程...</p>
16 
17        </a>
18 
19 </div>
20 
21   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
22 
23   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

17、列表組--列表項的狀態設置

Bootstrap框架也給組合列表項提供了狀態效果，特別是鏈接列表組。比如常見狀態和禁用狀態等。實現方法和前面介紹的組件類似，在列表組中只需要在對應的列表項中添加類名：

☑ active：表示當前狀態

☑ disabled：表示禁用狀態

 1 <div class="list-group">
 2 
 3     <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>
 4 
 5        <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
 6 
 7        <a href="##" class="list-group-item"><span class="badge">59020</span>慕課網</a>
 8 
 9        <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中國</a>
10 
11 </div>

18、列表組--多彩列表組

列表組組件和警告組件一樣，Bootstrap為不同的狀態提供了不同的背景顏色和文本色，可以使用這幾個類名定義不同背景色的列表項。

☑ list-group-item-success：成功，背景色綠色

☑ list-group-item-info：信息，背景色藍色

☑ list-group-item-warning：警告，背景色為黃色

☑ list-group-item-danger：錯誤，背景色為紅色

如果你想給列表項添加什么背景色，只需要在“list-group-item”基礎上增加對應的類名

 1 <div class="list-group">
 2 
 3     <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>
 4 
 5        <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
 6 
 7        <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕課網</a>
 8 
 9        <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中國</a>
10 
11        <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
12 
13 </div>

19、面板--基礎面板

基礎面板非常簡單，就是一個div容器運用了“panel”樣式，產生一個具有邊框的文本顯示塊。由於“panel”不控制主題顏色，所以在“panel”的基礎上增加一個控制顏色的主題“panel-default”，另外在里面添加了一個“div.panel-body”來放置面板主體內容：

1 <div class="panel panel-default">
2 
3     <div class="panel-body">我是一個基礎面板，帶有默認主題樣式風格</div>
4 
5 </div>

運行效果如下：

20、面板--帶有頭和尾的面板

基礎面板看上去太簡單了，Bootstrap為了豐富面板的功能，特意為面板增加“面板頭部”和“頁面尾部”的效果：

☑ panel-heading：用來設置面板頭部樣式

☑ panel-footer：用來設置面板尾部樣式

 1 <div class="panel panel-default">
 2 
 3      <div class="panel-heading">圖解CSS3</div>
 4 
 5        <div class="panel-body">詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性
 6 
 7        </div>
 8 
 9        <div class="panel-footer">作者：大漠</div>
10 
11 </div>
12 
13   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
14 
15   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

View Code

21、面板--彩色面板

在基礎面板一節中了解到，panel樣式並沒有對主題進行樣式設置，而主題樣式是通過panel-default來設置。在Bootstrap框架中面板組件除了默認的主題樣式之外，還包括以下幾種主題樣式，構成了一個彩色面板：

☑ panel-primary：重點藍

☑ panel-success：成功綠

☑ panel-info:信息藍

☑ panel-warning：警告黃

☑ panel-danger：危險紅

使用方法就很簡單了，只需要在panel的類名基礎上增加自己需要的類名：

 1 <div class="panel panel-default">
 2 
 3     <div class="panel-heading">圖解CSS3</div>
 4 
 5     <div class="panel-body">…</div>
 6 
 7     <div class="panel-footer">作者：大漠</div>
 8 
 9 </div>
10 
11 <div class="panel panel-primary">…</div>
12 
13 <div class="panel panel-success">…</div>
14 
15 <div class="panel panel-info">…</div>
16 
17 <div class="panel panel-warning">…</div>
18 
19 <div class="panel panel-danger">…</div>

運行效果如下：

從效果中不難發現，這幾個樣式只是改變了面板的背景色、文本和邊框顏色。

22、面板--面板中嵌套表格

一般情況下可以把面板理解為一個區域，在使用面板的時候，都會在panel-body放置需要的內容，可能是圖片、表格或者列表等。來看看面板中嵌套表格和列表組的一個效果。

 1 <div class="panel panel-default">
 2 
 3     <div class="panel-heading">圖解CSS3</div>
 4 
 5        <div class="panel-body">
 6 
 7               <p>詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性
 8 
 9               </p>
10 
11               <table class="table table-bordered">
12 
13                      <thead>
14 
15                             <tr>
16 
17                                    <th>＃</th>
18 
19                                    <th>我的書</th>
20 
21                                    <th>發布時間</th>
22 
23                             </tr>
24 
25                      </thead>
26 
27                      <tbody>
28 
29                             <tr>
30 
31                                    <td>1</td>
32 
33                                    <td>《圖解CSS3》</td>
34 
35                                    <td>2014-07-10</td>
36 
37                             </tr>
38 
39                      </tbody>
40 
41               </table>
42 
43        </div>
44 
45        <div class="panel-footer">作者：大漠</div>

23、面板--面板中嵌套列表組

在上一節，我們介紹了如何在面板中放置表格，現在我們來學習如何在面板中放置列表組。

 1 <div class="panel panel-default">
 2 
 3     <div class="panel-heading">圖解CSS3</div>
 4 
 5        <div class="panel-body">
 6 
 7               <p>詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性
 8 
 9               </p>
10 
11               <ul class="list-group">
12 
13                      <li class="list-group-item">我是列表項</li>
14 
15                      <li class="list-group-item">我是列表項</li>
16 
17                      <li class="list-group-item">我是列表項</li>
18 
19               </ul>
20 
21        </div>
22 
23        <div class="panel-footer">作者：大漠</div>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Bootstrap學習筆記(二) 表單 bootstrap學習筆記--bootstrap布局方式 HTML5+Bootstrap 學習筆記 3 Bootstrap學習筆記之整體架構 Bootstrap學習筆記之整體架構 Bootstrap學習筆記系列2-------Bootstrap簡單表格處理 Web前端學習筆記：Bootstrap框架 bootstrap-modal 學習筆記源碼分析 Bootstrap學習筆記(3)--表格\表單\圖片 bootstrap 學習筆記輪播（Carousel）插件