bootstrap整理-1
基本的HTML模板
小夥伴們，上一小節的視頻課程已經對Bootstrap提供的模板作了詳細的介紹，在這一小節中咱們把這個模板代碼粘貼過來，以供大家學習查看，大家能夠根據實際狀況在此基礎上進行擴展，只須要確保文件引用順序一致便可。css
如右側代碼編輯器中就是最基本的HTML模板。html
咱們來簡單解釋一下其中幾條的重要代碼：前端
bootstrap模板爲使IE六、七、8版本（IE9如下版本）瀏覽器兼容html5新增的標籤，引入下面代碼文件便可。html5
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
同理爲使IE六、七、8版本瀏覽器兼容css3樣式，引入下面代碼：jquery
全局樣式
在製做Web頁面時，前端人員都習慣爲網站設置一個全局樣式（reset.css）。那麼在Bootstrap框架中也不例外。Bootstrap框架的核心是輕量的CSS基礎代碼庫，他並無一味的重置樣式，而是注重各瀏覽器基礎表現，下降開發難度。大部分前端人員都具備歸零的思想，但實際你會發現，歸零以後的樣式在開發過程當中會存在着潛在的問題，例如，在全局樣式表中將em變成一個普通標記，明明應該是斜體，怎麼就沒效果了呢？ios
Bootstrap框架在這一部分作了必定的變動，再也不一味追求歸零，而是更注重重置可能產生問題的樣式（如，body,form的margin等），保留和堅持部分瀏覽器的基礎樣式，解決部分潛在的問題，提高一些細節的體驗，具體說明以下：css3
- 移除body的margin聲明
- 設置body的背景色爲白色
- 爲排版設置了基本的字體、字號和行高
- 設置全局連接顏色，且當連接處於懸浮「:hover」狀態時纔會顯示下劃線樣式
小夥伴們，大家能夠單擊查看右側「style.css」文件，來查看上面所說的全局樣式（這個是從下載的boostrap.css中摘取出來的）。web
其實Bootstrap的全局樣式採用了「normalize.css」，但並無一味的所有使用此重置樣式，而是在此基礎上進行了一些改良，讓其更適合Bootstrap的設計思想。bootstrap
你能夠經過「normalize.less」（LESS版本）或「_normalize.scss」（Sass版本）進行深刻的瞭解。瀏覽器
標題（一）
Bootstrap和普通的HTML頁面同樣，定義標題都是使用標籤<h1>到<h6>,只不過Bootstrap覆蓋了其默認的樣式，使用其在全部瀏覽器下顯示的效果同樣，具體定義的規則能夠以下表所示：
經過比較能夠發現，Bootstrap標題樣式進行了如下顯著的優化重置：
一、從新設置了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六個類名。如右側代碼編輯器中 18-23行代碼所示：
標題（二）
除此以外，咱們在Web的製做中，經常會碰到在一個標題後面緊跟着一行小的副標題。在Bootstrap中他也考慮了這種排版效果，使用了<small>標籤來製做副標題。這個副標題具備其本身的一些獨特樣式：
一、行高都是1，並且font-weight設置了normal變成了常規效果（不加粗），同時顏色被設置爲灰色（#999）。
二、因爲<small>內的文本字體在h1~h3內，其大小都設置爲當前字號的65%；而在h4~h6內的字號都設置爲當前字號的75%；
詳細代碼請參閱bootstrap.css文件中第407行~第443行。
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
font-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
margin-top: 10px;
margin-bottom: 10px;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
font-size: 75%;
}
段落（正文文本）
段落是排版中另外一個重要元素之一。在Bootstrap中爲文本設置了一個全局的文本樣式（這裏所說的文本是指正文文本）：
一、全局文本字號爲14px(font-size)。
二、行高爲1.42857143（line-height），大約是20px(你們看到一串的小數或許會有疑惑，其實他是經過LESS編譯器計算出來的，固然Sass也有這樣的功能)。
三、顏色爲深灰色（#333）；
四、字體爲"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對咱們中文並不太合適，但在實際項目中，你們能夠根據本身的需求進行重置，在此咱們不作過多闡述，咱們回到這裏。該設置都定義在<body>元素上，因爲這幾個屬性都是繼承屬性，因此Web頁面中文本（包括段落p元素）如無重置都會具備這些樣式效果。
/*源碼請查看bootstrap.css文件中第274行~280行*/
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
另外在Bootstrap中，爲了讓段落p元素之間具備必定的間距，便於用戶閱讀文本，特地設置了p元素的margin值（默認狀況之下，p元素具備一個上下外邊距，而且保持一個行高的高度）：
/*源碼請查看bootstrap.css文件中第467行~469行*/
p {
margin: 0 0 10px;
}
若是你對CSS預處理器有所瞭解，那麼你徹底能夠根據Bootstrap提供的預編譯版本LESS(或者Sass)進行自定義排版設置。在Bootstrap中，排版設置的默認值都存在variables.less文件中(Sass版本存在_variables.scss中)的兩個變量：
LESS版本：
@font-size-base: 14px; @line-height-base: 1.428571429; // 20/14
Sass版本：
$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14
強調內容
在實際項目中，對於一些重要的文本，但願突出強調的部分都會作另外的樣式處理。Bootstrap一樣對這部分作了一些輕量級的處理。
若是想讓一個段落p突出顯示，能夠經過添加類名「.lead」實現，其做用就是增大文本字號，加粗文本，並且對行高和margin也作相應的處理。用法以下：
<p>我是普通文本，個人樣子長成這樣我是普通文本，個人樣子長成這樣我是普通文本，</p> <p class="lead">我是特地要突出的文本，個人樣子成這樣。我是特地要突出的文本，個人樣子長成這樣。</p>
效果查看最右側結果窗口。
「.lead」對應的樣式以下：
/*源碼查看bootstrap.css文件第470行~480行*/
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型瀏覽器字體稍大*/
.lead {
font-size: 21px;
}
}
除此以外，Bootstrap還經過元素標籤:<small>、<strong>、<em>和<cite>給文本作突出樣式處理。
/*源碼查看bootstrap.css文件第55行~第58行*/
b,strong {
font-weight: bold; /*文本加粗*/
}
/*源碼查看bootstrap.css文件第481行~第484行*/
small,.small {
font-size: 85%; /*標準字體的85%,也就是14px * 0.85px，差很少12px*/
}
/*源碼查看bootstrap.css第485行~第487行*/
cite {
font-style: normal;
}
粗體
粗體就是給文本加粗，在普通的元素中咱們通常經過font-weight設置爲bold關鍵詞給文本加粗。在Bootstrap中，可使用<b>和<strong>標籤讓文本直接加粗。
/*源碼查看bootstrap.css文件第55行~第58行*/
b,strong {
font-weight: bold; /*文本加粗*/
}
例如，下面的代碼使用<strong>標籤訂義了強調文本：
<p>我在學習<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的全部知識。</p>
斜體
在排版中，除了用加粗來強調突出的文本以外，還可使用斜體。斜體相似於加粗同樣，除了能夠給元素設置樣式font-style值爲italic實現以外，在Bootstrap中還能夠經過使用標籤<em>或<i>來實現。
例如，下面的代碼使用了<em>和<i>標籤訂義了強調文本：
<p>我在慕課網上跟<em>大漠</em>一塊兒學習<i>Bootstrap</i>的使用。我必定要學會<i>Bootstrap</i>。</p>
強調相關的類
在Bootstrap中除了使用標籤<strong>、<em>等說明正文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這裏稱其爲強調類名（相似前面說的「.lead」）,這些強調類都是經過顏色來表示強調，具本說明以下：
- .text-muted：提示，使用淺灰色（#999）
- .text-primary：主要，使用藍色（#428bca）
- .text-success：成功，使用淺綠色(#3c763d)
- .text-info：通知信息，使用淺藍色（#31708f）
- .text-warning：警告，使用黃色（#8a6d3b）
- .text-danger：危險，使用褐色（#a94442）
具本源碼查看bootstrap.css文件第500行~第532行：
.text-muted {
color: #999;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}
強調相關的類
在Bootstrap中除了使用標籤<strong>、<em>等說明正文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這裏稱其爲強調類名（相似前面說的「.lead」）,這些強調類都是經過顏色來表示強調，具本說明以下：
- .text-muted：提示，使用淺灰色（#999）
- .text-primary：主要，使用藍色（#428bca）
- .text-success：成功，使用淺綠色(#3c763d)
- .text-info：通知信息，使用淺藍色（#31708f）
- .text-warning：警告，使用黃色（#8a6d3b）
- .text-danger：危險，使用褐色（#a94442）
具本源碼查看bootstrap.css文件第500行~第532行：
.text-muted {
color: #999;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}
文本對齊風格
在排版中離不開文本的對齊方式。在CSS中經常使用text-align來實現文本的對齊風格的設置。其中主要有四種風格：
☑ 左對齊，取值left
☑ 居中對齊，取值center
☑ 右對齊，取值right
☑ 兩端對齊，取值justify
爲了簡化操做，方便使用，Bootstrap經過定義四個類名來控制文本的對齊風格：
☑ .text-left：左對齊
☑ .text-center：居中對齊
☑ .text-right：右對齊
☑ .text-justify：兩端對齊
具體源碼查看bootstrap.css文件第488行~第499行：
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
例以下面的四行代碼，分別定義文本的四種不一樣的對齊風格：
<p class="text-left">我居左</p> <p class="text-center">我居中</p> <p class="text-right">我居右</p> <p class="text-justify">我兩端對齊</p>
列表--簡介
在HTML文檔中，列表結構主要有三種：有序列表、無序列表和定義列表。具體使用的標籤說明以下：
無序列表
<ul>
<li>…</li>
</ul>
有序列表
<ol>
<li>…</li>
</ol>
定義列表
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
Bootstrap根據平時的使用情形提供了六種形式的列表：
☑ 普通列表
☑ 有序列表
☑ 去點列表
☑ 內聯列表
☑ 描述列表
表單控件(輸入框input)
每個表單都是由表單控件組成。離開了控件，表單就失去了意義。接下來的咱們簡單的來了解Bootstrap框架中表單控件的相關知識。
單行輸入框，常見的文本輸入框，也就是input的type屬性值爲text。在Bootstrap中使用input時也必須添加type類型，若是沒有指定type類型，將沒法獲得正確的樣式，由於Bootstrap框架都是經過input[type=「?」](其中?號表明type類型，好比說text類型，對應的是input[type=「text」])的形式來定義樣式的。
爲了讓控件在各類表單風格中樣式不出錯，須要添加類名「form-control」，如：
<form role="form"> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter email"> </div> </form>
表單控件(下拉選擇框select)
Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設置multiple屬性的值爲multiple。Bootstrap框架會爲這些元素提供統一的樣式風格。如：
<form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </form>
表單控件(文本域textarea)
文本域和原始使用方法同樣，設置rows可定義其高度，設置cols能夠設置其寬度。但若是textarea元素中添加了類名「form-control」類名，則無需設置cols屬性。由於Bootstrap框架中的「form-control」樣式的表單控件寬度爲100%或auto。
<form role="form"> <div class="form-group"> <textarea class="form-control" rows="3"></textarea> </div> </form>
表單控件(複選框checkbox和單選擇按鈕radio)
Bootstrap框架中checkbox和radio有點特殊，Bootstrap針對他們作了一些特殊化處理，主要是checkbox和radio與label標籤配合使用會出現一些小問題（最頭痛的是對齊問題）。使用Bootstrap框架，開發人員無需考慮太多，只須要按照下面的方法使用便可。
<form role="form"> <div class="checkbox"> <label> <input type="checkbox" value=""> 記住密碼 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked> 喜歡 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate"> 不喜歡 </label> </div> </form>
運行效果以下或查看右側結果窗口（案例1）：
從上面的示例，咱們能夠得知：
一、無論是checkbox仍是radio都使用label包起來了
二、checkbox連同label標籤放置在一個名爲「.checkbox」的容器內
三、radio連同label標籤放置在一個名爲「.radio」的容器內
在Bootstrap框架中，主要藉助「.checkbox」和「.radio」樣式，來處理複選框、單選按鈕與標籤的對齊方式。源碼請查看bootstrap.css文件第1742行～第1762行：
.radio,
.checkbox {
display: block;
min-height: 20px;
padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label,
.checkbox label {
display: inline;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}
表單控件(複選框和單選按鈕水平排列)
有時候，爲了佈局的須要，將複選框和單選按鈕須要水平排列。Bootstrap框架也作了這方面的考慮：
一、若是checkbox須要水平排列，只須要在label標籤上添加類名「checkbox-inline」
二、若是radio須要水平排列，只須要在label標籤上添加類名「radio-inline」
以下所示：
<form role="form"> <div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" value="option1">遊戲 </label> <label class="checkbox-inline"> <input type="checkbox" value="option2">攝影 </label> <label class="checkbox-inline"> <input type="checkbox" value="option3">旅遊 </label> </div> <div class="form-group"> <label class="radio-inline"> <input type="radio" value="option1" name="sex">男性 </label> <label class="radio-inline"> <input type="radio" value="option2" name="sex">女性 </label> <label class="radio-inline"> <input type="radio" value="option3" name="sex">中性 </label> </div> </form>
運行效果以下或查看右側結果窗口：
實現源碼請查看bootstrap.css文件第1767行～第1780行：
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}
表單控件(按鈕)
按鈕也是表單重要控件之一,製做按鈕一般使用下面代碼來實現：
☑ input[type=「submit」]
☑ input[type=「button」]
☑ input[type=「reset」]
☑ <button>
在Bootstrap框架中的按鈕都是採用<button>來實現。
有關於Bootstrap中按鈕如何製做，在這裏不作過多闡述，由於按鈕也是Bootstrap框架中核心部分之一，後面咱們專門有一節內容來介紹Bootstrap的按鈕。
這裏先讓你們看看Bootstrap的按鈕長成什麼樣：
表單控件大小
前面看到的表單控件都正常的大小。能夠經過設置控件的height，line-height，padding和font-size等屬性來實現控件的高度設置。不過Bootstrap框架還提供了兩個不一樣的類名，用來控制表單控件的高度。這兩個類名是：
一、input-sm:讓控件比正常大小更小
二、input-lg:讓控件比正常大小更大
這兩個類適用於表單中的input，textarea和select控件，具體使用以下：
<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件變大"> <input class="form-control" type="text" placeholder="正常大小"> <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件變小">
運行效果以下或查看右側結果窗口：
源碼請查閱bootstrap.css文件第1795~第1824行：
.input-sm {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-sm,
select[multiple].input-sm {
height: auto;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-lg {
height: 46px;
line-height: 46px;
}
textarea.input-lg,
select[multiple].input-lg {
height: auto;
}
從上面的源碼中不難發現，無論是「input-sm」仍是「input-lg」僅對控件高度作了處理。但每每不少時候，咱們須要控件寬度也要作必定的變化處理。這個時候就要借住Bootstrap框架的網格系統。因此你要控制表單寬度，能夠像下面這樣使用：
<form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> </div> … </form>
注：網格佈局在後面章節中會進行詳細講解。
運行效果以下或查看右側結果窗口：
前面介紹水平表單時說過，若是表單使用了類名「form-horizontal」，其中「form-group」就至關於網格系統中的「row」。換句話說，若是沒有這樣作，要經過網格系統來控制表單控件寬度，就須要這樣使用：
<div class="row"> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> </div>
表單控件狀態(焦點狀態)
表單主要用來與用戶溝通，好的表單就能更好的與用戶進行溝通，而好的表單必定離不開表單的控件狀態。
表單狀態的做用：
每一種狀態都能給用戶傳遞不一樣的信息，好比表單有焦點的狀態能夠告訴用戶能夠輸入或選擇東西，禁用狀態能夠告訴用戶不能夠輸入或選擇東西，還有就是表單控件驗證狀態，能夠告訴用戶的操做是否正確等。那麼在Bootstrap框架中的表單控件也具有這些狀態。
焦點狀態是經過僞類「:focus」來實現。Bootstrap框架中表單控件的焦點狀態刪除了outline的默認樣式，從新添加陰影效果。
源碼請查閱bootstrap.css文件第1707行～第1712行：
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
從源碼中咱們能夠看出，要讓控件在焦點狀態下有上面樣式效果，須要給控件添加類名「form-control」：
<form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="不是焦點狀態下效果"> </div> <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="焦點點狀態下效果"> </div> </div> </form>
運行效果以下或查看右側結果窗口：
（鼠標單擊輸入框，使其得到焦點就能夠看到加入藍色邊框效果）
在Bootstrap框架中，file、radio和checkbox控件在焦點狀態下的效果也與普通的input控件不太同樣，主要是由於Bootstrap對他們作了一些特殊處理：
/*源碼查看boostrap.css文件第1676行～第1682行*/
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
表單控件狀態(禁用狀態)
Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是同樣的，在相應的表單控件上添加屬性「disabled」。和其餘表單的禁用狀態不一樣的是，Bootstrap框架作了一些樣式風格的處理：
/*源碼請查看bootstrap.css文件第1723行～第1729行*/
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
使用方法爲：只須要在須要禁用的表單控件上加上「disabled」便可：
<input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>
運行效果以下或查看右側結果窗口：
在使用了「form-control」的表單控件中，樣式設置了禁用表單背景色爲灰色，並且手型變成了不許輸入的形狀。若是控件中不使用類名「form-control」，禁用的控件只會有一個不許輸入的手型出來。
/*源碼請查閱bootstrap.css文件第1781行～第1794行*/
input[type="radio"][disabled],
input[type="checkbox"][disabled],
.radio[disabled],
.radio-inline[disabled],
.checkbox[disabled],
.checkbox-inline[disabled],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
在Bootstrap框架中，若是fieldset設置了disabled屬性，整個域都將處於被禁用狀態。
<form role="form"> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">禁用的輸入框</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> </div> <div class="form-group"> <label for="disabledSelect">禁用的下拉框</label> <select id="disabledSelect" class="form-control"> <option>不可選擇</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox">沒法選擇 </label> </div> <button type="submit" class="btnbtn-primary">提交</button> </fieldset> </form>
運行效果以下或查看右側結果窗口：
聽說對於整個禁用的域中，若是legend中有輸入框的話，這個輸入框是沒法被禁用的。咱們一塊兒來驗證一下：
<form role="form"> <fieldset disabled> <legend><input type="text" class="form-control" placeholder="顯然我顏色變灰了，可是我沒被禁用，不信？單擊試一下" /></legend> … </fieldset> </form>
運行效果以下或查看右側結果窗口：
表單控件狀態(驗證狀態)
在製做表單時，難免要作表單驗證。一樣也須要提供驗證狀態樣式，在Bootstrap框架中一樣提供這幾種效果。
一、.has-warning:警告狀態（黃色）
二、.has-error：錯誤狀態（紅色）
三、.has-success：成功狀態（綠色）
使用的時候只須要在form-group容器上對應添加狀態類名。
<form role="form"> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功狀態</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" > </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">警告狀態</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">錯誤狀態</label> <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態"> </div> </form>
運行效果以下或查看右側結果窗口：
從效果能夠看出，三種狀態下效果都是同樣的，只是顏色不同而以。
源碼請查閱bootstrap.css文件第1481行～第1918行。
其餘兩種狀態省略源碼不在此展現。
不少時候，在表單驗證的時候，不一樣的狀態會提供不一樣的icon，好比成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。若是你想讓表單在對應的狀態下顯示icon出來，只須要在對應的狀態下添加類名「has-feedback」。請注意，此類名要與「has-error」、「has-warning」和「has-success」在一塊兒：
<form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功狀態</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" > <span class="glyphiconglyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning1">警告狀態</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態"> <span class="glyphiconglyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError1">錯誤狀態</label> <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態"> <span class="glyphiconglyphicon-remove form-control-feedback"></span> </div> </form>
運行效果以下或查看右側結果窗口：
從效果圖中能夠看出，圖標都居右。在Bootstrap的小圖標都是使用@font-face來製做（後面的內容中將會着重用一節內容來介紹）。並且必須在表單中添加了一個span元素：
<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>
經過定位來實現，具體源碼請查閱bootstrap.css文件第1825行～第1840行。
表單提示信息
日常在製做表單驗證時，要提供不一樣的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式，將提示信息以塊狀顯示，而且顯示在控件底部。
<form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功狀態</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" > <span class="help-block">你輸入的信息是正確的</span> <span class="glyphiconglyphicon-ok form-control-feedback"></span> </div> … </form>
運行效果以下或查看右側結果窗口：
具體樣式代碼請查看bootstrap.css文件第1922行～第1927行：
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}
在Bootstrap V2.x版本中還提供了一個行內提示信息，其使用了類名「help-inline」。通常讓提示信息顯示在控件的後面，也就是同一水平顯示。若是你想在BootstrapV3.x版本也有這樣的效果，你能夠添加這段代碼：
.help-inline{
display:inline-block;
padding-left:5px;
color: #737373;
}
若是你不想爲bootstrap.css增長本身的代碼，並且設計又有這種樣的需求，那麼只能藉助於Bootstrap的網格系統。(網格系統在後面的章節中會詳細講解)
<form role="form"> <div class="form-group"> <label class="control-label" for="inputSuccess1">成功狀態</label> <div class="row"> <div class="col-xs-6"> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" > </div> <span class="col-xs-6 help-block">你輸入的信息是正確的</span> </div> </div> </form>
運行效果以下或查看右側結果窗口：
結束語：有關於Bootstrap框架中表單的運用除了按鈕部分，到此就算是介紹完了。若是你以爲這樣的表單效果並非你須要的，你徹底能夠經過forms.less或者_forms.scss文件進行定製，而後從新編譯就能夠獲得你須要的表單效果。在接下來的一節中，咱們Bootstrap框架中另外一個核心內容——按鈕。
按鈕
按鈕也是Bootstrap框架核心內容之一。由於按鈕是Web製做中不可缺乏的東西。並且不一樣的Web頁面具備不一樣的按鈕風格，甚至說同一個Web網站或應用程序具備多種按鈕風格，好比說不一樣的按鈕顏色、大小和狀態等。那麼Bootstrap框架也考慮了這些因素，接下來的內容咱們一塊兒來探討Bootstrap框架中的另外一核心部份內容——按鈕。
Bootstrap框架的按鈕也是一個獨立部分，咱們一樣在不一樣的版本之中能找到對應的代碼：
- LESS版本：查看源文件buttons.less
- Sass版本：查看源文件_buttons.scss
- 已編譯版本：查看源文件bootstrap.css文件第1992行～第2353行
基本按鈕
Bootstrap框架V3.x版本的基本按鈕和V2.x版本的基本按鈕同樣，都是經過類名「btn」來實現。不一樣的是在V3.x版本要簡約不少，去除了V2.x版本中的大量的CSS3中的部分特效，好比說文本陰影（text-shadow）、漸變背景（background-image）、邊框陰影（box-shadow）等。
難能難得的是，Bootstrap框架中的考慮了不一樣瀏覽器的解析差別，進行了比較安全的兼容性處理，使按鈕效果在不一樣的瀏覽器中所呈現的效果基本相同。
源碼請查閱bootstrap.css文件第1992行～第2010行：
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
Bootstrap框架的按鈕使用很是的簡單，使用方式以下：
<button class="btn" type="button">我是一個基本按鈕</button>
運行效果以下或查看右側結果窗口：
默認按鈕
Bootstrap框架首先經過基礎類名「.btn」定義了一個基礎的按鈕風格，而後經過「.btn-default」定義了一個默認的按鈕風格。默認按鈕的風格就是在基礎按鈕的風格的基礎上修改了按鈕的背景顏色、邊框顏色和文本顏色。
/*源碼請查閱bootstrap.css文件第2040行～第2044行*/
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
使用默認按鈕風格也很是的簡單，只須要在基礎按鈕「btn」的基礎上增長類名「btn-default」便可：
<button class="btn btn-default" type="button">默認按鈕</button>
運行效果以下或查看右側結果窗口：
多標籤支持
通常製做按鈕除了使用<button>標籤元素以外，還可使用<input type="submit">和<a>標籤等。一樣，在Bootstrap框架中製做按鈕時，除了剛纔所說的這些標籤元素以外，還可使用在其餘的標籤元素上，惟一須要注意的是，要在製做按鈕的標籤元素上添加類名「btn」。若是不添加是不會有任何按鈕效果。
咱們一塊兒來看看其餘標籤製做的基本按鈕效果：
<button class="btn btn-default" type="button">button標籤按鈕</button> <input type="submit" class="btn btn-default" value="input標籤按鈕"/> <a href="##" class="btn btn-default">a標籤按鈕</a> <span class="btn btn-default">span標籤按鈕</span> <div class="btn btn-default">div標籤按鈕</div>
運行效果以下或查看右側結果窗口：
注意：雖然在Bootstrap框架中使用任何標籤元素均可以實現按鈕風格，但我的並不建議這樣使用，爲了不瀏覽器兼容性問題，我的強烈建議使用button或a標籤來製做按鈕。
定製風格
在介紹按鈕開篇就說過，Web頁面可能會有不一樣的按鈕風格。那麼在Bootstrap框架也考慮了。在Bootstrap框架中除了默認的按鈕風格以外，還有其餘六種按鈕風格，每種風格的其實都同樣，不一樣之處就是按鈕的背景顏色、邊框顏色和文本顏色。
在Bootstrap框架中不一樣的按鈕風格都是經過不一樣的類名來實現，在使用過程當中，開發者只須要選擇不一樣的類名便可：
使用起來就很簡單，就像前面介紹的默認按鈕同樣的使用方法，只須要在基礎按鈕「.btn」基礎上追加對應的類名，就能夠獲得須要的按鈕風格。如：
<button class="btn" type="button">基礎按鈕.btn</button> <button class="btn btn-default" type="button">默認按鈕.btn-default</button> <button class="btn btn-primary" type="button">主要按鈕.btn-primary</button> <button class="btn btn-success" type="button">成功按鈕.btn-success</button> <button class="btn btn-info" type="button">信息按鈕.btn-info</button> <button class="btn btn-warning" type="button">警告按鈕.btn-warning</button> <button class="btn btn-danger" type="button">危險按鈕.btn-danger</button> <button class="btn btn-link" type="button">連接按鈕.btn-link</button>
運行效果以下或查看右側結果窗口：
有關於按鈕風格定製的源碼能夠查閱bootstrap.css文件第2081行～第2318行。
按鈕大小
上一節介紹了按鈕的定製風格，也就是如何實現Web頁面中多種風格按鈕。在Bootstrap框架中，對於按鈕的大小，也是能夠定製的。相似於input同樣，經過在基礎按鈕「.btn」的基礎上追加類名來控制按鈕的大小。
在Bootstrap框架中提供了三個類名來控制按鈕大小：
從上表中不難發現，在Bootstrap框架中控制按鈕的大小都是經過修改按鈕的padding、line-height、font-size和border-radius幾個屬性。
/*源碼查閱bootstrap.css文件中第2319行～第2339行*/
.btn-lg,
.btn-group-lg> .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm> .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,
.btn-group-xs> .btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
那麼在實際使用中，這幾個類名能夠配合按鈕中其餘顏色類名一塊兒使用，但惟一一點不能缺乏「.btn」類名：
<button class="btn btn-primary btn-lg" type="button">大型按鈕.btn-lg</button> <button class="btn btn-primary" type="button">正常按鈕</button> <button class="btn btn-primary btn-sm" type="button">小型按鈕.btn-sm</button> <button class="btn btn-primary btn-xs" type="button">超小型按鈕.btn-xs</button>
效果以下圖或查看右側結果窗口：
塊狀按鈕
從前面幾節的內容中，你們可能發現了，每一個示例中的按鈕寬度都是依靠按鈕文本和padding的值來決定。但有時候在製做按鈕的時候須要按鈕寬度充滿整個父容器（width:100%），特別是在移動端的製做中。那麼前面的方法咱們都沒法很好的實現，除非從新定義按鈕的寬度。其實在Bootstrap中並不須要這樣作，Bootstrap框架中提供了一個類名「btn-block」。按鈕使用這個類名就可讓按鈕充滿整個容器，而且這個按鈕不會有任何的padding和margin值。在實際當中，常把這種按鈕稱爲塊狀按鈕。具體源碼請查閱bootstrap.css文件第2340行～第2353行：
.btn-block {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.btn-block + .btn-block {
margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%;
}
使用方法和前面的相似，只須要在原按鈕類名上添加「.btn-block」類名，固然「.btn」類名是不可或缺的：
<button class="btnbtn-primary btn-lg btn-block" type="button">大型按鈕.btn-lg</button> <button class="btnbtn-primary btn-block" type="button">正常按鈕</button> <button class="btnbtn-primary btn-sm btn-block" type="button">小型按鈕.btn-sm</button> <button class="btnbtn-primary btn-xs btn-block" type="button">超小型按鈕.btn-xs</button>
運行效果以下：
按鈕狀態——活動狀態
Bootstrap框架針對按鈕的狀態作了一些特殊處理。在Bootstrap框架中針對按鈕的狀態效果主要分爲兩種：活動狀態和禁用狀態。
Bootstrap按鈕的活動狀態主要包括按鈕的懸浮狀態(:hover)，點擊狀態(:active)和焦點狀態（:focus）幾種。
/*源碼請查看bootstrap.css文件第2011行～第2029行*/
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus {
color: #333;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
並且不一樣風格下的按鈕都具備這幾種狀態效果，只是顏色作了必定的調整，咱們以默認風格（btn-default）爲例：
/*源碼請查看bootstrap.css文件第2045行～第2058行*/
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
background-image: none;
}
當按鈕處理正在點擊狀態（也就是鼠標按下的未鬆開的狀態），對於<button>元素是經過「:active」僞類實現，而對於<a>這樣的標籤元素則是經過添加類名「.active」來實現。
按鈕狀態——禁用狀態
和input等表單控件同樣，在Bootstrap框架的按鈕中也具備禁用狀態的設置。禁用狀態與其餘狀態按鈕相比，就是背景顏色的透明度作了必定的處理，opcity的值從100%調整爲65%。
在Bootstrap框架中，要禁用按鈕有兩種實現方式：
方法1：在標籤中添加disabled屬性
方法2：在元素標籤中添加類名「disabled」
二者的主要區別是：
「.disabled」樣式不會禁止按鈕的默認行爲，好比說提交和重置行爲等。若是想要讓這樣的禁用按鈕也能禁止按鈕的默認行爲，則須要經過JavaScript這樣的語言來處理。對於<a>標籤也存在相似問題，若是經過類名「.disable」來禁用按鈕，其連接行爲是沒法禁止。而在元素標籤中添加「disabled」屬性的方法是能夠禁止元素的默認行爲的。
下面是兩種方法的舉例：
<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">經過disabled屬性禁用按鈕</button> <button class="btnbtn-primary btn-block disabled" type="button">經過添加類名disabled禁用按鈕</button> <button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按鈕</button>
運行效果以下或查看右側結果窗口：
對應的樣式代碼請查閱bootstrap.css文件第2030行～第2039行：
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
一樣的，其餘風格按鈕也具備這樣的效果，只是顏色作了必定的調整，好比信息按鈕(.btn-info)所示：
/*源碼請查看bootstrap.css文件第2182行～第2199行*/
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
background-color: #5bc0de;
border-color: #46b8da;
}
圖像
圖像在網頁製做中也是常要用到的元素，在Bootstrap框架中對於圖像的樣式風格提供如下幾種風格：
一、img-responsive：響應式圖片，主要針對於響應式設計
二、img-rounded：圓角圖片
三、img-circle：圓形圖片
四、img-thumbnail：縮略圖片
使用方法：
使用方法很是簡單，只須要在<img>標籤上添加對應的類名，以下代碼：
<img alt="140x140" src="http://placehold.it/140x140"> <img class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> <img class="img-circle" alt="140x140" src="http://placehold.it/140x140"> <img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> <img class="img-responsive" alt="140x140" src="http://placehold.it/140x140">
運行效果以下或查看右側結果窗口：
每種狀態對應的源碼能夠查閱bootstrap.css文件第306行～第335行：
img {
vertical-align: middle;
}
.img-responsive,
.thumbnail>img,
.thumbnail a >img,
.carousel-inner > .item >img,
.carousel-inner > .item > a >img {
display: block;
max-width: 100%;
height: auto;
}
.img-rounded {
border-radius: 6px;
}
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}
設置圖片大小：
因爲樣式沒有對圖片作大小上的樣式限制，因此在實際使用的時候，須要經過其餘的方式來處理圖片大小。好比說控制圖片容器大小。（注意不能夠經過css樣式直接修改img圖片的大小，這樣操做就不響應了）
注意：
對於圓角圖片和圓形圖片效果，由於是使用了CSS3的圓角樣式來實現的，因此注意對於IE8以及其如下版本不支持，是沒有圓角效果的。
Bootstrap框架爲了你們更好的維護圖像的樣式，一樣將這部分樣式獨立出來：
一、LESS版本，能夠查閱scaffolding.less
二、Sass版本，能夠查閱_scaffolding.scss
你們能夠修改其中之一，從新編譯就能夠獲得本身須要的圖片樣式效果。
圖標（一）
200個icon：
這裏說的圖標就是Web製做中常看到的小icon圖標，能夠說這些小icon圖標是一個優秀Web中不可缺乏的一部分，起到畫龍點睛的效果。在Bootstrap框架中也爲你們提供了近200個不一樣的icon圖片，而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。
放心使用：
在具體介紹Bootstrap的icon圖標以前，咱們首先要感謝glyphicons.com網站，由於Bootstrap框架中圖標都是glyphicons.com這個商業網站提供的，而且免費受權給Bootstrap框架使用，因此你們能夠放心使用在本身的項目當中。
Bootstrap框架將內部樣式也提取出來：
一、LESS版本：對應源文件爲glyphicons.less文件
二、Sass版本：對應源文件爲_glyphicons.scss文件
三、編譯後的Bootstrap版本：查看bootstrap.css文件第2375行～第2992行
原理分析：
Bootstrap框架中的圖標都是字體圖標，其實現原理就是經過@font-face屬性加載了字體。
/*源碼請查看bootstrap.css文件第2357行～第2380行*/
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
你們或許會問，這些字體我去哪裏獲取。若是你是從前面一直閱讀過來，咱們在介紹文件結構那一節就已介紹過。在Bootstrap框架中有一個fonts的目錄，這個目錄中提供的字體文件就是用於製做icon的字體文件。
自定義完字體以後，須要對icon設置一個默認樣式，在Bootstrap框架中是經過給元素添加「glyphicon」類名來實現，而後經過僞元素「:before」的「content」屬性調取對應的icon編碼：
/*源碼請查看bootstrap.css文件第2381行～第2992行*/
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
….
圖標（二）
在網頁中使用圖標也很是的簡單，在任何內聯元素上應用所對應的樣式便可：
<span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-asterisk"></span> <span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-cloud"></span>
運行效果以下或查看右側結果窗口：
全部icon都是以」glyphicon-」前綴的類名開始，而後後綴表示圖標的名稱。具體說明以下：
全部名稱查看：
請點擊：http://getbootstrap.com/components/#glyphicons 連接查閱或根據bootstrap.css文件第2393行～第2992行查閱。
特別說明：
除了使用glyphicon.com提供的圖標以外，還可使用第三方爲Bootstrap框架設計的圖標字體，如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介紹的同樣，不過記得將字體下載到你本地。 感興趣的能夠閱讀官網相關介紹。
實現原理
網格系統的實現原理很是簡單，僅僅是經過定義容器大小，平分12份(也有平分紅24份或32份，但12份是最多見的)，再調整內外邊距，最後結合媒體查詢，就製做出了強大的響應式網格系統。Bootstrap框架中的網格系統就是將容器平分紅12份。
在使用的時候你們能夠根據實際狀況從新編譯LESS（或Sass）源碼來修改12這個數值（也就是換成24或32，固然你也能夠分紅更多，但不建議這樣使用）。
（這一章節注意效果要在全屏狀態下查看，鼠標滑過結果窗口時可單擊出現的全屏按鈕）
工做原理
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>
三、具體內容應當放置在列容器（column）以內，並且只有列（column）才能夠做爲行容器(.row)的直接子元素
四、經過設置內距（padding）從而建立列與列之間的間距。而後經過爲第一列和最後一列設置負值的外距（margin）來抵消內距(padding)的影響
爲了更好的理解Bootstrap框架的網格系統工做原理，咱們來看一張草圖：
簡單對圖解釋一下：
一、最外邊框，帶有一大片白色區域，就是至關於瀏覽器的可視區域。在Bootstrap框架的網格系統中帶有響應式效果，其帶有四種類型的瀏覽器（超小屏，小屏，中屏和大屏），其斷點（像素的分界點）是768px、992px和1220px。
二、第二個邊框(1)至關於容器(.container)。針對不一樣的瀏覽器分辨率，其寬度也不同：自動、750px、970px和1170px。在bootstrap.css的第736行～第756行進行設置：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media (min-width: 768px) {
.container {
width: 750px;
}
@media (min-width: 992px) {
.container {
width: 970px;
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
三、２號橫條闡述的是，將容器的行（.row）平分了12等份，也就是列。每一個列都有一個「padding-left:15px」(圖中粉紅色部分)和一個「padding-right:15px」(圖中紫色部分)。這樣也致使了第一個列的padding-left和最後一列的padding-right佔據了總寬度的30px，從而導致頁面不美觀，固然，若是你須要留有必定的間距，這個作法是不錯的。如bootstrap.css中第767行~第772行所示：
.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 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
四、３號橫條就是行容器(.row),其定義了「margin-left」和」margin-right」值爲」-15px」，用來抵消第一個列的左內距和最後一列的右內距。在bootstrap.css的第763行~第767行能夠看到：
.row {
margin-right: -15px;
margin-left: -15px;
五、將行與列給合在一塊兒就能看到橫條4的效果。也就是咱們指望看到的效果，第一列和最後一列與容器（.container）之間沒有間距。
橫條５只是想向你們展現，你能夠根據須要，任意組合列與列，只是他們的組合數之和不要超過總列數。
基本用法
網格系統用來佈局，其實就是列的組合。Bootstrap框架的網格系統中有四種基本的用法。因爲Bootstrap框架在不一樣屏幕尺寸使用了不一樣的網格樣式，在這一節中所涉及到的示例，咱們都以中屏（970px）爲例進行介紹，其餘屏幕的使用也相似這一種。關於屏幕尺寸以下圖：
一、列組合
列組合簡單理解就是更改數字來合併列（原則：列總和數不能超12），有點相似於表格的colspan屬性，例如：
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-6">.col-md-6</div> <div class="col-md-3">.col-md-3</div> </div> </div>
使用上面的結構，你將看到下圖的效果：
(在右側結果窗口中查看時須要設置爲全屏)
實現列組合方式很是簡單，只涉及兩個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%;
}
列偏移
有的時候，咱們不但願相鄰的兩個列緊靠在一塊兒，但又不想使用margin或者其餘的技術手段來。這個時候就可使用列偏移（offset）功能來實現。使用列偏移也很是簡單，只須要在列元素上添加類名「col-md-offset-*」(其中星號表明要偏移的列組合數)，那麼具備這個類名的列就會向右偏移。例如，你在列元素上添加「col-md-offset-4」，表示該列向右移動4個列的寬度。
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-2 col-md-offset-4">列向右移動四列的間距</div> <div class="col-md-2">.col-md-3</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div> </div> </div>
如上面的示例代碼，獲得的效果以下或在最右側結果窗口中能夠看到(鼠標移到結果窗口，單擊出現的全屏按鈕):
實現原理很是簡單，就是利用十二分之一（1/12）的margin-left。而後有多少個offset，就有多少個margin-left。在bootstrap.css中第1205行～1241行所示：
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}
注意：
不過有一個細節須要注意，使用」col-md-offset-*」對列進行向右偏移時，要保證列與偏移列的總數不超過12，否則會致列斷行顯示，如：
<div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-3 col-md-offset-3">col-md-offset-3</div> <div class="col-md-4">col-md-4</div> </div>
上面代碼中列和偏移列總數爲3+3+3+4 = 13>12，因此發生了列斷行。
如上面的示例代碼，獲得的效果以下或在最右側結果窗口中能夠看到(鼠標移到結果窗口，單擊出現的全屏按鈕):
列排序
列排序其實就是改變列的方向，就是改變左右浮動，而且設置浮動的距離。在Bootstrap框架的網格系統中是經過添加類名「col-md-push-*」和「col-md-pull-*」 (其中星號表明移動的列組合數)。
咱們來看一個簡單的示例：
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> </div>
默認狀況之下，上面的代碼效果以下：
「col-md-4」居左，「col-md-8」居右，若是要互換位置，須要將「col-md-4」向右移動８個列的距離，也就是8個offset ,也就是在「<div class=「col-md-4」>」添加類名「col-md-push-8」，調用其樣式。
也要將「col-md-8」向左移動４個列的距離，也就是4個offset，在「<div class=」col-md-8」>」上添加類名「col-md-pull-4」：
Bootstrap僅經過設置left和right來實現定位效果。在boostrap.css文件的第1127行~第1204行能夠看到具體的代碼：
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: 0;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: 0;
}
列的嵌套
Bootstrap框架的網格系統還支持列的嵌套。你能夠在一個列中添加一個或者多個行（row）容器，而後在這個行容器中插入列（像前面介紹的同樣使用列）。但在列容器中的行容器（row），寬度爲100%時，就是當前外部列的寬度。來看一個簡單示例：
<div class="container"> <div class="row"> <div class="col-md-8"> 個人裏面嵌套了一個網格 <div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div> </div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8"> 個人裏面嵌套了一個網格 <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> </div> </div> </div>
效果以下：
注意：嵌套的列總數也須要遵循不超過12列。否則會形成末位列換行顯示。
下拉菜單（基本用法）
小夥伴們注意，在Bootstrap框架中的下拉菜單組件是一個獨立的組件，根據不一樣的版本，它對應的文件：
☑ LESS版本：對應的源碼文件爲 dropdowns.less
☑ Sass版本：對應的源碼文件爲 _dropdowns.scss
☑ 編譯後的Bootstrap版本：查看bootstrap.css文件第3004行～第3130行
在使用Bootstrap框架的下拉菜單時，必須調用Bootstrap框架提供的bootstrap.js文件。固然，若是你使用的是未編譯版本，在js文件夾下你能找到一個名爲「dropdown.js」的文件。你也能夠調用這個js文件。不過在咱們的教程中，咱們統一調用壓縮好的「bootstrap.min.js」文件：
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
特別聲明：由於Bootstrap的組件交互效果都是依賴於jQuery庫寫的插件，因此在使用bootstrap.min.js以前必定要先加載jquery.min.js纔會生效果。
咱們先來看官網上一個簡單的示例：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> … <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div>
使用方法：
在使用Bootstrap框架中的下拉菜單組件時，其結構運用的正確與否很是的重要，若是結構和類名未使用正確，直接影響組件是否能正常運用。咱們來簡單的看看：
一、使用一個名爲「dropdown」的容器包裹了整個下拉菜單元素，示例中爲:
<div class="dropdown"></div>
二、使用了一個<button>按鈕作爲父菜單，而且定義類名「dropdown-toggle」和自定義「data-toggle」屬性，且值必須和最外容器類名一致，此示例爲:
data-toggle="dropdown"
三、下拉菜單項使用一個ul列表，而且定義一個類名爲「dropdown-menu」，此示例爲:
<ul class="dropdown-menu">
下拉菜單（原理分析）
Bootstrap框架中的下拉菜單組件，其下拉菜單項默認是隱藏的，以下所示：
由於「dropdown-menu」默認樣式設置了「display:none」，其詳細源碼請查看bootstrap.css文件第3010行～第3029行：
.dropdown-menu {
position: absolute;/*設置絕對定位，相對於父元素div.dropdown*/
top: 100%;/*讓下拉菜單項在父菜單項底部，若是父元素不設置相對定位，該元素相對於body元素*/
left: 0;
z-index: 1000;/*讓下拉菜單項不被其餘元素遮蓋住*/
display: none;/*默認隱藏下拉菜單項*/
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
當用戶點擊父菜單項時，下拉菜單將會被顯示出來，以下所示：
當用戶再次點擊時，下拉菜單將繼續隱藏，以下所示：
原理分析：
如今咱們來分析一下實現原理，很是簡單，經過js技術手段，給父容器「div.dropdown」添加或移除類名「open」來控制下拉菜單顯示或隱藏。也就是說，默認狀況，「div.dropdown」沒有類名「open」，當用戶第一次點擊時，「div.dropdown」會添加類名「open」；當用戶再次點擊時，「div.dropdown」容器中的類名「open」又會被移除。咱們能夠經過瀏覽器的firebug查看整個過程：
默認狀況：
用戶第一次點擊：
用戶再次點擊：
在bootstrap.css文件第3076行～第3078行，咱們能夠很容易發現：
.open > .dropdown-menu {
display: block;
}
下拉菜單（下拉分隔線）
在Bootstrap框架中的下拉菜單還提供了下拉分隔線，假設下拉菜單有兩個組，那麼組與組之間能夠經過添加一個空的<li>，而且給這個<li>添加類名「divider」來實現添加下拉分隔線的功能。對應的樣式代碼：
/*源碼bootstrap.css文件第3034行～第3039行*/
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
效果以下：
下拉菜單（菜單標題）
上一小節講解經過添加「divider」能夠將下拉菜單分組，爲了讓這個分組更明顯，還能夠給每一個組添加一個頭部（標題）。以下：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">第一部分菜單頭部</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> … <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜單頭部</li> … <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div>
對應的樣式以下：
/*查看bootstrap.css文件第3090行～第3096行*/
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #999;
}
運行效果以下：
下拉菜單（對齊方式）
實現右對齊方法：
Bootstrap框架中下拉菜單默認是左對齊，若是你想讓下拉菜單相對於父容器右對齊時，能夠在「dropdown-menu」上添加一個「pull-right」或者「dropdown-menu-right」類名，以下所示：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1"> … </ul> </div>
上面代碼中的「pull-right」類能夠用「dropdown-menu-right」代替，兩個類的做用是同樣的，可從下面的源代碼中看出。
實現原理：
對應的樣式以下：
/*源碼請查看bootstrap.css文件第3030行～第3033行和3082行～第3085行*/
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
同時必定要爲.dropdown添加float:leftcss樣式。
.dropdown{
float: left;
}
運行效果以下所示：
下拉菜單與父容器左邊對齊:
與此同時，還有一個類名恰好與「dropdown-menu-right」相反的類名「dropdown-menu-left」，其效果就是讓下拉菜單與父容器左邊對齊，其實就是默認效果。
/*請查看bootstrap.css文件第3086行～第3089行*/
.dropdown-menu-left {
right: auto;
left: 0;
}
下拉菜單（菜單項狀態）
下拉菜單項的默認的狀態（不用設置）有懸浮狀態（:hover）和焦點狀態（:focus）：
/*查看bootstrap.css文件第3049行～第3054行*/
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
下拉菜單項除了上面兩種狀態，還有當前狀態（.active）和禁用狀態（.disabled）。這兩種狀態使用方法只須要在對應的菜單項上添加對應的類名：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> …. <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li> </ul> </div>
運行效果以下：
對應的樣式代碼也很是簡單：
/*請查看bootstrap.css文件第3055行～第3075行*/
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
text-decoration: none;
background-color: #428bca;
outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: #999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
按鈕（按鈕組）
單個按鈕在Web頁面中的運用有時候並不能知足咱們的業務需求，經常會看到將多個按鈕組合在一塊兒使用，好比富文本編輯器裏的一組小圖標按鈕等。那麼在這一節中，咱們主要向你們介紹Bootstrap框架爲你們提供的按鈕組組件。
源碼查詢：
按鈕組也是一個獨立的組件，因此能夠找到對應的源碼文件：
☑ LESS版本：對應的源文件爲buttons.less
☑ Sass版本：對應的源文件爲_buttons.scss
☑ CSS版本：對應bootstrap.css文件第3131行～第3291行
使用方法：
按鈕組和下拉菜單組件同樣，須要依賴於button.js插件才能正常運行。不過咱們一樣能夠直接只調用bootstrap.js文件。由於這個文件已集成了button.js插件功能。
對於結構方面，很是的簡單。使用一個名爲「btn-group」的容器，把多個按鈕放到這個容器中。以下所示：
<div class="btn-group"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-step-backward"></span> </button> … <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-step-forward"></span> </button> </div>
運行效果以下所示：
除了可使用<button>元素以外，還可使用其餘標籤元素，好比<a>標籤。惟一要保證的是：無論使用什麼標籤，「.btn-group」容器裏的標籤元素須要帶有類名「.btn」。
按鈕組實現源碼以下：
/*查看bootstrap.css文件第3131行～第3161行*/
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
}
從效果圖上咱們能夠看出，按鈕組四個角都是圓角（支持CSS3的瀏覽器），但有的小夥伴會問，咱們日常製做網頁時每一個按鈕都是帶有圓角，而在按鈕組中的按鈕，除了第一個和最後一個具備邊上的圓角以外，其餘的按鈕沒有圓角，它是怎麼實現的呢？其實實現方法很是簡單：
一、默認全部按鈕都有圓角
二、除第一個按鈕和最後一個按鈕（下拉按鈕除外），其餘的按鈕都取消圓角效果
三、第一個按鈕只留左上角和左下角是圓角
四、最後一個按鈕只留右上角和右下角是圓角
對應的源碼以下：
/*查看bootstrap.css文件第3174行～第3203行*/
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group > .btn:first-child {
margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
按鈕（按鈕工具欄）
在富文本編輯器中，將按鈕組分組排列在一塊兒，好比說複製、剪切和粘貼一組；左對齊、中間對齊、右對齊和兩端對齊一組，以下圖所示：
那麼Bootstrap框架按鈕工具欄也提供了這樣的製做方法，你只須要將按鈕組「btn-group」按組放在一個大的容器「btn-toolbar」中，以下所示：
<div class="btn-toolbar"> <div class="btn-group"> … </div> <div class="btn-group"> … </div> <div class="btn-group"> … </div> <div class="btn-group"> … </div> </div>
實現原理主要是讓容器的多個分組「btn-group」元素進行浮動，而且組與組以前保持5px的左外距。代碼以下：
/*源碼請查閱bootstrap.css文件第3162行～第3173行*/
.btn-toolbar {
margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
margin-left: 5px;
}
注意在」btn-toolbar」上清除浮動。
/*源碼請查閱bootstrap.css文件第5062行*/
.btn-toolbar:before,
.btn-toolbar:after｛
display: table;
content: " ";
｝
.btn-toolbar:after{
clear: both;
}
運行效果以下：
按鈕組大小設置
在介紹按鈕一節中，咱們知道按鈕是經過btn-lg、btn-sm和btn-xs三個類名來調整padding、font-size、line-height和border-radius屬性值來改變按鈕大小。那麼按鈕組的大小，咱們也能夠經過相似的方法：
☑ .btn-group-lg:大按鈕組
☑ .btn-group-sm:小按鈕組
☑ .btn-group-xs:超小按鈕組
只須要在「.btn-group」類名上追加對應的類名，就能夠獲得不一樣大小的按鈕組。以下所示：
<div class="btn-toolbar"> <div class="btn-group btn-group-lg"> … </div> <div class="btn-group"> … </div> <div class="btn-group btn-group-sm"> … </div> <div class="btn-group btn-group-xs"> … </div> </div>
運行效果以下所示：
實現上圖效果樣式代碼以下：
/*源碼請查閱bootstrap.css文件第2320行～第2340行*/
.btn-lg,
.btn-group-lg> .btn{
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm> .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,
.btn-group-xs> .btn{
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
按鈕（嵌套分組）
不少時候，咱們常把下拉菜單和普通的按鈕組排列在一塊兒，實現相似於導航菜單的效果。以下所示：
使用的時候，只須要把當初製做下拉菜單的「dropdown」的容器換成「btn-group」，而且和普通的按鈕放在同一級。以下所示：
<div class="btn-group"> <button class="btnbtn-default" type="button">首頁</button> <button class="btnbtn-default" type="button">產品展現</button> <button class="btnbtn-default" type="button">案例分析</button> <button class="btnbtn-default" type="button">聯繫咱們</button> <div class="btn-group"> <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">關於咱們<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司簡介</a></li> <li><a href="##">企業文化</a></li> <li><a href="##">組織結構</a></li> <li><a href="##">客服服務</a></li> </ul> </div> </div>
實現的樣式代碼：
/*查看bootstrap.css文件第3192行～第3223行*/
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-box-shadow: none;
box-shadow: none;
}
按鈕（垂直分組）
前面看到的示例，按鈕組都是水平顯示的。但在實際運用當中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。咱們只須要把水平分組的「btn-group」類名換成「btn-group-vertical」便可。以下所示：
<div class="btn-group-vertical"> <button class="btnbtn-default" type="button">首頁</button> <button class="btnbtn-default" type="button">產品展現</button> <button class="btnbtn-default" type="button">案例分析</button> <button class="btnbtn-default" type="button">聯繫咱們</button> <div class="btn-group"> <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">關於咱們<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司簡介</a></li> <li><a href="##">企業文化</a></li> <li><a href="##">組織結構</a></li> <li><a href="##">客服服務</a></li> </ul> </div> </div>
運行的效果以下：
實現垂直分組的樣式代碼：
/*請查看bootstrap.css文件第3234行～第3276行*/
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
和水平分組按鈕不同的是：
☑ 水平分組按鈕第一個按鈕左上角和左下角具備圓角以及最後一個按鈕右上角和右下角具備圓角
☑ 垂直分組按鈕第一個按鈕左上角和右上角具備圓角以及最後一個按鈕左下角和右下角具備圓角
按鈕（等分按鈕）
等分按鈕的效果在移動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組裏面的每一個按鈕平分整個容器寬度。例如，若是你按鈕組裏面有五個按鈕，那麼每一個按鈕是20%的寬度，若是有四個按鈕，那麼每一個按鈕是25%寬度，以此類推。
等分按鈕也常被稱爲是自適應分組按鈕，其實現方法也很是的簡單，只須要在按鈕組「btn-group」上追加一個「btn-group-justified」類名，以下所示：
<div class="btn-wrap"> <div class="btn-group btn-group-justified"> <a class="btnbtn-default" href="#">首頁</a> <a class="btnbtn-default" href="#">產品展現</a> <a class="btnbtn-default" href="#">案例分析</a> <a class="btnbtn-default" href="#">聯繫咱們</a> </div> </div>
運行效果以下：
實現原理很是簡單，把「btn-group-justified」模擬成表格（display:table），並且把裏面的按鈕模擬成表格單元格（display:table-cell）。具體樣式代碼以下：
/*源碼請查看bootstrap.css文件第3277行～第3291行*/
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group-justified > .btn-group .btn {
width: 100%;
}
特別聲明：在製做等分按鈕組時，請儘可能使用<a>標籤元素來製做按鈕，由於使用<button>標籤元素時，使用display:table在部分瀏覽器下支持並不友好。
按鈕下拉菜單
按鈕下拉菜單僅從外觀上看和上一節介紹的下拉菜單效果基本上是同樣的。不一樣的是在普通的下拉菜單的基礎上封裝了按鈕（.btn）樣式效果。簡單點說就是點擊一個按鈕，會顯示隱藏的下拉菜單。
按鈕下拉菜單其實就是普通的下拉菜單，只不過把「<a>」標籤元素換成了「<button>」標籤元素。惟一不一樣的是外部容器「div.dropdown」換成了「div.btn-group」。以下所示：
<div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按鈕下拉菜單項</a></li> <li><a href="##">按鈕下拉菜單項</a></li> <li><a href="##">按鈕下拉菜單項</a></li> <li><a href="##">按鈕下拉菜單項</a></li> </ul> </div>
實現樣式代碼以下：
/*查看bootstrap.css文件第3204行～第3223行*/
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-box-shadow: none;
box-shadow: none;
}
運行的效果以下：
按鈕的向下向上三角形
按鈕的向下三角形，咱們是經過在<button>標籤中添加一個「<span>」標籤元素，而且命名爲「caret」:
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>
這個三角形徹底是經過CSS代碼來實現的：
/*源碼請查看bootstrap.css文件第2994行～第3003行*/
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
另外在按鈕中的三角形「caret」作了必定的樣式處理：
/*源碼查看bootstrap.css文件第3224行～第3233行*/
.btn .caret {
margin-left: 0;
}
.btn-lg .caret {
border-width: 5px 5px 0;
border-bottom-width: 0;
}
.dropup .btn-lg .caret {
border-width: 0 5px 5px;
}
有的時候咱們的下拉菜單會向上彈起（接下來一個小節會介紹），這個時候咱們的三角方向須要朝上顯示，實現方法：須要在「.btn-group」類上追加「dropup」類名（這也是作向上彈起下拉菜單要用的類名）。
/*源碼請查看bootstrap.css文件第3109行～第3114行*/
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px solid;
}
上面代碼中能夠看出，向上三角與向下三角的區別：其實就是改變了一個border-bottom的值。
下面是向上彈起菜單的例子：
<div class="btn-group dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按鈕下拉菜單項</a></li> <li><a href="##">按鈕下拉菜單項</a></li> <li><a href="##">按鈕下拉菜單項</a></li> <li><a href="##">按鈕下拉菜單項</a></li> </ul> </div>
運行效果以下：
向上彈起的下拉菜單
有些菜單是須要向上彈出的，好比說你的菜單在頁面最底部，而這個菜單正好有一個下拉菜單，爲了讓用戶有更好的體驗，不得不讓下拉菜單向上彈出。在Bootstrap框架中專門爲這種效果提代了一個類名「dropup」。使用方法正如前面所示，只須要在「btn-group」上添加這個類名（固然，若是是普通向上彈出下拉菜單，你只須要在「dropdown」類名基礎上追加「dropup」類名便可）。
<div class="btn-group dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按鈕下拉菜單項</a></li> <li><a href="##">按鈕下拉菜單項</a></li> <li><a href="##">按鈕下拉菜單項</a></li> <li><a href="##">按鈕下拉菜單項</a></li> </ul> </div>
運行的效果以下：
/*源碼請查閱bootstrap.css文件第3115行～第3120行*/
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
從上面的例子中能夠看出，實現方法爲：主要將「dropdown-menu」的top值變成了auto，而把bottom值換成了100%：
導航（基礎樣式）
導航對於一位前端人員來講並不陌生。能夠說導航是一個網站重要的元素組件之一，能夠便於用戶查找網站所提供的各項功能服務。導航的製做方法也是千奇百怪，五花八門。在這一節中將向你們介紹如何使用Bootstrap框架製做各式各樣的導航。
在Bootstrap框架將導航獨立出來成爲一個導航組件，根據不一樣的版本，能夠找到對應的源碼：
☑ LESS版本：對應的源文件是navs.less
☑ Sass版本：對應的源文件是_navs.scss
☑ 編譯後版本：對應源碼是bootstrap.css文件第3450行～第3641行
導航基礎樣式
Bootstrap框架中製做導航條主要經過「.nav」樣式。默認的「.nav」樣式不提供默認的導航樣式，必須附加另一個樣式纔會有效，好比「nav-tabs」、「nav-pills」之類。好比右側代碼編輯器中就有一個tab導航條的例子，他的實現方法就是爲ul標籤加入.nav和nav-tabs兩個類樣式。
/*源碼請查閱bootstrap.css文件第3450行~第3493行*/
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav> li {
position: relative;
display: block;
}
.nav> li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav> li >a:hover,
.nav> li >a:focus {
text-decoration: none;
background-color: #eee;
}
.nav>li.disabled> a {
color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
color: #999;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
background-color: #eee;
border-color: #428bca;
}
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.nav> li > a >img {
max-width: none;
}
導航（標籤形tab導航）
標籤形導航，也稱爲選項卡導航。特別是在不少內容分塊顯示的時，使用這種選項卡來分組十分適合。
標籤形導航是經過「nav-tabs」樣式來實現。在製做標籤形導航時須要在原導航「nav」上追加此類名，如：
<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>
運行的效果以下所示：
實現原理很是的簡單，將菜單項（li）按塊顯示，而且讓他們在同一水平上排列，而後定義非高亮菜單的樣式和鼠標懸浮效果。代碼以下：
/*源碼請查閱bootstrap.css文件第3494行～第3509行*/
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}
其實上例的效果和咱們平時看到的選項卡效果並不一致。通常狀況之下，選項卡教會有一個當前選中項。其實在Bootstrap框架也相應提供了。假設咱們想讓「Home」項爲當前選中項，只須要在其標籤上添加類名「class="active"」便可：
<ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> … </ul>
運行效果以下：
對應樣式代碼以下：
/*源碼請查閱bootstrap.css文件第3510行～第3518行*/
.nav-tabs >li.active> a,
.nav-tabs >li.active>a:hover,
.nav-tabs >li.active>a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
除了當前項以外，有的選項卡還帶有禁用狀態，實現這樣的效果，只須要在標籤項上添加「class="disabled"」便可：
<ul class="nav nav-tabs"> <li class="active"><a href="##">Home</a></li> … <li class="disabled"><a href="##">Responsive</a></li> </ul>
運行效果以下：
實現這個效果的樣式，在默認樣式「.nav」中就帶有：
/*源碼請查看bootstrap.css文件第3469行～第3478行*/
.nav>li.disabled> a {
color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
color: #999;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
導航（膠囊形(pills)導航）
膠囊形（pills）導航聽起來有點彆扭，由於其外形看起來有點像膠囊形狀。但其更像咱們平時看到的大衆形導航。當前項高亮顯示，並帶有圓角效果。其實現方法和「nav-tabs」相似，一樣的結構，只須要把類名「nav-tabs」換成「nav-pills」便可：
<ul class="nav nav-pills"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
實現效果樣式代碼：
/*源碼請查閱bootstrap.css文件第3563行～第3577行*/
.nav-pills > li {
float: left;
}
.nav-pills > li > a {
border-radius: 4px;
}
.nav-pills > li + li {
margin-left: 2px;
}
.nav-pills >li.active> a,
.nav-pills >li.active>a:hover,
.nav-pills >li.active>a:focus {
color: #fff;
background-color: #428bca;
}
導航（垂直堆疊的導航）
在實際運用當中，除了水平導航以外，還有垂直導航，就相似前面介紹的垂直排列按鈕同樣。製做垂直堆疊導航只須要在「nav-pills」的基礎上添加一個「nav-stacked」類名便可：
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
運行效果以下：
垂直堆疊導航與膠囊形導航相比，主要是讓導航項不浮動，讓其垂直排列，而後給相鄰導航項留有必定的間距：
/*源碼請查閱bootstrap.css文件第3578行～第3584行*/
.nav-stacked > li {
float: none;
}
.nav-stacked > li + li {
margin-top: 2px;
margin-left: 0;
}
你們是否還記得，在下拉菜單一節中，下拉菜單組與組之間有一個分隔線。其實在垂直堆疊導航也具備這樣的效果，只須要添加在導航項之間添加「<li class=」nav-divider」></li>」便可：
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="nav-divider"></li> <li class="disabled"><a href="##">Responsive</a></li> </ul>
運行效果以下：
實現樣式：
/*源碼請查閱bootstrap.css文件第3485行～3490行*/
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
自適應導航（使用）
自適應導航指的是導航佔據容器所有寬度，並且菜單項能夠像表格的單元格同樣自適應寬度。自適應導航和前面使用「btn-group-justified」製做的自適應按鈕組是同樣的。只不過在製做自適應導航時更換了另外一個類名「nav-justified」。固然他須要和「nav-tabs」或者「nav-pills」配合在一塊兒使用。如：
<ul class="nav nav-tabs nav-justified"> <li class="active"><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>
運行效果以下：(可單擊全屏查看)
自適應導航（實現原理）
實現原理並不難，列表（<ul>）上設置寬度爲「100%」，而後每一個菜單項(<li>)設置了「display:table-cell」，讓列表項以模擬表格單元格的形式顯示：
/*源碼請查閱bootstrap.css文件第3585行～第3607行*/
.nav-justified {
width: 100%;
}
.nav-justified > li {
float: none;
}
.nav-justified > li > a {
margin-bottom: 5px;
text-align: center;
}
.nav-justified > .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: 768px) {
.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-justified > li > a {
margin-bottom: 0;
}
}
這裏有一個媒體查詢條件：「@media (min-width:768px){…}」表示自適應導航僅在瀏覽器視窗寬度大於768px才能按上圖風格顯示。當你的瀏覽器視窗寬度小於768px的時候，將會按下圖的風格展現：
注：在最右側代碼窗口中設置全屏能夠切換效果。
從上圖效果能夠得知，「nav-tabs」和「nav-justified」配合在一塊兒使用，也就是自適應選項卡導航，瀏覽器視窗寬度小於768px時，在樣式上作了另外的處理。
/*源碼請查閱bootstrap.css文件第3519行～第3562行*/
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0;
}
.nav-tabs.nav-justified > li {
float: none;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 5px;
text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
.nav-tabs.nav-justified > li > a {
margin-right: 0;
border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
border: 1px solid #ddd;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li > a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
border-bottom-color: #fff;
}
}
導航加下拉菜單（二級導航）
前面介紹的都是使用Bootstrap框架製做一級導航，但不少時候，在Web頁面中是離不開二級導航的效果。那麼在Bootstrap框架中製做二級導航就更容易了。只須要將li看成父容器，使用類名「dropdown」，同時在li中嵌套另外一個列表ul，使用前面介紹下拉菜單的方法就能夠：
<ul class="nav nav-pills"> <li class="active"><a href="##">首頁</a></li> <li class="dropdown"> <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">CSS3</a></li> … </ul> </li> <li><a href="##">關於咱們</a></li> </ul>
運行效果以下：
經過瀏覽器調試工具，不難發現，點擊有二級導航的菜單項，會自動添加「open」類名，再次點擊就會刪除添加的「open」類名：
簡單點來講，就是依靠這個類名來控制二級導航顯示與否，而且設置了背景色和邊框：
/*源碼查看bootstrap.css文件第3479行～3484行*/
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
background-color: #eee;
border-color: #428bca;
}
你們回憶一下，在製做下拉菜單時，能夠用分隔線，那麼在二級導航中是否能夠呢？咱們一塊兒來看看：
不用再說太多，只須要添加「<li class=」nav-divider」></li>」這樣的一個空標籤就能夠了。
運行效果以下：
/*源碼請查看bootstrap.css文件第3485行～第3490行*/
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
麪包屑式導航
麪包屑(Breadcrumb)通常用於導航，主要是起的做用是告訴用戶如今所處頁面的位置（當前位置）。在Bootstrap框架中麪包屑也是一個獨立模塊組件：
- LESS版本：對應源文件breadcrumbs.less
- Sass版本：對應源文件_breadcrumbs.scss
- 編譯出來的版本：源碼對應bootstrap.css文件第4112行～第4129行
使用方法：
使用方式就很簡單，爲ol加入breadcrumb類：
<ol class="breadcrumb"> <li><a href="#">首頁</a></li> <li><a href="#">個人書</a></li> <li class="active">《圖解CSS3》</li> </ol>
實現原理：
看來不錯吧！做者是使用li+li:before實現li與li之間的分隔符，因此這種方案在IE低版本就慘了（不支持）。
/*源碼查看bootstrap.css文件第4112行～第4129行*/
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb> li {
display: inline-block;
}
.breadcrumb> li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
.breadcrumb> .active {
color: #999;
}
- 1. bootstrap基本整理1
- 2. Bootstrap Table使用整理（一）
- 3. Bootstrap 整理代碼風格
- 4. bootstrap基本整理3
- 5. Bootstrap Table使用整理（三）
- 6. Bootstrap Table使用整理（二）
- 7. bootstrap基本整理2
- 8. 【Bootstrap】1.初識Bootstrap
- 9. 關於BOOTSTRAP的整理和理解
- 10. Javascript整理1
- 更多相關文章...
- • 錯誤處理 - RUST 教程
- • PHP 完整表單實例 - PHP教程
- • Docker 清理命令
- • ☆技術問答集錦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。