BootStrap學習筆記

時間 2019-11-10

原文原文鏈接

BootStrap筆記

一．BootStrap簡介

1、Bootstrap的由來

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

二、基本的HTML模板

（1）bootstrap模板爲使IE六、七、8版本（IE9如下版本）瀏覽器兼容html5新增的標籤，引入下面代碼文件便可：html

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

（2）同理爲使IE六、七、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聲明。html5

三、全局樣式

（1）移除body的margin聲明jquery

（2）設置body的背景色爲白色ios

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

（4）設置全局連接顏色，且當連接處於懸浮「:hover」狀態時纔會顯示下劃線樣式git

 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>

2、排版

1、標題

（1）Bootstrap和普通的HTML頁面同樣，定義標題都是使用標籤<h1>到<h6>,只不過Bootstrap覆蓋了其默認的樣式，使用其在全部瀏覽器下顯示的效果同樣，具體定義的規則能夠以下表所示：程序員

　　經過比較能夠發現，Bootstrap標題樣式進行了如下顯著的優化重置：github

一、從新設置了margin-top和margin-bottom的值， h1~h3重置後的值都是20px；h4~h6重置後的值都是10px。
二、全部標題的行高都是1.1（也就是font-size的1.1倍）,並且文本顏色和字體都繼承父元素的顏色和字體。
三、固定不一樣級別標題字體大小，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，並且font-weight設置了normal變成了常規效果（不加粗），同時顏色被設置爲灰色（#999）。
二、因爲<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中爲文本設置了一個全局的文本樣式（這裏所說的文本是指正文文本）：

一、全局文本字號爲14px(font-size)。

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

三、顏色爲深灰色（#333）；

四、字體爲"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>來實現。

六、強調相關的類

在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>

七、文本對齊風格

　　在排版中離不開文本的對齊方式。在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>

九、表格

（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>

3、表單

1、基礎表單

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

　　在Bootstrap框架中，經過定製了一個類名`form-control`，也就是說，若是這幾個元素使用了類名「form-control」，將會實現一些設計上的定製效果。

一、寬度變成了100%

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

三、具備4px的圓角

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

五、設置了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框架中要實現水平表單效果，必須知足如下兩個條件：
一、在<form>元素是使用類名「form-horizontal」。
二、配合Bootstrap框架的網格系統。（網格佈局會在之後的章節中詳細講解）

在<form>元素上使用類名「form-horizontal」主要有如下幾個做用：
一、設置表單控件padding和margin值。
二、改變「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框架也作了這方面的考慮：
一、若是checkbox須要水平排列，只須要在label標籤上添加類名「checkbox-inline」
二、若是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框架還提供了兩個不一樣的類名，用來控制表單控件的高度。這兩個類名是：
一、input-sm:讓控件比正常大小更小
二、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框架中一樣提供這幾種效果。
一、.has-warning:警告狀態（黃色）
二、.has-error：錯誤狀態（紅色）
三、.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框架中對於圖像的樣式風格提供如下幾種風格：

一、img-responsive：響應式圖片，主要針對於響應式設計
二、img-rounded：圓角圖片
三、img-circle：圓形圖片
四、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>

4、網格系統

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框架的網格系統工做原理以下：

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

<div class="container">

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

</div>

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

<div class="container">

<div class="row">

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

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

</div>

</div>

三、具體內容應當放置在列容器（column）以內，並且只有列（column）才能夠做爲行容器(.row)的直接子元素

四、經過設置內距（padding）從而建立列與列之間的間距。而後經過爲第一列和最後一列設置負值的外距（margin）來抵消內距(padding)的影響

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

簡單對圖解釋一下：

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

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

三、２號橫條闡述的是，將容器的行（.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 ｝

四、３號橫條就是行容器(.row),其定義了「margin-left」和」margin-right」值爲」-15px」，用來抵消第一個列的左內距和最後一列的右內距。在bootstrap.css的第763行~第767行能夠看到：

.row {

  margin-right: -15px;

  margin-left: -15px;

}

五、將行與列給合在一塊兒就能看到橫條4的效果。也就是咱們指望看到的效果，第一列和最後一列與容器（.container）之間沒有間距。

六、橫條５只是想向你們展現，你能夠根據須要，任意組合列與列，只是他們的組合數之和不要超過總列數。

 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

5、下拉菜單

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>

6、導航條、分頁導航

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>

五、

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框架中，也能夠經過幾個不一樣的狀況來設置其大小。相似於按鈕同樣：

一、經過「pagination-lg」讓分頁導航變大；

二、經過「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

7、其餘內置組件

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「樣式來實現警示框效果。在默認狀況之下，提供了四種不一樣的警示框效果：

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

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

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

四、錯誤警示框：提示用戶操做錯誤，在「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框架中的警示框也具備這樣的功能。

使用方法：

只須要在默認的警示框裏面添加一個關閉按鈕。而後進行三個步驟：

一、須要在基本警示框「alert」的基礎上添加「alert-dismissable」樣式。

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

三、要確保關閉按鈕元素上設置了自定義屬性：「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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。