Bootstrap

時間 2019-11-11

標籤 bootstrap 欄目 Bootstarp 简体版

原文原文鏈接

第一章：認識Bootstrapcss

Bootstrap的特色：靈活、優雅、可擴展。前端

Bootstrap的定義：簡單靈活的用於搭建Web頁面的HTML、CSS、JavaScript工具集。jquery

Bootstrap中的JS插件依賴於jQuery，所以jQuery要在Bootstrap以前引用。ios

Bootstrap不支持IE8。git

第二章：排版程序員

1、全局樣式：github

Bootstrap再也不一味的清零，而是注重重置可能產生的樣式，保留和堅持部分瀏覽器的基礎樣式。web

2、標題：bootstrap

Bootstrap定義標題也使用<h1>到<h6>標籤，可是進行了如下顯著的優化重置：後端

一、從新設置了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。

Boostrap使用<small>標籤來製做副標題。

例如：<h1>這裏是1級標題<small>這裏是副標題</small></h1>

3、段落

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

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

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

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

四、字體爲"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對咱們中文並不太合適，但在實際項目中，你們能夠根據本身的需求進行重置，在此咱們不作過多闡述，咱們回到這裏。該設置都定義在<body>元素上，因爲這幾個屬性都是繼承屬性，因此Web頁面中文本（包括段落p元素）如無重置都會具備這些樣式效果。

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元素具備一個上下外邊距，而且保持一個行高的高度）：

p {

margin: 0 0 10px;

}

4、強調文本

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

若是想讓一個段落p突出顯示，能夠經過添加類名「.lead」實現，其做用就是增大文本字號，加粗文本，並且對行高和margin也作相應的處理。用法以下：

<p>我是普通文本，個人樣子長成這樣我是普通文本，個人樣子長成這樣我是普通文本，</p>

<p class="lead">我是特地要突出的文本，個人樣子成這樣。我是特地要突出的文本，個人樣子長成這樣。</p>

「.lead」對應的樣式以下：

.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>給文本作突出樣式處理。

b,strong {

font-weight: bold; /*文本加粗*/

}

small,.small {

font-size: 85%; /*標準字體的85%,也就是14px * 0.85px，差很少12px*/

}

cite {

font-style: normal;

}

5、粗體

粗體就是給文本加粗，在普通的元素中咱們通常經過font-weight設置爲bold關鍵詞給文本加粗。在Bootstrap中，可使用<b>和<strong>標籤讓文本直接加粗。

b,strong {

font-weight: bold; /*文本加粗*/

}

6、斜體

在排版中，除了用加粗來強調突出的文本以外，還可使用斜體。斜體相似於加粗同樣，除了能夠給元素設置樣式font-style值爲italic實現以外，在Bootstrap中還能夠經過使用標籤<em>或<i>來實現。

例如，下面的代碼使用了<em>和<i>標籤訂義了強調文本：

<p>我在慕課網上跟<em>大漠</em>一塊兒學習<i>Bootstrap</i>的使用。我必定要學會<i>Bootstrap</i>。</p>

7、強調相關的類

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

.text-muted：提示，使用淺灰色（#999）

.text-primary：主要，使用藍色（#428bca）

.text-success：成功，使用淺綠色(#3c763d)

.text-info：通知信息，使用淺藍色（#31708f）

.text-warning：警告，使用黃色（#8a6d3b）

.text-danger：危險，使用褐色（#a94442）

8、文本對其風格

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

☑ 左對齊，取值left

☑ 居中對齊，取值center

☑ 右對齊，取值right

☑ 兩端對齊，取值justify

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

☑ .text-left：左對齊

☑ .text-center：居中對齊

☑ .text-right：右對齊

☑ .text-justify：兩端對齊

9、列表簡介

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

無序列表

<ul>

</ul>

有序列表

<ol>

</ol>

定義列表

<dl>

</dl>

Bootstrap根據平時的使用情形提供了六種形式的列表：

☑ 普通列表

☑ 有序列表

☑ 去點列表

☑ 內聯列表

☑ 描述列表

☑ 水平描述列表

10、列表

無序列表和有序列表使用方式和咱們平時使用的同樣（無序列表使用ul，有序列表使用ol標籤），在樣式方面，Bootstrap只是在此基礎上作了一些細微的優化

ul,

ol {

margin-top: 0;

margin-bottom: 10px;

}

ul ul,

ol ul,

ul ol,

ol ol {

margin-bottom: 0;

}

從源碼上咱們能夠得知，Bootstrap對於列表，只是在margin上作了一些調整。咱們來看一個簡單的示例：

<ul>

</ul>

列表嵌套

在Bootstrap中列表也是能夠嵌套的，代碼以下：

<ol>

<li>

有序列表

<ol>

</ol>

</li>

</ol>

11、去點列表

小夥伴們能夠看到，在Bootstrap中默認狀況下無序列表和有序列表是帶有項目符號的，但在實際工做中不少時候，咱們的列表是不須要這個編號的，好比說用無序列表作導航的時候。Bootstrap爲衆多開發者考慮的很是周道，經過給無序列表添加一個類名「.list-unstyled」,這樣就能夠去除默認的列表樣式的風格。

.list-unstyled {

padding-left: 0;

list-style: none;

}

從示例中能夠看出，除了項目編號以外，還將列表默認的左邊內距也清０了。

具體使用，咱們來看簡單的兩個示例：

<ul>

<li>

項目列表

<ul>

<li>帶有項目符號</li>

</ul>

</li>

<li>

項目列表

<li>不帶項目符號</li>

</ul>

</li>

</ul>

<ol>

<li>

項目列表

<ol>

<li>帶有項目編號</li>

</ol>

</li>

<li>

項目列表

<li>不帶項目編號</li>

</ol>

</li>

</ol>

12、內聯列表

Bootstrap像去點列表同樣，經過添加類名「.list-inline」來實現內聯列表，簡單點說就是把垂直列表換成水平列表，並且去掉項目符號（編號），保持水平顯示。也能夠說內聯列表就是爲製做水平導航而生。

.list-inline {

padding-left: 0;

margin-left: -5px;

list-style: none;

}

.list-inline > li {

display: inline-block;

padding-right: 5px;

padding-left: 5px;

}

看個示例：

<li>W3cplus</li>

<li>jQuery</li>

</ul>

十3、定義列表

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

dl {

margin-top: 0;

margin-bottom: 20px;

}

dt,

dd {

line-height: 1.42857143;

}

dt {

font-weight: bold;

}

dd {

margin-left: 0;

}

對於定義列表使用，其實很簡單，與咱們之前的使用定義列表的方法是相同的：

<dl>

<dt>W3cplus</dt>

<dd>一個致力於推廣國內前端行業的技術博客</dd>

<dd>一個真心在作教育的網站</dd>

</dl>

十4、列表—水平定義列表

水平定義列表就像內聯列表同樣，Bootstrap能夠給<dl>添加類名「.dl-horizontal」給定義列表實現水平顯示效果。

@media (min-width: 768px) {

.dl-horizontal dt {

float: left;

width: 160px;

overflow: hidden;

clear: left;

text-align: right;

text-overflow: ellipsis;

white-space: nowrap;

}

.dl-horizontal dd {

margin-left: 180px;

}

此處添加了一個媒體查詢。也就是說，只有屏幕大於768px的時候，添加類名「.dl-horizontal」才具備水平定義列表效果。其實現主要方式：

一、將dt設置了一個左浮動，而且設置了一個寬度爲160px

二、將dd設置一個margin-left的值爲180px，達到水平的效果

三、當標題寬度超過160px時，將會顯示三個省略號

其用法以下：

<dt>W3cplus</dt>

<dd>一個致力於推廣國內前端行業的技術博客。它以探索爲己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文</dd>

<dd>一個專業的，真心實意在作培訓的網站</dd>

<dt>我來測試一個標題，我來測試一個標題</dt>

<dd>我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果</dd>

</dl>

十5、代碼（一）

本節內容相對來講比較簡單，通常在我的博客上使用的較爲頻繁，用於顯示代碼的風格。在Bootstrap主要提供了三種代碼風格：

一、使用<code></code>來顯示單行內聯代碼

二、使用<pre></pre>來顯示多行塊代碼

三、使用<kbd></kbd>來顯示用戶輸入代碼

預編譯版本的Bootstrap將代碼的樣式單獨提取出來：

一、LESS版本，請查閱code.less文件

二、Sass版本，請查閱_code.scss文件

編譯出來的CSS代碼請查閱bootstrap.css文件第688行~第730行，因爲代碼太長，此處不一一列舉。

在使用代碼時，用戶能夠根據具體的需求來使用不一樣的類型：

一、<code>：通常是針對於單個單詞或單個句子的代碼

二、<pre>：通常是針對於多行代碼（也就是成塊的代碼）

三、<kbd>:通常是表示用戶要經過鍵盤輸入的內容

雖然不一樣的類型風格不同，但其使用方法是相似的。

code風格：

<div>Bootstrap的代碼風格有三種：

</div>

pre風格：

<div>

<pre>

<ul>

</ul>

</pre>

</div>

kbd風格：

<div>請輸入<kbd>ctrl+c</kbd>來複制代碼，而後使用<kbd>ctrl+v</kbd>來粘貼代碼</div>

無論使用哪一種代碼風格，在代碼中碰到小於號（<）要使用硬編碼「<」來替代，大於號(>)使用「>」來替代。並且對於<pre>代碼塊風格，標籤前面留多少個空格，在顯示效果中就會留多少個空格。建議在編寫HTML標籤時，就控制好。

十6、代碼（二）

正如前面所示，<pre>元素通常用於顯示大塊的代碼，並保證原有格式不變。但有時候代碼太多，並且不想讓其佔有太大的頁面篇幅，就想控制代碼塊的大小。Bootstrap也考慮到這一點，你只須要在pre標籤上添加類名「.pre-scrollable」，就能夠控制代碼塊區域最大高度爲340px，一旦超出這個高度，就會在Y軸出現滾動條。

.pre-scrollable {

max-height: 340px;

overflow-y: scroll;

}

十7、表格

表格是Bootstrap的一個基礎組件之一，Bootstrap爲表格提供了1種基礎樣式和4種附加樣式以及1個支持響應式的表格。在使用Bootstrap的表格過程當中，只須要添加對應的類名就能夠獲得不一樣的表格風格，在接下來的內容中，咱們會詳細介紹Bootstrap的表格使用。

一樣的，若是你對CSS預處理器熟悉，你可使用Bootstrap提供的預處理版本：

☑ LESS版本，對應的文件是 tables.less

☑ Sass版本，對應的文件是 _tables.scss

剛已經說了，Bootstrap爲表格不一樣的樣式風格提供了不一樣的類名，主要包括：

☑ .table：基礎表格

☑ .table-striped：斑馬線表格

☑ .table-bordered：帶邊框的表格

☑ .table-hover：鼠標懸停高亮的表格

☑ .table-condensed：緊湊型表格

☑ .table-responsive：響應式表格

十8、表格—表格行的類

Bootstrap還爲表格的行元素<tr>提供了五種不一樣的類名，每種類名控制了行的不一樣背景顏色，具體說明以下表所示：

其使用很是的簡單，只須要在<tr>元素中添加上表對應的類名，就能達到你本身須要的效果：

</tr>

特別提示：除了」.active」以外，其餘四個類名和」.table-hover」配合使用時，Bootstrap針對這幾種樣式也作了相應的懸浮狀態的樣式設置，因此若是須要給tr元素添加其餘顏色樣式時，在」.table-hover」表格中也要作相應的調整。

注意要實現懸浮狀態，須要在<table>標籤上加入table-hover類。

以下代碼：

十9、表格—基礎表格

你們對錶格並不太陌生，但對於Bootstrap中的表格如何使用，或許還有點陌生，接下來的內容，將根據不一樣的表格類型向你們介紹Bootstrap表格的實際使用方法。

對錶格的結構，跟咱們平時使用表格是同樣的：

<table>

<thead>

<tr>

…

</tr>

</thead>

<tbody>

<tr>

<td>表格單元格</td>

…

</tr>

…

</tbody>

</table>

如無特別聲明，下面介紹表格類型的時候，結構都是相似上面的代碼。

基礎表格

在Bootstrap中，對於基礎表格是經過類名「.table」來控制。若是在<table>元素中不添加任何類名，表格是無任何樣式效果的。想獲得基礎表格，咱們只須要在<table>元素上添加「.table」類名，就能夠獲得Bootstrap的基礎表格：

…

</table>

Bootstrap的基礎表格，大體長得像下圖所示的樣子：

主要源碼查看bootstrap.css文件第1402行～第1441行，因爲代碼太長，此處不一一列舉。

「.table」主要有三個做用：

☑ 給表格設置了margin-bottom:20px以及設置單元內距

☑ 在thead底部設置了一個2px的淺灰實線

☑ 每一個單元格頂部設置了一個1px的淺灰實線

二10、表格—斑馬線表格

有時候爲了讓表格更具閱讀性，須要將表格製做成相似於斑馬線的效果。簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現這種表格效果並不困難，只須要在<table class="table">的基礎上增長類名「.table-striped」便可：

…

</table>

其效果與基礎表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實現原理也很是的簡單，利用CSS3的結構性選擇器「:nth-child」來實現，因此對於IE8以及其如下瀏覽器，沒有背景條紋效果。

.table-striped > tbody > tr:nth-child(odd) > td,

.table-striped > tbody > tr:nth-child(odd) > th {

background-color: #f9f9f9;

}

二11、表格—帶邊框的表格

基礎表格僅讓表格部分地方有邊框，但有時候須要整個表格具備邊框效果。Bootstrap出於實際運用，也考慮這種表格效果，即全部單元格具備一條1px的邊框。

Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法相似，只須要在基礎表格<table class="table">基礎上添加一個「.table-bordered」類名便可：

…

</table>

.table-bordered {

border: 1px solid #ddd;/*整個表格設置邊框*/

}

.table-bordered > thead > tr > th,

.table-bordered > tbody > tr > th,

.table-bordered > tfoot > tr > th,

.table-bordered > thead > tr > td,

.table-bordered > tbody > tr > td,

.table-bordered > tfoot > tr > td {

border: 1px solid #ddd; /*每一個單元格設置邊框*/

}

.table-bordered > thead > tr > th,

.table-bordered > thead > tr > td {

border-bottom-width: 2px;/*表頭底部邊框*/

}

二12、表格—鼠標懸浮高亮的表格

當鼠標懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴用戶正在閱讀表格哪一行的數據。Bootstrap的確沒有讓你失望，他也考慮到這種效果，其提供了一個「.table-hover」類名來實現這種表格效果。

鼠標懸停高亮的表格使用也簡單，僅須要<table class="table">元素上添加類名「table-hover」便可：

…

</table>

鼠標懸浮高亮的效果主要是經過「hover」事件來實現，設置了「tr:hover」時的th、td的背景色爲新顏色。

.table-hover > tbody > tr:hover > td,

.table-hover > tbody > tr:hover > th {

background-color: #f5f5f5;

}

注：其實，鼠標懸浮高亮表格，能夠和Bootstrap其餘表格混合使用。簡單點說，只要你想讓你的表格具有懸浮高亮效果，你只要給這個表格添加「table-hover」類名就行了。例如，將前面介紹的幾種表格結合使用：

…

</table>

二十3、表格—緊湊型表格

何謂緊湊型表格，簡單理解，就是單元格沒內距或者內距較其餘表格的內距更小。換句話說，要實現緊湊型表格只須要重置表格單元格的內距padding的值。那麼在Bootstrap中，經過類名「table-condensed」重置了單元格內距值。

緊湊型表格的運用，也只是須要在<table class="table">基礎上添加類名「table-condensed」：

…

</table>

從上面效果圖能夠看出，Bootstrap中緊湊型的表格與基礎表格差異不大，由於只是將單元格的內距由8px調至5px。

.table-condensed > thead > tr > th,

.table-condensed > tbody > tr > th,

.table-condensed > tfoot > tr > th,

.table-condensed > thead > tr > td,

.table-condensed > tbody > tr > td,

.table-condensed > tfoot > tr > td {

padding: 5px;

}

正如上一小節中懸浮高亮表格中所講解的，在Bootstrap中製做表格中，能夠將上面幾種表格樣式結合在一塊兒使用，從而製做出更爲精美的表格。結合的方法也很簡單，就是在<table class="table">基礎上添加你須要的表格樣式類型。

另外從上面的示例中你們可能也發現了，無論製做哪一種表格都離不開類名「table」。因此你們在使用Bootstrap表格時，千萬注意，你的<table>元素中必定不能缺乏類名「table」。

二十4、響應式表格

隨着各類手持設備的出現，要想讓你的Web頁面適合千羅萬像的設備瀏覽，響應式設計的呼聲愈來愈高。在Bootstrap中也爲表格提供了響應式的效果，將其稱爲響應式表格。

Bootstrap提供了一個容器，而且此容器設置類名「.table-responsive」,此容器就具備響應式效果，而後將<table class="table">置於這個容器當中，這樣表格也就具備響應式效果。

Bootstrap中響應式表格效果表現爲：當你的瀏覽器可視區域小於768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大於768px時，表格底部水平滾動條就會消失。示例以下：

…

</table>

</div>

第三章：表單

1、基礎表單

表單主要功能是用來與用戶作交流的一個網頁控件，良好的表單設計可以讓網頁與用戶更好的溝通。表單中常見的元素主要包括：文本輸入框、下拉選擇框、單選按鈕、複選按鈕、文本域和按鈕等。其中每一個控件所起的做用都各不相同，並且不一樣的瀏覽器對錶單控件渲染的風格都各有不一樣。

一樣，表單也是Bootstrap框架中的核心內容，下面向你們介紹Bootstrap框架中表單的製做。

表單源碼查詢

Bootstrap框架的表單，其源碼佔據了大量的代碼，一樣的，根據不一樣的Bootstrap版本，你能夠輕鬆獲取相應的源碼：

☑ LESS版本：對應源文件 forms.less

☑ Sass版本：對應源文件 _forms.scss

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

fieldset {

min-width: 0;

padding: 0;

margin: 0;

border: 0;

}

legend {

display: block;

width: 100%;

padding: 0;

margin-bottom: 20px;

font-size: 21px;

line-height: inherit;

color: #333;

border: 0;

border-bottom: 1px solid #e5e5e5;

}

label {

display: inline-block;

margin-bottom: 5px;

font-weight: bold;

}

主要將這些元素的margin、padding和border等進行了細化設置。

固然表單除了這幾個元素以外，還有input、select、textarea等元素，在Bootstrap框架中，經過定製了一個類名`form-control`，也就是說，若是這幾個元素使用了類名「form-control」，將會實現一些設計上的定製效果。

一、寬度變成了100%

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

三、具備4px的圓角

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

五、設置了placeholder的顏色爲#999

2、水平表單

Bootstrap框架默認的表單是垂直顯示風格，但不少時候咱們須要的水平表單風格（標籤居左，表單控件居右）

在Bootstrap框架中要實現水平表單效果，必須知足如下兩個條件：

一、在<form>元素是使用類名「form-horizontal」。

二、配合Bootstrap框架的網格系統。（網格佈局會在之後的章節中詳細講解）

在<form>元素上使用類名「form-horizontal」主要有如下幾個做用：

一、設置表單控件padding和margin值。

二、改變「form-group」的表現形式，相似於網格系統的「row」。

3、內聯表單

有時候咱們須要將表單的控件都在一行內顯示，在Bootstrap框架中實現這樣的表單效果是垂手可得的，你只須要在<form>元素中添加類名「form-inline」便可。

內聯表單實現原理很是簡單，欲將表單控件在一行顯示，就須要將表單控件設置成內聯塊元素（display:inline-block）。若是你要在input前面添加一個label標籤時，會致使input換行顯示。若是你必須添加這樣的一個label標籤，而且不想讓input換行，你須要將label標籤也放在容器「form-group」中，如：

<label class="sr-only" for="exampleInputEmail2">Email address</label>

</div>

<inputtype="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">

</div>

4、表單控件（輸入框input）

每個表單都是由表單控件組成。離開了控件，表單就失去了意義。接下來的咱們簡單的來了解Bootstrap框架中表單控件的相關知識。

單行輸入框，常見的文本輸入框，也就是input的type屬性值爲text。在Bootstrap中使用input時也必須添加type類型，若是沒有指定type類型，將沒法獲得正確的樣式，由於Bootstrap框架都是經過input[type=「?」](其中?號表明type類型，好比說text類型，對應的是input[type=「text」])的形式來定義樣式的。

爲了讓控件在各類表單風格中樣式不出錯，須要添加類名「form-control」，如：

</div>

</form>

5、表單控件（下拉選擇框select）

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

</select>

</div>

</select>

</div>

</form>

6、表單控件（文本域textarea）

文本域和原始使用方法同樣，設置rows可定義其高度，設置cols能夠設置其寬度。但若是textarea元素中添加了類名「form-control」類名，則無需設置cols屬性。由於Bootstrap框架中的「form-control」樣式的表單控件寬度爲100%或auto。

</div>

</form>

7、表單控件（複選框checkbox和但選擇按鈕radio）

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

<label>

記住密碼

</label>

</div>

<label>

喜歡

</label>

</div>

<label>

不喜歡

</label>

</div>

</form>

8、表單控件(複選框和單選按鈕水平排列)

有時候，爲了佈局的須要，將複選框和單選按鈕須要水平排列。Bootstrap框架也作了這方面的考慮：

一、若是checkbox須要水平排列，只須要在label標籤上添加類名「checkbox-inline」

二、若是radio須要水平排列，只須要在label標籤上添加類名「radio-inline」

以下所示：

<input type="checkbox" value="option1">遊戲

</label>

<input type="checkbox" value="option2">攝影

</label>

<input type="checkbox" value="option3">旅遊

</label>

</div>

<input type="radio" value="option1" name="sex">男性

</label>

<input type="radio" value="option2" name="sex">女性

</label>

<input type="radio" value="option3" name="sex">中性

</label>

</div>

</form>

9、表單控件(按鈕)

按鈕也是表單重要控件之一,製做按鈕一般使用下面代碼來實現：

☑ input[type=「submit」]

☑ input[type=「button」]

☑ input[type=「reset」]

☑ <button>

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

10、表單控件大小

前面看到的表單控件都正常的大小。能夠經過設置控件的height，line-height，padding和font-size等屬性來實現控件的高度設置。不過Bootstrap框架還提供了兩個不一樣的類名，用來控制表單控件的高度。這兩個類名是：

一、input-sm:讓控件比正常大小更小

二、input-lg:讓控件比正常大小更大

這兩個類適用於表單中的input，textarea和select控件，具體使用以下：

11、表單控件狀態(焦點狀態)

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

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

焦點狀態是經過僞類「:focus」來實現。Bootstrap框架中表單控件的焦點狀態刪除了outline的默認樣式，從新添加陰影效果。

要讓控件在焦點狀態下有上面樣式效果，須要給控件添加類名「form-control」：

</div>

</div>

</form>

12、表單控件狀態(禁用狀態)

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

.form-control[disabled],

.form-control[readonly],

fieldset[disabled] .form-control {

cursor: not-allowed;

background-color: #eee;

opacity: 1;

}

使用方法爲：只須要在須要禁用的表單控件上加上「disabled」便可：

十3、表單控件狀態(驗證狀態)

在製做表單時，難免要作表單驗證。一樣也須要提供驗證狀態樣式，在Bootstrap框架中一樣提供這幾種效果。

一、.has-warning:警告狀態（黃色）

二、.has-error：錯誤狀態（紅色）

三、.has-success：成功狀態（綠色）

使用的時候只須要在form-group容器上對應添加狀態類名。

</div>

</div>

</div>

</form>

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

</div>

......

</div>

......

</div>

</form>

十4、表單提示信息

日常在製做表單驗證時，要提供不一樣的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式，將提示信息以塊狀顯示，而且顯示在控件底部。

<span class="help-block">你輸入的信息是正確的</span>

</div>

…

</form>

在Bootstrap V2.x版本中還提供了一個行內提示信息，其使用了類名「help-inline」。通常讓提示信息顯示在控件的後面，也就是同一水平顯示。

十5、按鈕

按鈕也是Bootstrap框架核心內容之一。由於按鈕是Web製做中不可缺乏的東西。並且不一樣的Web頁面具備不一樣的按鈕風格，甚至說同一個Web網站或應用程序具備多種按鈕風格，好比說不一樣的按鈕顏色、大小和狀態等。那麼Bootstrap框架也考慮了這些因素，接下來的內容咱們一塊兒來探討Bootstrap框架中的另外一核心部份內容——按鈕。

<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-warning" type="button">警告按鈕.btn-warning</button>

<button class="btn btn-danger" type="button">危險按鈕.btn-danger</button>

Bootstrap框架的按鈕也是一個獨立部分，咱們一樣在不一樣的版本之中能找到對應的代碼：

LESS版本：查看源文件buttons.less

Sass版本：查看源文件_buttons.scss

已編譯版本：查看源文件bootstrap.css文件第1992行～第2353行

十6、基本按鈕

Bootstrap框架V3.x版本的基本按鈕和V2.x版本的基本按鈕同樣，都是經過類名「btn」來實現。不一樣的是在V3.x版本要簡約不少，去除了V2.x版本中的大量的CSS3中的部分特效，好比說文本陰影（text-shadow）、漸變背景（background-image）、邊框陰影（box-shadow）等。

難能難得的是，Bootstrap框架中的考慮了不一樣瀏覽器的解析差別，進行了比較安全的兼容性處理，使按鈕效果在不一樣的瀏覽器中所呈現的效果基本相同。

十7、默認按鈕

Bootstrap框架首先經過基礎類名「.btn」定義了一個基礎的按鈕風格，而後經過「.btn-default」定義了一個默認的按鈕風格。默認按鈕的風格就是在基礎按鈕的風格的基礎上修改了按鈕的背景顏色、邊框顏色和文本顏色。

使用默認按鈕風格也很是的簡單，只須要在基礎按鈕「btn」的基礎上增長類名「btn-default」便可：

十8、多標籤支持

通常製做按鈕除了使用<button>標籤元素以外，還可使用<input type="submit">和<a>標籤等。一樣，在Bootstrap框架中製做按鈕時，除了剛纔所說的這些標籤元素以外，還可使用在其餘的標籤元素上，惟一須要注意的是，要在製做按鈕的標籤元素上添加類名「btn」。若是不添加是不會有任何按鈕效果。

咱們一塊兒來看看其餘標籤製做的基本按鈕效果：

<button class="btn btn-default" type="button">button標籤按鈕</button>

<a href="##" class="btn btn-default">a標籤按鈕</a>

<span class="btn btn-default">span標籤按鈕</span>

<div class="btn btn-default">div標籤按鈕</div>

十9、定製風格

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

在Bootstrap框架中不一樣的按鈕風格都是經過不一樣的類名來實現，在使用過程當中，開發者只須要選擇不一樣的類名便可：

二10、按鈕大小

上一節介紹了按鈕的定製風格，也就是如何實現Web頁面中多種風格按鈕。在Bootstrap框架中，對於按鈕的大小，也是能夠定製的。相似於input同樣，經過在基礎按鈕「.btn」的基礎上追加類名來控制按鈕的大小。

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

<button class="btn btn-primary btn-xs" type="button">超小型按鈕.btn-xs</button>

二11、塊狀按鈕

從前面幾節的內容中，你們可能發現了，每一個示例中的按鈕寬度都是依靠按鈕文本和padding的值來決定。但有時候在製做按鈕的時候須要按鈕寬度充滿整個父容器（width:100%），特別是在移動端的製做中。那麼前面的方法咱們都沒法很好的實現，除非從新定義按鈕的寬度。其實在Bootstrap中並不須要這樣作，Bootstrap框架中提供了一個類名「btn-block」。按鈕使用這個類名就可讓按鈕充滿整個容器，而且這個按鈕不會有任何的padding和margin值。在實際當中，常把這種按鈕稱爲塊狀按鈕。

使用方法和前面的相似，只須要在原按鈕類名上添加「.btn-block」類名，固然「.btn」類名是不可或缺的：

<button class="btnbtn-primary btn-xs btn-block" type="button">超小型按鈕.btn-xs</button>

二12、按鈕狀態——活動狀態

Bootstrap框架針對按鈕的狀態作了一些特殊處理。在Bootstrap框架中針對按鈕的狀態效果主要分爲兩種：活動狀態和禁用狀態。

Bootstrap按鈕的活動狀態主要包括按鈕的懸浮狀態(:hover)，點擊狀態(:active)和焦點狀態（:focus）幾種。

二十3、按鈕狀態——禁用狀態

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

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

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

方法2：在元素標籤中添加類名「disabled」

二者的主要區別是：

「.disabled」樣式不會禁止按鈕的默認行爲，好比說提交和重置行爲等。若是想要讓這樣的禁用按鈕也能禁止按鈕的默認行爲，則須要經過JavaScript這樣的語言來處理。對於<a>標籤也存在相似問題，若是經過類名「.disable」來禁用按鈕，其連接行爲是沒法禁止。而在元素標籤中添加「disabled」屬性的方法是能夠禁止元素的默認行爲的。

二十4、圖像

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

一、img-responsive：響應式圖片，主要針對於響應式設計

二、img-rounded：圓角圖片

三、img-circle：圓形圖片

四、img-thumbnail：縮略圖片

使用方法：

使用方法很是簡單，只須要在<img>標籤上添加對應的類名，以下代碼：

二十5、圖標（一）

這裏說的圖標就是Web製做中常看到的小icon圖標，能夠說這些小icon圖標是一個優秀Web中不可缺乏的一部分，起到畫龍點睛的效果。在Bootstrap框架中也爲你們提供了近200個不一樣的icon圖片，而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。

你們或許會問，這些字體我去哪裏獲取。若是你是從前面一直閱讀過來，咱們在介紹文件結構那一節就已介紹過。在Bootstrap框架中有一個fonts的目錄，這個目錄中提供的字體文件就是用於製做icon的字體文件。

自定義完字體以後，須要對icon設置一個默認樣式，在Bootstrap框架中是經過給元素添加「glyphicon」類名來實現，而後經過僞元素「:before」的「content」屬性調取對應的icon編碼。

二十6、圖標（二）

在網頁中使用圖標也很是的簡單，在任何內聯元素上應用所對應的樣式便可：

全部icon都是以」glyphicon-」前綴的類名開始，而後後綴表示圖標的名稱。

全部名稱查看請點擊：http://getbootstrap.com/components/#glyphicons 連接查閱或根據bootstrap.css文件第2393行～第2992行查閱。

特別說明：除了使用glyphicon.com提供的圖標以外，還可使用第三方爲Bootstrap框架設計的圖標字體，如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介紹的同樣，不過記得將字體下載到你本地。感興趣的能夠閱讀官網相關介紹。

第四章：網格系統

1、實現原理

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

在使用的時候你們能夠根據實際狀況從新編譯LESS（或Sass）源碼來修改12這個數值（也就是換成24或32，固然你也能夠分紅更多，但不建議這樣使用）。

2、工做原理

Bootstrap框架的網格系統工做原理以下：

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

</div>

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

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

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

3、基本用法

一、列組合

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

</div>

</div>

</div>

4、列偏移

有的時候，咱們不但願相鄰的兩個列緊靠在一塊兒，但又不想使用margin或者其餘的技術手段來。這個時候就可使用列偏移（offset）功能來實現。使用列偏移也很是簡單，只須要在列元素上添加類名「col-md-offset-*」(其中星號表明要偏移的列組合數)，那麼具備這個類名的列就會向右偏移。例如，你在列元素上添加「col-md-offset-4」，表示該列向右移動4個列的寬度。

<div class="col-md-2 col-md-offset-4">列向右移動四列的間距</div>

</div>

<div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div>

</div>

5、列排序

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

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

</div>

6、列的嵌套

Bootstrap框架的網格系統還支持列的嵌套。你能夠在一個列中添加一個或者多個行（row）容器，而後在這個行容器中插入列（像前面介紹的同樣使用列）。但在列容器中的行容器（row），寬度爲100%時，就是當前外部列的寬度。來看一個簡單示例：

個人裏面嵌套了一個網格

</div>

</div>

個人裏面嵌套了一個網格

</div>

第五章：菜單、按鈕以及導航

1、下拉菜單

在使用Bootstrap框架中的下拉菜單組件時，其結構運用的正確與否很是的重要，若是結構和類名未使用正確，直接影響組件是否能正常運用。咱們來簡單的看看：

一、使用一個名爲「dropdown」的容器包裹了整個下拉菜單元素，示例中爲:

二、使用了一個<button>按鈕作爲父菜單，而且定義類名「dropdown-toggle」和自定義「data-toggle」屬性，且值必須和最外容器類名一致，此示例爲:

data-toggle="dropdown"

三、下拉菜單項使用一個ul列表，而且定義一個類名爲「dropdown-menu」，此示例爲:

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

Bootstrap框架中的下拉菜單組件，其下拉菜單項默認是隱藏的，由於「dropdown-menu」默認樣式設置了「display:none」，其詳細源碼請查看bootstrap.css文件第3010行～第3029行。當用戶點擊父菜單項時，下拉菜單將會被顯示出來，當用戶再次點擊時，下拉菜單將繼續隱藏。如今咱們來分析一下實現原理，很是簡單，經過js技術手段，給父容器「div.dropdown」添加或移除類名「open」來控制下拉菜單顯示或隱藏。也就是說，默認狀況，「div.dropdown」沒有類名「open」，當用戶第一次點擊時，「div.dropdown」會添加類名「open」；當用戶再次點擊時，「div.dropdown」容器中的類名「open」又會被移除。

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

在Bootstrap框架中的下拉菜單還提供了下拉分隔線，假設下拉菜單有兩個組，那麼組與組之間能夠經過添加一個空的<li>，而且給這個<li>添加類名「divider」來實現添加下拉分隔線的功能。對應的樣式代碼：

.dropdown-menu .divider {

height: 1px;

margin: 9px 0;

overflow: hidden;

background-color: #e5e5e5;

}

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

下拉菜單

</button>

<li role="presentation" class="dropdown-header">第一部分菜單頭部</li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>

…

<li role="presentation" class="dropdown-header">第二部分菜單頭部</li>

…

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>

</ul>

</div>

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

實現右對齊方法：

Bootstrap框架中下拉菜單默認是左對齊，若是你想讓下拉菜單相對於父容器右對齊時，能夠在「dropdown-menu」上添加一個「pull-right」或者「dropdown-menu-right」類名，以下所示：

下拉菜單

</button>

…

</ul>

</div>

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

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

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

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

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

下拉菜單

</button>

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

7、按鈕（按鈕組）

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

對於結構方面，很是的簡單。使用一個名爲「btn-group」的容器，把多個按鈕放到這個容器中。以下所示：

</button>

…

</button>

</div>

除了可使用<button>元素以外，還可使用其餘標籤元素，好比<a>標籤。惟一要保證的是：無論使用什麼標籤，「.btn-group」容器裏的標籤元素須要帶有類名「.btn」。

8、按鈕（按鈕工具欄）

Bootstrap框架按鈕工具欄也提供了這樣的製做方法，你只須要將按鈕組「btn-group」按組放在一個大的容器「btn-toolbar」中，以下所示：

…

</div>

…

</div>

…

</div>

…

</div>

實現原理主要是讓容器的多個分組「btn-group」元素進行浮動，而且組與組以前保持5px的左外距。

按鈕組大小設置：

在介紹按鈕一節中，咱們知道按鈕是經過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>

…

</div>

…

</div>

…

</div>

9、按鈕（嵌套分組）

使用的時候，只須要把當初製做下拉菜單的「dropdown」的容器換成「btn-group」，而且和普通的按鈕放在同一級。以下所示：

</ul>

</div>

10、按鈕（垂直分組）

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

</ul>

</div>

11、按鈕（等分按鈕）

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

等分按鈕也常被稱爲是自適應分組按鈕，其實現方法也很是的簡單，只須要在按鈕組「btn-group」上追加一個「btn-group-justified」類名，以下所示：

</div>

12、按鈕下拉菜單

按鈕下拉菜單僅從外觀上看和上一節介紹的下拉菜單效果基本上是同樣的。不一樣的是在普通的下拉菜單的基礎上封裝了按鈕（.btn）樣式效果。簡單點說就是點擊一個按鈕，會顯示隱藏的下拉菜單。

按鈕下拉菜單其實就是普通的下拉菜單，只不過把「<a>」標籤元素換成了「<button>」標籤元素。惟一不一樣的是外部容器「div.dropdown」換成了「div.btn-group」。以下所示：

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>

<li><a href="##">按鈕下拉菜單項</a></li>

</ul>

</div>

十3、按鈕的向下向上三角形

按鈕的向下三角形，咱們是經過在<button>標籤中添加一個「<span>」標籤元素，而且命名爲「caret」:

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>

下面是向下彈起菜單的例子：

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>

<li><a href="##">按鈕下拉菜單項</a></li>

</ul>

</div>

十4、向上彈起的下拉菜單

有些菜單是須要向上彈出的，好比說你的菜單在頁面最底部，而這個菜單正好有一個下拉菜單，爲了讓用戶有更好的體驗，不得不讓下拉菜單向上彈出。在Bootstrap框架中專門爲這種效果提代了一個類名「dropup」。使用方法正如前面所示，只須要在「btn-group」上添加這個類名（固然，若是是普通向上彈出下拉菜單，你只須要在「dropdown」類名基礎上追加「dropup」類名便可）。

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>

<li><a href="##">按鈕下拉菜單項</a></li>

</ul>

</div>

十5、導航（基礎樣式）

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

在Bootstrap框架將導航獨立出來成爲一個導航組件，根據不一樣的版本，能夠找到對應的源碼：

☑ LESS版本：對應的源文件是navs.less

☑ Sass版本：對應的源文件是_navs.scss

☑ 編譯後版本：對應源碼是bootstrap.css文件第3450行～第3641行

導航基礎樣式：

Bootstrap框架中製做導航條主要經過「.nav」樣式。默認的「.nav」樣式不提供默認的導航樣式，必須附加另一個樣式纔會有效，好比「nav-tabs」、「nav-pills」之類。好比右側代碼編輯器中就有一個tab導航條的例子，他的實現方法就是爲ul標籤加入.nav和nav-tabs兩個類樣式。

十6、導航（標籤形tab導航）

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

標籤形導航是經過「nav-tabs」樣式來實現。在製做標籤形導航時須要在原導航「nav」上追加此類名，如：

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

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

</ul>

其實上例的效果和咱們平時看到的選項卡效果並不一致。通常狀況之下，選項卡教會有一個當前選中項。其實在Bootstrap框架也相應提供了。假設咱們想讓「Home」項爲當前選中項，只須要在其標籤上添加類名「class="active"」便可：

…

</ul>

除了當前項以外，有的選項卡還帶有禁用狀態，實現這樣的效果，只須要在標籤項上添加「class="disabled"」便可：

…

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

</ul>

十7、導航（膠囊形(pills)導航）

膠囊形（pills）導航聽起來有點彆扭，由於其外形看起來有點像膠囊形狀。但其更像咱們平時看到的大衆形導航。當前項高亮顯示，並帶有圓角效果。其實現方法和「nav-tabs」相似，一樣的結構，只須要把類名「nav-tabs」換成「nav-pills」便可：

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

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

</ul>

十8、導航（垂直堆疊的導航）

在實際運用當中，除了水平導航以外，還有垂直導航，就相似前面介紹的垂直排列按鈕同樣。製做垂直堆疊導航只須要在「nav-pills」的基礎上添加一個「nav-stacked」類名便可：

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

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

</ul>

垂直堆疊導航與膠囊形導航相比，主要是讓導航項不浮動，讓其垂直排列，而後給相鄰導航項留有必定的間距。

你們是否還記得，在下拉菜單一節中，下拉菜單組與組之間有一個分隔線。其實在垂直堆疊導航也具備這樣的效果，只須要添加在導航項之間添加「<li class=」nav-divider」></li>」便可：

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

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

</ul>

十9、自適應導航（使用）

自適應導航指的是導航佔據容器所有寬度，並且菜單項能夠像表格的單元格同樣自適應寬度。自適應導航和前面使用「btn-group-justified」製做的自適應按鈕組是同樣的。只不過在製做自適應導航時更換了另外一個類名「nav-justified」。固然他須要和「nav-tabs」或者「nav-pills」配合在一塊兒使用。如：

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

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

</ul>

二10、自適應導航（實現原理）

實現原理並不難，列表（<ul>）上設置寬度爲「100%」，而後每一個菜單項(<li>)設置了「display:table-cell」，讓列表項以模擬表格單元格的形式顯示。

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

前面介紹的都是使用Bootstrap框架製做一級導航，但不少時候，在Web頁面中是離不開二級導航的效果。那麼在Bootstrap框架中製做二級導航就更容易了。只須要將li看成父容器，使用類名「dropdown」，同時在li中嵌套另外一個列表ul，使用前面介紹下拉菜單的方法就能夠：

…

</ul>

</li>

</ul>

二12、麪包屑式導航

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

LESS版本：對應源文件breadcrumbs.less

Sass版本：對應源文件_breadcrumbs.scss

編譯出來的版本：源碼對應bootstrap.css文件第4112行～第4129行

使用方法：

使用方式就很簡單，爲ol加入breadcrumb類：

<li class="active">《圖解CSS3》</li>

</ol>

實現原理：

做者是使用li+li:before實現li與li之間的分隔符，因此這種方案在IE低版本就慘了（不支持）。

第六章：導航條、分頁導航

1、導航條基礎

導航條（navbar）和上一節介紹的導航（nav），就相差一個字，多了一個「條」字。其實在Bootstrap框架中他們仍是明顯的區別。在導航條(navbar)中有一個背景色、並且導航條能夠是純連接（相似導航），也能夠是表單，還有就是表單和導航一塊兒結合等多種形式。在這一節中將一塊兒探討Bootstrap框架中導航條的使用。

導航條和導航同樣，在Bootstrap框架中是一個獨立組件，因此你也能夠根據本身的需求使用不一樣的版本：

LESS版本：對應的源文件navbar.less

Sass版本：對應的源文件_navbar.scss

編譯後的版本：查看bootstrap.css文件第3642行～第4111行（注意這個所說的Bootstrap版本是3.1.1，其它版本位置是不一致的），這五百多行代碼已從原文中節取出來，放在右側代碼頂部「bootstrap.css」文件中，小夥伴們能夠查看。

2、基礎導航條

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

使用方法：

在製做一個基礎導航條時，主要分如下幾步：

第一步：首先在製做導航的列表(<ul class=」nav」>)基礎上添加類名「navbar-nav」

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

示例查看右側代碼編輯（10-19行）。

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

3、爲導航條添加標題、二級菜單及狀態

1.加入導航條標題：

在Web頁面製做中，經常在菜單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也爲你們作了這方面考慮，其經過「navbar-header」和「navbar-brand」來實現，示例查看代碼編輯器（11-22）。

2.導航條狀態、二級菜單：

一樣的，在基礎導航條中對菜單提供了當前狀態，禁用狀態，懸浮狀態等效果，並且也能夠帶有二級菜單的導航條，案例代碼見右側代碼編輯器（24-42行）。

4、帶表單的導航條

在Bootstrap框架中提供了一個「navbar-form」，使用方法很簡單，在navbar容器中放置一個帶有navbar-form類名的表單，示例代碼編輯器（29-34行）。

實現導航條表單的樣式代碼源碼請查看bootstrap.css文件第3839行～第3904行，咱們也對60多行樣式代碼節選了出來放到右側bootstrap.css文件中，有興趣的同窗請查看。

在上面的示例中，你們看到了「navbar-left」讓表單左浮動，更好實現對齊。在Bootstrap框架中，還提供了「navbar-right」樣式，讓元素在導航條靠右對齊。

5、導航條中的按鈕、文本和連接

Bootstrap框架的導航條中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form以外，還可使用其餘元素。框架提供了三種其餘樣式：

一、導航條中的按鈕navbar-btn

二、導航條中的文本navbar-text

三、導航條中的普通連接navbar-link

但這三種樣式在框架中使用時受到必定的限制，須要和navbar-brand、navbar-nav配合起來使用。並且對數量也有必定的限制，通常狀況在使用一到兩個不會有問題，超過兩個就會有問題。

navbar-btn和navbar-link在上一小節已經講過，如今咱們來看一下navbar-text的一個簡單應用：

　</div>

<li><a href="##" class="navbar-text">Navbar Text</a></li>

</ul>

</div>

在結果窗口中查看效果，能夠看出明顯的存在問題，經過瀏覽器調試工具，能夠看到a標籤有margin-top和margin-bottom的值爲15px，欲將其對齊，咱們將上面的結構作必定的調整：

　</div>

<a href="##" class="navbar-text">Navbar Text</a>

</div>

6、固定導航條

不少狀況之一，設計師但願導航條固定在瀏覽器頂部或底部，這種固定式導航條的應用在移動端開發中更爲常見。Bootstrap框架提供了兩種固定導航條的方式：

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

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

使用方法很簡單，只須要在製做導航條最外部容器navbar上追加對應的類名便可：

　…

</div>

　…

</div>

實現原理：

實現原理很簡單，就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed屬性，而且設置navbar-fixed-top的top值爲0,而navbar-fixed-bottom的bottom值爲0。

存在bug及解決方法:

從運行效果中你們不難發現，頁面主內容頂部和底部都被固定導航條給遮住了。爲了不固定導航條遮蓋內容，咱們須要在body上作一些處理：

body {

padding-top: 70px;/*有頂部固定導航條時設置*/

padding-bottom: 70px;/*有底部固定導航條時設置*/

}

由於固定導航條默認高度是50px，咱們通常設置padding-top和padding-bottom的值爲70px，固然有的時候仍是須要具體狀況具體分析。

第二種解決這個bug方法：

其實除了這種解決方案以外，咱們還有其餘的解決方法，把固定導航條都放在頁面內容前面：

　…

</div>

　…

</div>

在文件中添加下列樣式代碼：

.navbar-fixed-top ~ .content {

padding-top: 70px;

}

.navbar-fixed-bottom ~ .content {

padding-bottom: 70px;

}

7、響應式導航條

現在瀏覽Web頁面的終端不在是一塵不變了，前面示例實現的導航條僅能適配於大屏幕的瀏覽器，但當瀏覽器屏幕變小的時候，就不適合了。所以響應式設計也就隨之而來。那麼在一個響應式的Web頁面中，對於響應式的導航條也就很是的重要。

使用方法：

一、保證在窄屏時須要摺疊的內容必須包裹在帶一個div內，而且爲這個div加入collapse、navbar-collapse兩個類名。最後爲這個div添加一個class類名或者id名。

二、保證在窄屏時要顯示的圖標樣式（固定寫法）：

<span class="sr-only">Toggle Navigation</span>

</button>

三、併爲button添加data-target=".類名/#id名"，究競是類名仍是id名呢？由須要摺疊的div來決定。如：

須要摺疊的div代碼段：

…

</ul>

</div>

窄屏時顯示的圖標代碼段：

...

</button>

也能夠這麼寫，須要摺疊的div代碼段：

…

</ul>

</div>

窄屏時要顯示的圖標：

...

</button>

8、反色導航條

反色導航條實際上是Bootstrap框架爲你們提供的第二種風格的導航條，與默認的導航條相比，使用方法並沒有區別，只是將navbar-deafult類名換成navbar-inverse。其變化只是導航條的背景色和文本作了修改。以下：

</div>

</ul>

</div>

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

分頁導航幾乎在哪一個網站均可見。好的分頁導航能給用戶帶來更好的用戶體驗。在Bootstrap框架中提供了兩種分頁導航：

☑ 帶頁碼的分頁導航

☑ 帶翻頁的分頁導航

帶頁碼的分頁導航

帶頁碼的分頁導航，多是最多見的一種分頁導航，特別是在列表頁內容超多的時候，會給用戶提供分頁的導航方式。在Bootstrap框架爲開發者提供不一樣的版本：

☑ LESS版本：對應的源文件pagination.less

☑ Sass版本：對應的源文件_pagination.scss

☑ 編譯後版本：對應bootstrap.css文件第4130行～第4222行

使用方法：

平時不少同窗喜歡用div>a和div>span結構來製做帶頁碼的分頁導航。不過，在Bootstrap框架中使用的是ul>li>a這樣的結構，在ul標籤上加入pagination方法：

</ul>

在Bootstrap框架中，也能夠經過幾個不一樣的狀況來設置其大小。相似於按鈕同樣：

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

二、經過「pagination-sm」讓分頁導航變小：

…

</ul>

…

</ul>

…

</ul>

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

Bootstrap框架除了提供帶頁碼的分頁導航以外還提供了翻頁導航。這種分頁導航經常在一些簡單的網站上看到，好比說我的博客，雜誌網站等。這種分頁導航是看不到具體的頁碼，只會提供一個「上一頁」和「下一頁」的按鈕。

Bootstrap框架將其獨立成一個單獨的部分：

☑ LESS版本：對應源文件爲pager.less

☑ Sass版本：對應源文件爲_pager.scss

☑ 編譯後版本：對應bootstrap.css文件第4223行～第4260行

使用方法：

1.在實際使用中，翻頁分頁導航和帶頁碼的分頁導航相似，爲ul標籤加入pager類：

</ul>

2.對齊樣式設置：

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

☑ previous：讓「上一步」按鈕居左

☑ next：讓「下一步」按鈕居右

具體使用的時候，只須要在li標籤上添加對應類名便可：

</ul>

3.狀態樣式設置：

和帶頁碼分頁導航同樣，若是在li標籤上添加了disabled類名的時候，分頁按鈕處於禁用狀態，但一樣不能禁止其點擊功能。你能夠經過js來處理，或將a標籤換成span標籤。

</ul>

11、標籤

顏色樣式設置：

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

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

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

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

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

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

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

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

12、徽章

從某種意義上來講，徽章效果和前面介紹的標籤效果是極其的類似。也是用來作一些提示信息使用。常出現的是一些系統發出的信息，好比你登陸你的twitter後，若是你信息沒有看，系統會告訴你有多少信息未讀。在Bootstrap框架中，把這種效果稱做爲徽章效果，使用「badge」樣式來實現。

對應的文件版本：

☑ LESS版本:源文件badges.less

☑ Sass版本：源文件_badges.scss

☑ 編譯後版本：bootstrap.css文件第4328行～第4366行

使用方法：

能夠像標籤同樣，使用span標籤來製做，而後爲他加入badge類：

<a href="#">Inbox <span class="badge">42</span></a>

1.正如開頭所說，能夠將徽章與按鈕或者導航之類配合使用：

　</div>

</ul>

</div>

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

徽章在按鈕元素button和膠囊形導航nav-pills也能夠有相似的樣式，只不過是顏色不一樣而以：

…

<li><a href="#">Messages<span class="badge">3</span></a></li>

</ul>

Home

</a>

</li>

…

<li>

Messages

</a>

</li>

</ul>

Messages <span class="badge">4</span>

</button>

第七章：其餘內置組件

1、縮略圖（一）

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

使用方法：

經過「thumbnail」樣式配合bootstrap的網格系統來實現。看一個簡單的例子：

</a>

</div>

…

</div>

2、縮略圖（二）

還可讓縮略圖配合標題、描述內容，按鈕等：在僅有縮略圖的基礎上，添加了一個div名爲「caption「的容器，在這個容器中放置其餘內容，好比說標題，文本描述，按鈕等：

</a>

<h3>Bootstrap框架系列教程</h3>

<p>Bootstrap框架是一個優秀的前端框，就算您是一位後端程序員或者你是一位不懂設計的前端人員，你也能依賴於Bootstrap製做作優美的網站...</p>

<p>

</p>

</div>

…

</div>

3、警示框

在網站中，網頁老是須要和用戶一塊兒作溝通與交流。特別是當用戶操做上下文爲用戶提供一些有效的警示框，好比說告訴用戶操做成功、操做錯誤、提示或者警告等。

4、警示框--默認警示框

Bootstrap框架經過「alert「樣式來實現警示框效果。在默認狀況之下，提供了四種不一樣的警示框效果：

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

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

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

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

具體使用的時候，能夠在類名爲「alert」的div容器裏放置提示信息。實現不一樣類型警示框，只須要在「alert」基礎上追加對應的類名，以下：

<div class="alert alert-success" role="alert">恭喜您操做成功！</div>

<div class="alert alert-info" role="alert">請輸入正確的密碼</div>

<div class="alert alert-warning" role="alert">您已操做失敗兩次，還有最後一次機會</div>

<div class="alert alert-danger" role="alert">對不起，您輸入的密碼有誤</div>

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

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

使用方法：

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

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

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

三、要確保關閉按鈕元素上設置了自定義屬性：「data-dismiss="alert"」（由於可關閉警示框須要藉助於Javascript來檢測該屬性，從而控制警示框的關閉）。

具體使用以下：

恭喜您操做成功！

</div>

6、警示框--警示框的連接

有時候你可能想在警示框中加入連接地址，用來告訴用戶跳到某一個地方或新的頁面。而這個時候你又想讓用戶能明顯的看出來這是連接地址。在Bootstrap框架中對警示框裏的連接樣式作了一個高亮顯示處理。爲不一樣類型的警示框內的連接進行了加粗處理，而且顏色相應加深。

實現方法：

Bootstrap框架是經過給警示框加的連接添加一個名爲「alert-link」的類名，經過「alert-link」樣式給連接提供高亮顯示。

具體使用以下：

You successfully read

<a href="#" class="alert-link">this important alert message</a>

</div>

<strong>Heads up!</strong>

This

<a href="#" class="alert-link">alert needs your attention</a>

, but it's not super important.

</div>

<strong>Warning!</strong>

Better check yourself, you're

<a href="#" class="alert-link">not looking too good</a>

</div>

<a href="#" class="alert-link">Change a few things up</a>

and try submitting again.

</div>

7、進度條

在網頁中，進度條的效果並很多見，好比一個評分系統，好比加載狀態等。進度條和其餘獨立組件同樣，開發者能夠根據本身的須要，選擇對應的版本：

☑ LESS版本：源碼文件progress-bars.less

☑ Sass版本：源碼文件_progress-bars.scss

☑ 編譯後版本：bootstrap.css文件第4500行～第4575行

並且Bootstrap框架爲你們提供多種樣式風格的進度條，供你們使用(見右側代碼編輯器)，這一小節只是給你們直觀上展現了這些進度條樣式，接下來幾個小節中，咱們將詳細講解這些進度條如何使用。

8、進度條--基本樣式

Bootstrap框架中對於進度條提供了一個基本樣式，一個100%寬度的背景色，而後個高亮的色表示完成進度。其實製做這樣的進度條很是容易，通常是使用兩個容器，外容器具備必定的寬度，而且設置一個背景顏色，他的子元素設置一個寬度，好比完成度是30%（也就是父容器的寬度比例值），同時給其設置一個高亮的背景色。

使用方法：

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

</div>

結構優化：

雖然這樣實現了基本進度條效果，但對於殘障人員瀏覽網頁有點困難，因此咱們能夠將結構作得更好些（語義化更友好些）：

<span class="sr-only">40% Complete</span>

</div>

一、role屬性做用：告訴搜索引擎這個div的做用是進度條。

二、aria-valuenow="40"屬性做用：當前進度條的進度爲40%。

三、aria-valuemin="0"屬性做用：進度條的最小值爲0%。

四、aria-valuemax="100"屬性做用：進度條的最大值爲100%。

9、進度條--彩色進度條

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

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

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

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

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

使用方法：

具體使用就很是簡單了，只須要在基礎的進度上增長對應的類名。如：

</div>

</div>

</div>

</div>

10、進度條--條紋進度條

在Bootstrap框架中除了提供了彩色進度條以外，還提供了一種條紋進度條，這種條紋進度條採用CSS3的線性漸變來實現，並未藉助任何圖片。使用Bootstrap框架中的條紋進度條只須要在進度條的容器「progress」基礎上增長類名「progress-striped」，固然，若是你要讓你的進度條條紋像彩色進度同樣，具備彩色效果，你只須要在進度條上增長相應的顏色類名，如前面的彩色進度條所講。

一塊兒來看一下製做條紋進度條的結構：

</div>

</div>

</div>

</div>

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

在進度條「progress progress-striped」兩個類的基礎上再加入「active」類名。以下代碼：

</div>

瞭解CSS3的同窗都知道，@keyframes僅僅是建立了一個動畫效果，若是要讓進度條真正的動起來，咱們須要經過必定的方式調用@keyframes建立的動畫「progress-bar-stripes」，而且經過一個事件觸發動畫生效。在Bootstrap框架中，經過給進度條容器「progress」添加一個類名「active」，並讓文檔加載完成就觸「progress-bar-stripes」動畫生效。

</div>

</div>

</div>

</div>

調用動畫對應的樣式代碼以下：

.progress.active .progress-bar {

-webkit-animation: progress-bar-stripes 2s linear infinite;

animation: progress-bar-stripes 2s linear infinite;

}

特別注意：要讓條紋進度條動起來，就須要讓「progress-striped」和「active」同時運用，否則條紋進度條是不具有動效效果。

12、進度條--層疊進度條

Bootstrap框架除了提供上述幾種進度條以外，還提供了一種層疊進度條，層疊進度條，能夠將不一樣狀態的進度條放置在一塊兒，按水平方式排列。具體使用以下：

</div>

十3、進度條--帶Label的進度條

上面介紹的各類進度條，都僅僅是經過顏色進度向用戶傳遞進度值。但實際中，有不少時候是須要在進度條中直接用相關的數值向用戶傳遞完成的進度值，在Bootstrap就爲你們考慮了這種使用場景。

實現方法：

只須要在進度條中添加你須要的值，如：

</div>

還有一種特殊情形，當進度條處於開始位置，也就是進度條的值爲0%時，內容是否會撐開必定的寬度，讓進度條具備顏色呢？若是是，這不是咱們須要的效果，若是不是，又是怎麼實現的呢？咱們先來看一個這樣的示例：

</div>

十4、媒體對象

在Web頁面或者說移動頁面製做中，經常看到這樣的效果，左邊居左（或居右），內容居右（或居左）排列。

咱們經常把這樣的效果稱爲媒體對象。能夠說他是一種抽像的樣式，能夠用來構建不一樣類型的組件。這些組件都具備開篇所說的樣式風格。那麼在Bootstrap框架中特地將些部分提取出來作來一個組件介紹。其對應的版本文件：

☑ LESS版本：對應的源文件是media.less

☑ Sass版本：對應的源文件是_media.scss

☑ 編譯後版本：對應bootstrap.css文件第4792行～第4819行

十5、媒體對象--默認媒體對象

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

☑ 媒體對像的容器：常使用「media」類名錶示，用來容納媒體對象的全部內容

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

☑ 媒體對象的主體：常使用「media-body」表示，就是媒體對像中的主體內容，能夠是任何元素，經常是圖片側邊內容

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

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

在具體使用中以下所示：

</a>

<h4 class="media-heading">系列：十天精通CSS3</h4>

<div>全方位深入詳解CSS3模塊知識，經典案例分析，代碼同步調試，讓網頁穿上絢麗裝備！</div>

</div>

十6、媒體對象--媒體對象的嵌套

一個媒體對象能夠嵌套在另外一個媒體對象中，看一個簡單例子：

</a>

<h4 class="media-heading">Media Heading</h4>

</a>

<h4 class="media-heading">Media Heading</h4>

</a>

<h4 class="media-heading">Media Heading</h4>

</div>

十7、媒體對象--媒體對象列表

Bootstrap框架提供了一個列表展現的效果，在寫結構的時候可使用ul，而且在ul上添加類名「media-list」，而在li上使用「media」，示例代碼以下：

</a>

<h4 class="media-heading">Media Header</h4>

</div>

</li>

</ul>

十8、列表組

列表組是Bootstrap框架新增的一個組件，能夠用來製做列表清單、垂直導航等效果，也能夠配合其餘的組件製做出更漂亮的組件。因爲其在Bootstrap是一個獨立的組件，因此也對應有本身獨立源碼：

☑ LESS版本：對應的源碼文件 list-group.less

☑ Sass版本：對應的源碼文件是 _list-group.scss

☑ 編譯出的Bootstrap版本：對應的源碼bootstrap.css文件第4820行～第4994行

十9、列表組--基礎列表組

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

☑ list-group：列表組容器，經常使用的是ul元素，固然也能夠是ol或者div元素

☑ list-group-item：列表項，經常使用的是li元素，固然也能夠是div元素

來看一個簡單的示例：

<li class="list-group-item">揭開CSS3的面紗</li>

</ul>

二10、列表組--帶徽章的列表組

帶徽章的列表組其實就是將Bootstrap框架中的徽章組件和基礎列表組結合在一塊兒的一個效果。具體作法很簡單，只須要在「list-group-item」中添加徽章組件「badge」：

<span class="badge">13</span>揭開CSS3的面

</li>

<span class="badge">456</span>CSS3選擇器

</li>

<span class="badge">892</span>CSS3邊框

</li>

<span class="badge">90</span>CSS3背景

</li>

<span class="badge">1290</span>CSS3文本

</li>

</ul>

二11、列表組--帶連接的列表組

帶連接的列表組，其實就是每一個列表項都具備連接效果。你們可能最初想到的就是在基礎列表組的基礎上，給列表項的文本添加連接：

<a href="##">揭開CSS3的面</a>

</li>

</li>

...

</ul>

這樣作有一個不足之處，就是連接的點擊區域只在文本上有效，但不少時候，都但願在列表項的任何區域都具有可點擊。這個時候就須要在連接標籤上增長額外的樣式：「display:block」。

雖然這樣能解決問題，達到需求。但在Bootstrap框架中，仍是採用了另外一種實現方式。就是將ul.list-group使用div.list-group來替換，而li.list-group-item直接用a.list-group-item來替換。這樣就能夠達到須要的效果：

<a href="##" class="list-group-item">圖解CSS3</a>

<a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>

<a href="##" class="list-group-item">玩轉Bootstrap</a>

</div>

二12、列表組--自定義列表組

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

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

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

這兩個樣式最大的做用就是用來幫助開發者能夠自定義列表項裏的內容，以下面的示例：

<h4 class="list-group-item-heading">圖解CSS3</h4>

</a>

<h4 class="list-group-item-heading">Sass中國</h4>

</a>

</div>

二十3、列表組--列表項的狀態設置

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

☑ active：表示當前狀態

☑ disabled：表示禁用狀態

來看個示例：

<a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>

<a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>

<a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中國</a>

</div>

二十4、列表組--多彩列表組

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

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

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

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

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

若是你想給列表項添加什麼背景色，只須要在「list-group-item」基礎上增長對應的類名：

<a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>

<a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>

<a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中國</a>

<a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>

</div>

二十5、面板

面板（Panels）是Bootstrap框架新增的一個組件，其主要做用就是用來處理一些其餘組件沒法完成的功能。一樣在不一樣的版本中具備不一樣的源碼：

☑ Less版本：對應的源碼文件是 panels.less

☑ Sass版本：對應的源碼文件是 _panels.scss

☑ 編譯後的Bootstrap：對應bootstrap.css文件第4995行～第5302行

二十6、面板--基礎面板

基礎面板很是簡單，就是一個div容器運用了「panel」樣式，產生一個具備邊框的文本顯示塊。因爲「panel」不控制主題顏色，因此在「panel」的基礎上增長一個控制顏色的主題「panel-default」，另外在裏面添加了一個「div.panel-body」來放置面板主體內容：

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

</div>

二十7、面板--帶有頭和尾的面板

基礎面板看上去太簡單了，Bootstrap爲了豐富面板的功能，特地爲面板增長「面板頭部」和「頁面尾部」的效果：

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

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

<div class="panel-heading">圖解CSS3</div>

</div>

二十8、面板--彩色面板

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

☑ panel-primary：重點藍

☑ panel-success：成功綠

☑ panel-info:信息藍

☑ panel-warning：警告黃

☑ panel-danger：危險紅

使用方法就很簡單了，只須要在panel的類名基礎上增長本身須要的類名：

<div class="panel-heading">圖解CSS3</div>

</div>

二十9、面板--面板中嵌套表格

通常狀況下能夠把面板理解爲一個區域，在使用面板的時候，都會在panel-body放置須要的內容，多是圖片、表格或者列表等。來看看面板中嵌套表格和列表組的一個效果。首先來看嵌套表格的效果：

<div class="panel-heading">圖解CSS3</div>

<p>詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的全部CSS3新特性

</p>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>《圖解CSS3》</td>

</tr>

</tbody>

</table>

</div>

</div>

優化代碼：

在實際應用運中，你或許但願表格和麪板邊緣不須要有任何的間距。但因爲panel-body設置了一個padding：15px的值，爲了實現這樣的效果。咱們在實際使用的時候須要把table提取到panel-body外面：

<div class="panel-heading">圖解CSS3</div>

</div>

三10、面板--面板中嵌套列表組

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

<div class="panel-heading">圖解CSS3</div>

</p>

<li class="list-group-item">我是列表項</li>

</ul>

</div>

</div>

優化代碼：

和嵌套表格同樣，若是你以爲這樣有間距很差看，你徹底能夠把列表組提取出來：

<div class="panel-heading">圖解CSS3</div>

<li class="list-group-item">我是列表項</li>

</ul>

</div>

第八章：Bootstrap支持的JavaScript插件

1、導入JavaScript插件

Bootstrap除了包含豐富的Web組件以外，如前面介紹的下拉菜單、按鈕組、導航、分頁等。他還包括一些JavaScript的插件。

Bootstrap的JavaScript插件能夠單獨導入到頁面中，也能夠一次性導入到頁面中。由於在Bootstrap中的JavaScript插件都是依賴於jQuery庫，因此不管是單獨導入還一次性導入以前必須先導入jQuery庫。

1.一次性導入：

Bootstrap提供了一個單一的文件，這個文件包含了Bootstrap的全部JavaScript插件，即bootstrap.js（壓縮版本：bootstrap.min.js）。

具體使用以下（或見右側代碼編輯器28-29行）：

<!—導入jQuery版本庫，由於Bootstrap的JavaScript插件依賴於jQuery -->

<!—- 一次性導入全部Bootstrap的JavaScript插件（壓縮版本） -->

特別聲明：jQuery版本庫也能夠加載你本地的jQuery版本。

2.單獨導入：

爲方便單獨導入特效文件，Bootstrap V3.2中提供了12種JavaScript插件，他們分別是：

☑ 動畫過渡（Transitions）:對應的插件文件「transition.js」

☑ 模態彈窗（Modal）:對應的插件文件「modal.js」

☑ 下拉菜單（Dropdown）：對應的插件文件「dropdown.js」

☑ 滾動偵測（Scrollspy）：對應的插件文件「scrollspy.js」

☑ 選項卡（Tab）：對應的插件文件「tab.js」

☑ 提示框（Tooltips）：對應的插件文件「tooltop.js」

☑ 彈出框（Popover）：對應的插件文件「popover.js」

☑ 警告框（Alert）：對應的插件文件「alert.js」

☑ 按鈕（Buttons）：對應的插件文件「button.js」

☑ 摺疊/手風琴（Collapse）：對應的插件文件「collapse.js」

☑ 圖片輪播Carousel：對應的插件文件「carousel.js」

☑ 自動定位浮標Affix：對應的插件文件「affix.js」

上述單獨插件的下載可到github去下載（https://github.com/twbs/bootstrap）。

2、動畫過渡（Transitions）

咱們先來說「動畫過渡（Transitions）」這個插件的使用，源文件：transition.js

Bootstrap框架默認給各個組件提供了基本動畫的過渡效果，若是要使用，有兩種方法：

☑ 調用統一編譯的bootstrap.js；

☑ 調用單一的過渡動畫的JavaScript插件文件transition.js（右側第29行引入Bootstrap上對外公佈的transition.js的地址）。

transition.js文件爲Bootstrap具備過渡動畫效果的組件提供了動畫過渡效果。不過須要注意的是，這些過渡動畫都是採用CSS3來實現的，因此IE6-8瀏覽器是不具有這些過渡動畫效果。

默認狀況之下，Bootstrap框架中如下組件使用了過渡動畫效果：

☑ 模態彈出窗（Modal）的滑動和漸變效果；

☑ 選項卡（Tab）的漸變效果；

☑ 警告框（Alert）的漸變效果；

☑ 圖片輪播（Carousel）的滑動效果。

右側舉了一個「模態彈出窗（Modal）的滑動和漸變效果」源代碼例子。

3、模態彈出框（Modals）

這一小節咱們先來說解一個「模態彈出框」，插件的源文件：modal.js。

右側代碼編輯器（30行）就是單獨引入 bootstrap 中發佈出的「modal.js」文件。

樣式代碼：

☑ LESS版本：modals.less

☑ Sass版本：_modals.scss

☑ 編譯後的Bootstrap：對應bootstrap.css文件第5375行～第5496行

在 Bootstrap 框架中把模態彈出框統一稱爲 Modal。這種彈出框效果在大多數 Web 網站的交互中均可見。好比點擊一個按鈕彈出一個框，彈出的框多是一段文件描述，也可能帶有按鈕操做，也有可能彈出的是一張圖片。

4、模態彈出框--結構分析

Bootstrap框架中的模態彈出框，分別運用了「modal」、「modal-dialog」和「modal-content」樣式，而彈出窗真正的內容都放置在「modal-content」中，其主要又包括三個部分：

☑ 彈出框頭部，通常使用「modal-header」表示，主要包括標題和關閉按鈕

☑ 彈出框主體，通常使用「modal-body」表示，彈出框的主要內容

☑ 彈出框腳部，通常使用「modal-footer」表示，主要放置操做按鈕

模態彈出窗的結構以下：

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

<h4 class="modal-title">模態彈出窗標題</h4>

</div>

<p>模態彈出窗主體內容</p>

</div>

</div>

</div>

</div>

</div>

5、模態彈出框--實現原理解析（一）

bootstrap中的「模態彈出框」有如下幾個特色：

一、模態彈出窗是固定在瀏覽器中的。

二、單擊右側全屏按鈕，在全屏狀態下，模態彈出窗寬度是自適應的，並且modal-dialog水平居中。

三、當瀏覽器視窗大於768px時，模態彈出窗的寬度爲600px。

6、模態彈出框--實現原理解析（二）

在Bootstrap框架中爲模態彈出窗添加了一個蒙層樣式「modal-backdrop」，只不過他默認狀況下是全屏黑色的：

.modal-backdrop {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

z-index: 1040;

background-color: #000;

}

一樣，給其添加了一個過渡動畫，從fade到in，把opacity值從0變成了0.5。上圖展現的就是in狀態下的效果：

/*bootstrap.css文件第5433行～第5440行*/

.modal-backdrop.fade {

filter: alpha(opacity=0);

opacity: 0;

}

.modal-backdrop.in {

filter: alpha(opacity=50);

opacity: .5;

}

兩種尺寸選擇：

除此以外，Bootstrap框架還爲模態彈出窗提供了不一樣尺寸，一個是大尺寸樣式「modal-lg」，另外一個是小尺寸樣式「modal-sm」。其結構上稍作調整：

<divclass="modal-dialog modal-lg">

<divclass="modal-content"> ... </div>

</div>

<divclass="modal fade bs-example-modal-sm"tabindex="-1"role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

<divclass="modal-dialog modal-sm">

<divclass="modal-content"> ... </div>

</div>

7、模態彈出框--觸發模態彈出窗2種方法

衆所周知，模態彈出窗在頁面加載完成時，是被隱藏在頁面中的，只有經過必定的動做（事件）才能觸發模態彈出窗的顯示。在Bootstrap框架中實現方法有2種，接下來分別來介紹這2種觸發模態彈出窗的使用方法。

聲明式觸發方法：

方法一：模態彈出窗聲明，只須要自定義兩個必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發方法通常依賴於這些自定義的data-xxx 屬性。好比data-toggle="" 或者 data-dismiss=""）。例如：

<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點擊我會彈出模態彈出窗</button>

</div>

注意如下事項：

一、data-toggle必須設置爲modal(toggle中文翻譯過來就是觸發器)；

二、data-target能夠設置爲CSS的選擇符，也能夠設置爲模態彈出窗的ID值，通常狀況設置爲模態彈出窗的ID值，由於ID值是惟一的值。

方法二：觸發模態彈出窗也能夠是一個連接<a>元素，那麼可使用連接元素自帶的href屬性替代data-target屬性，如：

<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點擊我會彈出模態彈出窗</a>

</div>

不過建議仍是使用統一使用data-target的方式來觸發。

8、模態彈出框--爲彈出框增長過分動畫效果

爲模態彈出框增長過分動畫效果：

可經過給「.modal」增長類名「fade」爲模態彈出框增長一個過渡動畫效果。

小的模態彈出窗

</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

<h4 class="modal-title">模態彈出窗標題</h4>

</div>

<p>模態彈出窗主體內容</p>

</div>

</div>

9、模態彈出框--模態彈出窗的使用（data-參數說明）

除了經過data-toggle和data-target來控制模態彈出窗以外，Bootstrap框架針對模態彈出框還提供了其餘自定義data-屬性，來控制模態彈出窗。好比說:是否有灰色背景modal-backdrop，是否能夠按ESC鍵關閉模態彈出窗。

10、模態彈出框--模態彈出窗的使用（JavaScript觸發）

JavaScript觸發方法

除了使用自定義屬性觸發模態彈出框以外，還能夠經過JavaScript方法來觸發模態彈出窗。經過給一個元素一個事件，來觸發。好比說給一個按鈕一個單擊事件，而後觸發模態彈出窗。以下面的一個簡單示例：

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

<h4 class="modal-title">模態彈出窗標題</h4>

</div>

<p>模態彈出窗主體內容</p>

</div>

</div>

</div>

</div>

</div>

JavaScript觸發的彈出窗代碼：

$(function(){

$(".btn").click(function(){

$("#mymodal").modal();

});

11、模態彈出框--JavaScript觸發時的參數設置（一）

使用JavaScript觸發模態彈出窗時，Bootstrap框架提供了一些設置，主要包括屬性設置、參數設置和事件設置。

模態彈出窗默認支持的自定義屬性主要有：

好比你不想讓用戶按ESC鍵關閉模態彈出窗，你就能夠這樣作：

$(function(){

$(".btn").click(function(){

$("#mymodal").modal({

keyboard:false

});

12、模態彈出框--JavaScript觸發時的參數設置（二）

參數設置：

在Bootstrap框架中還爲模態彈出窗提供了三種參數設置，具體說明以下：

參數	使用方法	描述
toggle	$(「#mymodal」).modal(「toggle」)	觸發時，反轉模態彈出窗的狀態。若是模態彈出窗是顯示的，則關閉；反之，若是模態彈出窗是關閉的，則顯示
show	$(「#mymodal」).modal(「show」)	觸發時，顯示模態彈出窗
hide	$(「#mymodal」).modal(「hide」)	觸發時，關閉模態彈出窗

事件設置：

模態彈出窗還支持四種類型的事件，分別是模態彈出窗的彈出前、彈出後，關閉前、關閉後，具體描述以下：

事件類型	描述
show.bs.modal	在show方法調用時當即觸發（還沒有顯示以前）；若是單擊了一個元素，那麼該元素將做爲事件的relatedTarget屬性
shown.bs.modal	該事件在模態彈出窗徹底顯示給用戶以後（而且等CSS動畫完成以後）觸發；若是單擊了一個元素，那麼該元素將做爲事件的relatedTarget事件
hide.bs.modal	在hide方法調用時（但還未關閉隱藏）當即觸發
hidden.bs.modal	該事件在模態彈出窗徹底隱藏以後（而且CSS動畫漂完成以後）觸發

調用方法也很是簡單：

$('#myModal').on('hidden.bs.modal', function (e) {

// 處理代碼...

})

1. bootstrap + bootstrap-table + jquery + bootstrap-paginator
2. Bootstrap（一）認識Bootstrap
3. 【Bootstrap】1.初識Bootstrap
4. Bootstrap
5. bootstrap
6. BootStrap
更多相關文章...
• Lua 數據庫訪問 - Lua 教程
• R 包 - R 語言教程
• Github 簡明教程

相關標籤/搜索

bootstrap

bootstrap+bootstrap+scss

每日一句

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