一、Bootstrap簡介
Bootstrap來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。
（1）基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。
（2）CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。
（3）組件：Bootstrap 包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。
（4）JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。
（5）定製：您可以定製 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。
（6）Bootstrap中主要包含css、js和fonts。
注意：Bootstrap.css和Bootstrap.min.css版本的區別：Bootstrap.min.css是壓縮版，就是把換行和空格都去除，從而減少文件大小，適合生產環境；Bootstrap.css是未壓縮版，便於調試開發，適合開發環境，二者的內容都是一樣的。
（一）HTML中href和src區別
（1）href是Hypertext Reference的縮寫，表示超文本引用。用來建立當前元素和文檔之間的鏈接。常用的有：link、a。
（2） src是source的縮寫，src的內容是頁面必不可少的一部分，是引入。src指向的內容會嵌入到文檔中當前標籤所在的位置。常用的有：img、script、iframe。
（3）src用於替換當前元素；href用於在當前文檔和引用資源之間建立聯繫。
二、Bootstrap CSS
（一）Bootstrap CSS 概覽
1、Bootstrap 使用了一些 HTML5 元素和 CSS 屬性。爲了讓這些正常工作，您需要使用 HTML5 文檔類型（Doctype）。例如：<!DOCTYPE html>。
2、爲了讓 Bootstrap 開發的網站對移動設備友好，確保適當的繪製和觸屏縮放，需要在網頁的 head 之中添加 viewport meta 標籤，<meta name="viewport" content="width=device-width, initial-scale=1.0">；
（1）device-width 可以確保它能正確呈現在不同設備上。
（2）initial-scale=1.0 確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。
（3）在移動設備瀏覽器上，通過爲 viewport meta 標籤添加 user-scalable=no 可以禁用其縮放（zooming）功能。通常情況下，maximum-scale=1.0 與 user-scalable=no 一起使用。
3、響應式圖像
（1） max-width: 100%; 和 height: auto; 屬性，可以讓圖像按比例縮放，不超過其父元素的尺寸。
（2）把元素的 display 屬性設置爲 block，以塊級元素顯示。
4、Bootstrap 使用 Normalize 來建立跨瀏覽器的一致性。Normalize.css 是一個很小的 CSS 文件，在 HTML 元素的默認樣式中提供了更好的跨瀏覽器一致性。
5、設置 display 爲 table，會創建一個匿名的 table-cell 和一個新的塊格式化上下文。:before 僞元素防止上邊距崩塌，:after 僞元素清除浮動。
（二）Bootstrap 網格系統
1、 網格系統（Grid System）的工作原理
（1）行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
（2）使用行來創建列的水平組。
（3）內容應該放置在列內，且唯有列可以是行的直接子元素。
（4）預定義的網格類，比如 .row 和 .col-xs-4，可用於快速創建網格佈局。LESS 混合類可用於更多語義佈局。
（5）列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
（6）網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個 .col-xs-4。
注意：爲適應設備的不同大小，Bootstrap分爲4種，採用不同的類屬性來區分標識。分別爲超小設備手機（<768px）使用.col-xs-*類屬性（extra small）；小型設備平板電腦（≥768px）使用.col-sm-*類屬性（small）；中型設備臺式電腦（≥992px）使用.col-md-*類屬性（middle）；大型設備臺式電腦（≥1200px）使用.col-lg-*類屬性（large）。
注意：網格系統列數總和最大爲12列，通過類屬性來指定元素佔幾列。如果總和超過12列，會自動換行。
2、Bootstrap 響應式實用工具
Bootstrap 提供了一些輔助類，實現內容對設備的顯示和隱藏。visible-sm和hidden-sm等，例如： <span class="hidden-sm">小型</span><span class="visible-sm">✔ 在小型設備上可見</span>；
3、實現對元素的移動：請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1 到 11。
4、Bootstrap允許列嵌套：添加一個新的 .row，並在一個已有的 .col-md-* 列內添加一組 .col-md-* 列。
注意：嵌套列添加的列不能超過12列。
5、列排序：按照一種順序編寫列，使用 .col-md-push-* 和 .col-md-pull-* 類屬性來按照自己制定的順序展示。
注意：push相當於推即相對於原位置向前推幾列；pull相當於拉即相對於原位置往回拉幾列。
（三）Bootstrap 排版
1、內聯子標題樣式：在元素兩旁添加 <small>，或者添加 .small class。這樣子您就能得到一個字號更小的顏色更淺的文本
2、引導主題副本：爲了給段落添加強調文本，則可以添加 class="lead"，這將得到更大更粗、行高更高的文本。
3、Bootstrap 提供了一些用於強調或對齊文本的類，text-center、text-warning、text-danger、text-success；
4、縮寫：HTML 元素提供了用於縮寫的標記，比如 WWW 或 HTTP。Bootstrap 定義 <abbr> 元素的樣式爲顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示完整的文本（只要您爲 <abbr> title 屬性添加了文本）。爲了得到一個更小字體的文本，請添加 .initialism 到 <abbr>。
5、引用（Blockquote）：可以在任意的 HTML 文本旁使用默認的 <blockquote>。其他選項包括，添加一個 <small> 標籤來標識引用的來源，使用 class .pull-right 向右對齊引用。
6、Bootstrap 支持有序列表、無序列表和定義列表。
（1）有序列表：有序列表是指以數字或其他有序字符開頭的列表。
（2）無序列表：無序列表是指沒有特定順序的列表，是以傳統風格的着重號開頭的列表。如果您不想顯示這些着重號，您可以使用 class .list-unstyled 來移除樣式。您也可以通過使用 class .list-inline 把所有的列表項放在同一行中。
（3）定義列表：在這種類型的列表中，每個列表項可以包含 <dt> 和 <dd> 元素。<dt> 代表 定義術語，就像字典。接着，<dd> 是 <dt> 的描述。.dl-horizontal 可以讓 <dl> 內的短語及其描述排在一行。
（四）Bootstrap 代碼
Bootstrap 允許您以兩種方式顯示代碼：
1、 <code> 標籤。如果您想要內聯顯示代碼，那麼您應該使用 <code> 標籤。
2、<pre>標籤。如果代碼需要被顯示爲一個獨立的塊元素或者代碼有多行，那麼您應該使用 <pre> 標籤。
（五）Bootstrap 表格
1、表格類：
（1）.table:爲任意 <table> 添加基本樣式 (只有橫向分隔線);
（2）.table-striped：在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持)；
（3）.table-bordered：爲所有表格的單元格添加邊框；
（4）.table-hover：在 <tbody> 內的任一行啓用鼠標懸停狀態；
（5）.table-condensed：讓表格更加緊湊；
2、用於表格的行或者單元格的類：
（1）.active：將懸停的顏色應用在行或者單元格上；
（2）.success：表示成功的操作；
（3）.info：表示信息變化的操作
（4）.danger：表示一個危險的操作;
（5）.warning:表示一個警告的操作；
注意：這些類的效果是表格呈現不同的背景顏色。
（六）Bootstrap 表單（form）
1、垂直或基本表單：
基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。
（1）向父 <form> 元素添加 role="form"。
（2）把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
（3）向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
2、內聯表單
內聯表單所有元素是內聯的，向左對齊的，標籤是並排的，請向 <form> 標籤添加 class .form-inline。
（1）使用 class .sr-only，您可以隱藏內聯表單的標籤。
（2）默認情況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內聯表單時，您需要在表單控件上設置一個寬度。
3、水平表單：
（1）向父 <form> 元素添加 class .form-horizontal。
（2）把標籤和控件放在一個帶有 class .form-group 的 <div> 中。
（3）向標籤添加 class .control-label。
4、複選框（Checkbox）和單選框（Radio）：對一系列複選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。
5、選擇框（Select）使用 multiple="multiple" 允許用戶選擇多個選項。
6、靜態控件：需要在一個水平表單內的表單標籤後放置純文本時，請在 <p> 上使用 class .form-control-static。
7、禁止輸入：想要禁用一個輸入框 input，只需要簡單地添加 disabled 屬性，這不僅會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。
例如：<input type="text" placeholder="該輸入框禁止輸入..." disabled>
8、驗證狀態：Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只需要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）即可使用驗證狀態。
9、設置表單控件大小： 使用.input-lg 和 .col-lg-* 來設置表單的高度和寬度。
注意：input-lg是擴大輸入框；input-sm是縮小輸入框；col-lg-*幾列來設置輸入框的寬度。
10、表單幫助文本：爲了添加一個佔用整個寬度的內容塊，請在 <input> 後使用 .help-block。例如：<span class="help-block">幫助文本內容</span>。
（七）Bootstrap 按鈕
1、按鈕基本樣式：btn是基本樣式；btn-default是默認標準樣式。
2、按鈕大小：btn-lg/sm/xs來設置按鈕的大小。
3、按鈕的狀態：激活狀態：active；禁用狀態：disabled ，當您禁用一個按鈕時，它的顏色會變淡 50%，並失去漸變。
（八）Bootstrap 圖片
Bootstrap 提供了三個可對圖片應用簡單樣式的 class：
（1）.img-rounded：添加 border-radius:6px 來獲得圖片圓角。
（2）.img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
（3）.img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。
（九）Bootstrap 輔助類
1、Bootstrap可設置文本顏色，其中，如果文本是個鏈接鼠標移動到文本上會變暗；
2、Bootstrap可設置背景顏色，其中，如果文本是個鏈接鼠標移動到文本上會變暗；
3、pull-left：元素浮動到左邊；pull-right：元素浮動到右邊；center-block：設置元素爲 display:block 並居中顯示；clearfix：清除浮動；sr-only：除了屏幕閱讀器外，其他設備上隱藏元素；close：顯示關閉按鈕；caret：顯示下拉式功能。
（十）Bootstrap 響應式實用工具
在Bootstrap3的響應式實用工具只適用於塊和表切換。
利用visible-xs/sm/md/lg和hidden-xs/sm/md/lg實現在哪種大小的設備下實現顯示和隱藏。
三、Bootstrap 佈局組件
（一）字體圖標(Glyphicons)
Bootstrap可免費使用Glyphicon字體圖標，使用方法：<span class="glyphicon glyphicon-search"></span>；
（二）下拉菜單（Dropdowns）
1、如需使用下拉菜單，只需要在 div表class爲dropdown內加上下拉菜單即可。例如：<div class="dropdown">；
2、下拉列表ul標籤class爲dropdown-menu表示下拉菜單；其中添加pull-right 來向右對齊下拉菜單。例如：<ul class="dropdown-menu" role="menu" >
3、選項中添加標題使用dropdown-header；例如：<li role="presentation" class="dropdown-header">下拉菜單標題</li>；
4、dropup：指定向上彈出的下拉菜單；例如： <div class="dropup">；
5、divider：下拉菜單中的分割線；例如：<li role="presentation" class="divider"></li>；
6、disabled：下拉菜單中的禁用項；例如：<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>；
（三）Bootstrap 按鈕組
1、.btn-group：該 class 用於形成基本的按鈕組。在 .btn-group 中放置一系列帶有 class .btn 的按鈕，水平進行展示。例如：<div class="btn-group">；
2、按鈕工具欄：該 class 有助於把幾組 <div class="btn-group"> 結合到一個 <div class="btn-toolbar"> 中，一般獲得更復雜的組件。例如：<div class="btn-toolbar" role="toolbar">；
3、.btn-group-lg, .btn-group-sm, .btn-group-xs用於設置按鈕組的大小。
4、.btn-group-vertical讓一組按鈕垂直堆疊顯示，而不是水平堆疊顯示。例如：<div class="btn-group-vertical">；
5、按鈕組配合下拉菜單嵌套使用：在一個按鈕組內嵌套另一個按鈕組，即，在一個 .btn-group 內嵌套另一個 .btn-group 。
6、Bootstrap 按鈕下拉菜單：
（1）向按鈕添加下拉菜單，只需要簡單地在在一個 .btn-group 中放置按鈕和下拉菜單即可。您也可以使用 <span class="caret"></span> 來指示按鈕作爲下拉菜單。
（2）分割的按鈕下拉菜單：添加兩個按鈕標籤即可。例如：<button type="button" class="btn btn-default">默認</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>；
（四）Bootstrap 輸入框組
1、向 .form-control 的input標籤添加前綴或後綴元素的步驟如下：
（1）把前綴或後綴元素放在一個帶有 class .input-group 的 <div> 中。
（2）接着，在相同的 <div> 內，在 class 爲 .input-group-addon 的 <span> 內放置額外的內容。
（3）把該 <span> 放置在 <input> 元素的前面或者後面。
2、可以通過向 .input-group 添加相對錶單大小的 class（比如 .input-group-lg、input-group-sm）來改變輸入框組的大小。
3、可以把按鈕作爲輸入框組的前綴或者後綴元素，這個時候您就不是添加 .input-group-addon class，您需要使用 class .input-group-btn 來包裹按鈕。
（五）Bootstrap 導航元素
1、表格導航或標籤：
（1）以一個帶有 class .nav 的無序列表開始。
（2）添加 class .nav-tabs。例如：<ul class="nav nav-tabs">；
2、膠囊式的導航菜單：只需要使用 class .nav-pills 代替 .nav-tabs 即可，其他的步驟與上面相同。例如：<ul class="nav nav-pills">；
3、垂直的膠囊式導航菜單：可以在使用 class .nav、.nav-pills 的同時使用 class .nav-stacked，讓膠囊垂直堆疊。例如：<ul class="nav nav-pills nav-stacked">；
4、兩端對齊的導航：通過在分別使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同時使用 class .nav-justified，讓標籤式或膠囊式導航菜單與父元素等寬。在更小的屏幕上，導航鏈接會堆疊。
5、禁用鏈接：對每個 .nav class，如果添加了 .disabled class，則會創建一個灰色的鏈接，同時禁用了該鏈接的 :hover 狀態。
6、帶有下拉菜單的標籤：
（1）以一個帶有 class .nav 的無序列表開始。
（2）添加 class .nav-tabs。
（3）添加帶有 .dropdown-menu class 的無序列表。
注意：帶有下拉菜單的膠囊步驟與創建帶有下拉菜單的標籤相同，只是需要把 .nav-tabs class 改爲 .nav-pills。
7、 與 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 設置標籤頁對應的內容隨標籤的切換而更改。
例如：<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">首頁</a></li>
<li><a data-toggle="tab" href="#menu1">菜單 1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>首頁</h3>
<p>菜鳥教程 —— 學的不僅是技術，更是夢想！！！</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>菜單 1</h3>
<p>這是菜單 1 顯示的內容。這是菜單 1 顯示的內容。這是菜單 1 顯示的內容。</p>
</div>
</div>
（六）Bootstrap 導航欄（和導航元素區分開）
1、默認的導航欄：
（1）向 <nav> 標籤添加 class .navbar、.navbar-default。
（2）向上面的元素添加 role="navigation"，有助於增加可訪問性。
（3）向 <div> 元素添加一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。
（4）爲了嚮導航欄添加鏈接，只需要簡單地添加帶有 class .nav、.navbar-nav 的無序列表即可。
2、結合圖標的導航鏈接：使用 class glyphicon glyphicon-* 來設置圖標。
3、組件對齊方式：可以使用實用工具 class .navbar-left 或 .navbar-right 向左或向右對齊導航欄中的組件。例如： <ul class="nav navbar-nav navbar-left">；
4、導航欄動態定位：
（1）固定到頂部：要讓導航欄固定在頁面的頂部，請向 .navbar class 添加 class .navbar-fixed-top。例如：<nav class="navbar navbar-default navbar-fixed-top" role="navigation">；
（2）固定到底部：要讓導航欄固定在頁面的底部，請向 .navbar class 添加 class .navbar-fixed-bottom。
（3）動態導航欄：能隨着頁面一起滾動的導航欄，請添加 .navbar-static-top class。
5、Bootstrap 麪包屑導航（Breadcrumbs）：是一種基於網站層次信息的顯示方式。
（1）Bootstrap 中的麪包屑導航（Breadcrumbs）是一個簡單的帶有 .breadcrumb class 的無序列表。例如：<ul class="breadcrumb">；
注意：分隔符會通過 CSS（bootstrap.min.css）自動被添加：
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}
（七）Bootstrap 分頁
分頁（Pagination），是一種無序列表，Bootstrap 像處理其他界面元素一樣處理分頁。
1、.pagination添加該 class 來在頁面上顯示分頁。例如：<ul class="pagination">；
2、.disabled, .active：通過使用 .disabled 來定義不可點擊的鏈接，通過使用 .active 來指示當前的頁面。
3、.pagination-lg, .pagination-sm設置分頁的大小。例如：<ul class="pagination pagination-lg">；
4、翻頁（Pager）添加該 class 來獲得翻頁鏈接。例如：<ul class="pager">；
5、.previous, .next：使用 class .previous 把鏈接向左對齊，使用 .next 把鏈接向右對齊。
6、.disabled添加該 class 來設置對應按鈕禁止使用。
（八）Bootstrap 標籤
標籤可用於計數、提示或頁面上其他的標記顯示。使用 class .label 來顯示標籤。可以使用修飾的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 來改變標籤的外觀。
例如：<span class="label label-default">默認標籤</span>；
（九）Bootstrap 徽章（Badges）
徽章與標籤相似，主要的區別在於徽章的邊角更加圓滑。徽章（Badges）主要用於突出顯示新的或未讀的項。如需使用徽章，只需要把 <span class="badge"> 添加到鏈接、Bootstrap 導航等這些元素上即可。
1、可以在激活狀態的膠囊式導航和列表導航中放置徽章。通過使用 <span class="badge"> 來激活鏈接。例如：<span class="badge pull-right">42</span>首頁</a>；
（十）Bootstrap 超大屏幕（Jumbotron）
超大屏幕（Jumbotron）。顧名思義該組件可以增加標題的大小，併爲登陸頁面內容添加更多的外邊距（margin）。
1、爲了獲得佔用全部寬度且不帶圓角的超大屏幕，請在所有的 .container class 外使用 .jumbotron class。
2、使用超大屏幕（Jumbotron）的步驟如下：
（1）創建一個帶有 class .jumbotron. 的容器 <div>。
（2）除了更大的 <h1>，字體粗細 font-weight 被減爲 200。
（十一）Bootstrap 頁面標題（Page Header）
頁面標題（Page Header）是個不錯的功能，它會在網頁標題四周添加適當的間距。當一個網頁中有多個標題且每個標題之間需要添加一定的間距時，頁面標題這個功能就顯得特別有用。如需使用頁面標題（Page Header），請把您的標題放置在帶有 class .page-header 的 <div> 中。
例如：<div class="page-header">。
（十二）Bootstrap 縮略圖
1、使用 Bootstrap 創建縮略圖的步驟如下：
（1）在圖像周圍添加帶有 class .thumbnail 的 <a> 標籤。
（2）這會添加四個像素的內邊距（padding）和一個灰色的邊框。
（3）當鼠標懸停在圖像上時，會動畫顯示出圖像的輪廓。
（十三）Bootstrap 警告（Alerts）
警告（Alerts）向用戶提供了一種定義消息樣式的方式。
1、可取消的警告（Dismissal Alerts）
（1）通過創建一個 <div>，並向其添加一個 .alert class 和四個上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來添加一個基本的警告框。
（2）同時向上面的 <div> class 添加可選的 .alert-dismissable。
2、警告（Alerts）中的鏈接：
（1）通過創建一個 <div>，並向其添加一個 .alert class 和四個上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來添加一個基本的警告框。
（2）使用 .alert-link 實體類來快速提供帶有匹配顏色的鏈接。
例如：<div class="alert alert-success">
<a href="#" class="alert-link">成功！很好地完成了提交。</a>
</div>
（十四）Bootstrap 進度條
1、默認的進度條：
（1）添加一個帶有 class .progress 的 <div>。
（2）接着，在上面的 <div> 內，添加一個帶有 class .progress-bar 的空的 <div>。
（3）添加一個帶有百分比表示的寬度的 style 屬性，例如 style="width: 60%"; 表示進度條在 60% 的位置。
2、交替的進度條：
（1）添加一個帶有 class .progress 的 <div>。
（2）接着，在上面的 <div> 內，添加一個帶有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
（3）添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置。
3、條紋的進度條：
（1）添加一個帶有 class .progress 和 .progress-striped 的 <div>。
（2）接着，在上面的 <div> 內，添加一個帶有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
（3）添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置。
（十五）Bootstrap 多媒體對象（Media Object）
多媒體對象的樣式可用於創建各種類型的組件（比如：博客評論），我們可以在組件中使用圖文混排，圖像可以左對齊或者右對齊。媒體對象可以用更少的代碼來實現媒體對象與文字的混排。
1、添加多媒體對象：
（1）在 <div> 元素上添加 .media 類來創建一個多媒體對象。
（2）使用 .media-left 類讓多媒體對象(圖片)來實現左對齊，同樣 .media-right 類實現了右對齊。
（3）文本內容放在 class="media-body" 的 div 中，圖片左對齊則放在 class="media-body" 之前，圖片右對齊則放在 class="media-body" 之後。
此外，你還可以使用 .media-heading 類來設置標題。
2、圖像位置位於頂部、底部、居中對齊，通過對圖像div添加media-top、media-middle、media-bottom來實現。例如： <div class="media-left media-bottom">；
3、允許內嵌多媒體對象。
（十六）Bootstrap 列表組
列表組件用於以列表形式呈現複雜的和自定義的內容。
1、創建過程：
（1）向元素 <ul> 添加 class .list-group。
（2）向 <li> 添加 class .list-group-item。
2、向列表組添加徽章：只需要在 <li> 元素中添加 <span class="badge"> 即可。
3、向列表組添加鏈接：需要使用 <a> 代替 <li> 元素。即使用鏈接標籤，不適用無序列表了。
4、向列表組添加自定義內容:在鏈接的列表組添加任意的 HTML 內容。
例如：<a> html內容 </a>
（十七）Bootstrap 面板（Panels）
面板組件用於把 DOM 組件插入到一個盒子中。創建一個基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可。
1、添加面板標題兩種方法：
（1）使用 .panel-heading class 可以很簡單地向面板添加標題容器。
（2）使用帶有 .panel-title class 的 <h1>-<h6> 來添加預定義樣式的標題。
2、面板腳註：只需要把按鈕或者副文本放在帶有 class .panel-footer 的 <div> 中即可。
3、帶語境色彩的面板：使用語境狀態類 panel-primary、panel-success、panel-info、panel-warning、panel-danger，來設置帶語境色彩的面板。例如：<div class="panel panel-success">；
4、帶表格的面板：可以在面板中使用 class .table。假設有個 <div> 包含 .panel-body，我們可以向表格的頂部添加額外的邊框用來分隔。如果沒有包含 .panel-body 的 <div>，則組件會無中斷地從面板頭部移動到表格。
5、帶列表組的面板：通過在 <div> 元素中添加 .panel 和 .panel-default 類來創建面板，並在面板中添加列表組。
（十八）Bootstrap Well
Well 是一種會引起內容凹陷顯示或插圖效果的容器 <div>。爲了創建 Well，只需要簡單地把內容放在帶有 class .well 的 <div> 中即可。
1、尺寸大小：可以使用可選類 well-lg 或 well-sm 來改變 Well 的尺寸大小。這兩個類是與 .well 類結合使用的。
三、Bootstrap 插件概念
Bootstrap 自帶 12 種 jQuery 插件，擴展了功能，可以給站點添加更多的互動。利用 Bootstrap 數據 API（Bootstrap Data API），大部分的插件可以在不編寫任何代碼的情況下被觸發。
注意：引用 Bootstrap 插件時要查看 Bootstrap 當前支持的 jQuery 版本。
（一）data 屬性
1、通過 data 屬性 API 就能使用所有的 Bootstrap 插件，無需寫一行 JavaScript 代碼。
2、關閉 data 屬性 API 的方法，即解除以 data-api 爲命名空間並綁定在文檔上的事件。例如：$(document).off('.data-api')；
注意：關閉指定插件只需要在 data-api 命名空間前加上該插件的名稱作爲命名空間即可，例如：$(document).off('.alert.data-api')。
（二）編程方式的 API
所有公開的 API 都是支持單獨或鏈式調用方式，並且返回其所操作的元素集合（注：和jQuery的調用形式一致）。
注意：所有的方法都可以接受一個可選的選項對象作爲參數，或者一個代表特定方法的字符串，或者不帶任何參數（這種情況下，將會初始化插件爲默認行爲）。
（三）避免命名空間衝突
通過調用插件的 .noConflict 方法恢復其原始值。
例如：var bootstrapButton = $.fn.button.noConflict() ；
（四）事件
Bootstrap 爲大多數插件的獨特行爲提供了自定義事件，一般有兩種形式：
1、動詞不定式：這會在事件開始時被觸發。動詞不定式事件提供了 preventDefault 功能。這使得在事件開始前可以停止操作的執行。
2、過去分詞形式：這會在動作執行完畢之後被觸發。例如 ex: shown。
四、Bootstrap 插件
（一）Bootstrap 過渡效果（Transition）插件
Transition.js 是 transitionEnd 事件和 CSS 過渡效果模擬器的基本幫助器類。它被其他插件用來檢查 CSS 過渡效果支持，並用來獲取過渡效果。
（二）Bootstrap 模態框（Modal）插件
模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。
1、使用方法：
（1）通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設置屬性 data-toggle="modal"，同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態框（帶有 id="identifier"）。
（2）通過 JavaScript：使用這種技術，您可以通過簡單的一行 JavaScript 來調用帶有 id="identifier" 的模態框，$('#identifier').modal(options)；
2、modal(options)方法的使用：
（1）modal('toggle')：手動切換模態框。
（2）modal('show')：手動打開模態框。
（3）modal('hide')：手動隱藏模態框。
3、模態框事件
（1）show.bs.modal：在調用 show 方法後觸發。
$('#identifier').on('show.bs.modal', function () {
// 執行一些動作...
})
（2）shown.bs.modal：當模態框對用戶可見時觸發（將等待 CSS 過渡效果完成）。
（3）hide.bs.modal：當調用 hide 實例方法時觸發。
（4）hidden.bs.modal：當模態框完全對用戶隱藏時觸發。
（三）Bootstrap 下拉菜單（Dropdown）插件
使用下拉菜單（Dropdown）插件，您可以向任何組件（比如導航欄、標籤頁、膠囊式導航菜單、按鈕等）添加下拉菜單。
1、使用方法：
（1）通過 data 屬性：向鏈接或按鈕添加 data-toggle="dropdown" 來切換下拉菜單。
例如：<a data-toggle="dropdown" href="#">下拉菜單（Dropdown）觸發器</a>；
注意：如果您需要保持鏈接完整（在瀏覽器不啓用 JavaScript 時有用），請使用 data-target 屬性代替 href="#"。
（2）通過 JavaScript：通過 JavaScript 調用下拉菜單切換，請使用下面的方法：$('.dropdown-toggle').dropdown()；
2、dropdown()方法：實現顯示或隱藏下拉菜單：$().dropdown('toggle')；
（四）Bootstrap 滾動監聽（Scrollspy）插件
滾動監聽（Scrollspy）插件是隨着您的滾動，基於滾動條的位置嚮導航欄添加 .active class。即到達指定的導航位置。
1、使用方法：
（1）通過 data 屬性：向您想要監聽的元素（通常是 body）添加 data-spy="scroll"。然後添加帶有 Bootstrap .nav 組件的父元素的 ID 或 class 的屬性 data-target。爲了它能正常工作，您必須確保頁面主體中有匹配您所要監聽鏈接的 ID 的元素存在。
（2）通過 JavaScript：您可以通過 JavaScript 調用滾動監聽，選取要監聽的元素，然後調用 .scrollspy() 函數：$('body').scrollspy({ target: '.navbar-example' })；
（五）Bootstrap 標籤頁（Tab）插件
通過這個插件您可以把內容放置在標籤頁或者是膠囊式標籤頁甚至是下拉菜單標籤頁中。
1、使用方法：
（1）通過 data 屬性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到錨文本鏈接中。添加 nav 和 nav-tabs 類到 ul 中，將會應用 Bootstrap 標籤樣式，添加 nav 和 nav-pills 類到 ul 中，將會應用 Bootstrap 膠囊式樣式。
（2）通過 JavaScript：您可以使用 Javascript 來啓用標籤頁，如下：
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
2、淡入淡出效果：如果需要爲標籤頁設置淡入淡出效果，請添加 .fade 到每個 .tab-pane 後面。第一個標籤頁必須添加 .in 類，以便淡入顯示初始內容。
3、.$().tab：該方法可以激活標籤頁元素和內容容器。標籤頁需要用一個 data-target 或者一個指向 DOM 中容器節點的 href。例如：$('#myTab li:eq(1) a').tab('show');
4、事件：
（1）show.bs.tab：該事件在標籤頁顯示時觸發，但是必須在新標籤頁被顯示之前。分別使用 event.target 和 event.relatedTarget 來定位到激活的標籤頁和前一個激活的標籤頁。
（2）shown.bs.tab：該事件在標籤頁顯示時觸發，但是必須在某個標籤頁已經顯示之後。分別使用 event.target 和 event.relatedTarget 來定位到激活的標籤頁和前一個激活的標籤頁。
（六）Bootstrap 提示工具（Tooltip）插件
當您想要描述一個鏈接的時候，提示工具（Tooltip）就顯得非常有用。
1、使用方法：
（1）通過 data 屬性：如需添加一個提示工具（tooltip），只需向一個錨標籤添加 data-toggle="tooltip" 即可。錨的 title 即爲提示工具（tooltip）的文本。默認情況下，插件把提示工具（tooltip）設置在頂部。
（2）通過 JavaScript：通過 JavaScript 觸發提示工具（tooltip）：$('#identifier').tooltip(options)；
2、tooltip(options)方法：
（1）tooltip('toggle')切換顯示/隱藏元素的提示工具。
（2）tooltip('show')顯示元素的提示工具。
（3）tooltip('hide')隱藏元素的提示工具。
3、事件：
（1）show.bs.tooltip：當調用 show 實例方法時立即觸發該事件。
（2）shown.bs.tooltip：當提示工具對用戶可見時觸發該事件（將等待 CSS 過渡效果完成）。
（3）hide.bs.tooltip：當調用 hide 實例方法時立即觸發該事件。
（4）hidden.bs.tooltip：當提示工具對用戶隱藏時觸發該事件（將等待 CSS 過渡效果完成）。
（七）Bootstrap 彈出框（Popover）插件
彈出框的內容完全可使用 Bootstrap 數據 API（Bootstrap Data API）來填充。該方法依賴於工具提示（tooltip）。
1、使用方法：
（1）通過 data 屬性：如需添加一個彈出框（popover），只需向一個錨/按鈕標籤添加 data-toggle="popover" 即可。錨的 title 即爲彈出框（popover）的文本。默認情況下，插件把彈出框（popover）設置在頂部。
（2）通過 JavaScript：通過 JavaScript 啓用彈出框（popover）：$('#identifier').popover(options)；
注意：彈出框（Popover）插件不像之前所討論的下拉菜單及其他插件那樣，它不是純 CSS 插件。如需使用該插件，您必須使用 jquery 激活它（讀取 javascript）。使用下面的腳本來啓用頁面中的所有的彈出框（popover）：
$(function () { $("[data-toggle='popover']").popover(); });
2、popover(options)同提示工具類似。
3、事件同提示工具類似。
（八）Bootstrap 警告框（Alert）插件
警告框（Alert）消息大多是用來向終端用戶顯示諸如警告或確認消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。
1、使用方法：
（1）通過 data 屬性：通過數據 API（Data API）添加可取消功能，只需要向關閉按鈕添加 data-dismiss="alert"，就會自動爲警告框添加關閉功能。
（2）通過 JavaScript：通過 JavaScript 添加可取消功能：$(".alert").alert()；
2、alert('close')方法：關閉所有的警告框。
3、alert()該方法讓所有的警告框都帶有關閉功能。
4、警告框事件：
（1）close.bs.alert：當調用 close 實例方法時立即觸發該事件。
（2）closed.bs.alert：當警告框被關閉時觸發該事件（將等待 CSS 過渡效果完成）。
$('#myalert').bind('closed.bs.alert', function () {
// 執行一些動作...
})
（九）Bootstrap 按鈕（Button）插件
通過按鈕（Button）插件，您可以添加進一些交互，比如控制按鈕狀態，或者爲其他組件（如工具欄）創建按鈕組。
1、加載狀態：只需要簡單地向 button 元素添加 data-loading-text="Loading..." 作爲其屬性即可。
2、按鈕狀態切換：只需向 button 元素添加 data-toggle="button" 作爲其屬性即可。
（十）Bootstrap 摺疊（Collapse）插件
摺疊（Collapse）插件可以很容易地讓頁面區域摺疊起來。無論您用它來創建摺疊導航還是內容面板，它都允許很多內容選項。
1、創建方法：
（1）data-toggle="collapse" 添加到您想要展開或摺疊的組件的鏈接上。
（2）href 或 data-target 屬性添加到父組件，它的值是子組件的 id。
（3）data-parent 屬性把摺疊面板（accordion）的 id 添加到要展開或摺疊的組件的鏈接上。
2、使用方法：
（1）通過 data 屬性：向元素添加 data-toggle="collapse" 和 data-target，自動分配可摺疊元素的控制。data-target 屬性接受一個 CSS 選擇器，並會對其應用摺疊效果。請確保向可摺疊元素添加 class .collapse。如果您希望它默認情況下是打開的，請添加額外的 class .in。
爲了向可摺疊控件添加類似摺疊面板的分組管理，請添加 data 屬性 data-parent="#selector"。
（2）通過 JavaScript：可通過 JavaScript 激活 collapse 方法，如下所示：
$('.collapse').collapse()；
3、collapse(options)方法和提示工具類似。
4、摺疊事件和提示工具類似。
（十一）Bootstrap 輪播（Carousel）插件
Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。除此之外，內容也是足夠靈活的，可以是圖像、內嵌框架、視頻或者其他您想要放置的任何類型的內容。
1、使用方法：
（1）通過 data 屬性：使用 data 屬性可以很容易控制輪播（Carousel）的位置。
a、屬性 data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對於當前位置的位置。
b、使用 data-slide-to 來向輪播傳遞一個原始滑動索引，data-slide-to="2" c、將把滑塊移動到一個特定的索引，索引從 0 開始計數。
data-ride="carousel" 屬性用於標記輪播在頁面加載時就開始動畫播放。
（2）通過 JavaScript：輪播（Carousel）可通過 JavaScript 手動調用，如下所示：
$('.carousel').carousel()；
2、carousel(options)方法的使用:
（1）carousel('cycle')從左到右循環輪播項目。
（2）carousel('pause')停止輪播循環項目。
（3）carousel(number)循環輪播到某個特定的幀（從 0 開始計數，與數組類似）。
（4）carousel('prev')循環輪播到上一個項目。
（5）carousel('next')循環輪播到下一個項目。
3、輪播事件：
（1）slide.bs.carousel：當調用 slide 實例方法（輪播）時立即觸發該事件。
（2）slid.bs.carousel：當輪播完成幻燈片過渡效果時觸發該事件。
$('#identifier').on('slid.bs.carousel', function () {
// 執行一些動作...
})
（十二）Bootstrap 附加導航（Affix）插件
附加導航（Affix）插件允許指定 <div> 固定在頁面的某個位置。一個常見的例子是社交圖標。它們將在某個位置開始，但當頁面點擊某個標記，該 <div> 會鎖定在某個位置，不會隨着頁面其他部分一起滾動。
1、使用方法：
（1）通過 data 屬性：如需向元素添加附加導航（Affix）行爲，只需要向需要監聽的元素添加 data-spy="affix" 即可。請使用偏移來定義何時切換元素的鎖定和移動。
（2）通過 JavaScript：您可以通過 JavaScript 手動爲某個元素添加附加導航（Affix），如下所示：
$('#myAffix').affix({
offset: {
top: 100, bottom: function () {
return (this.bottom =
$('.bs-footer').outerHeight(true))
}
}
})
五、Bootstrap 其他
（一）Bootstrap UI 編輯器
1、Bootply 是一款很棒的 Bootstrap UI 編輯工具，儘可能簡單的讓用戶編輯 Bootstrap 友好的 CSS ，HTML 和 Javascript 。同時也是一個可拖拽的可視化編輯器，用來設計，創建原型和測試 Bootstrap 框架。Bootply 有個代碼存儲庫，裏面包括了 Bootstrap 代碼片段，示例和模板。除了以上這些，更吸引人的是它有個非常活躍的 Bootply 社區，用戶可以很方便的發現，分享和展示相關的代碼和片段。
2、Lavish 是個幫助用戶從一個圖像中定製自己喜歡的 Bootstrap 配色方案。用戶可以從圖像中選擇各種顏色用在 body 背景，鏈接，頭部，菜單，標籤，文本，下拉菜單等等元素上。一旦你確定了 Bootstrap 配色方案，就可以很方便的下載相應的 Boostrap.css 文件。
3、Style Bootstrap 是個非常棒的內置瀏覽器的 GUI 實用工具，幫助用戶自定義 Twitter Bootstrap 外觀。它非常容易進行自定義操作。從 body 風格，字體排版，按鈕，導航，格式，通知提示和其他用戶很容易根據自己的意願自定義的元素。除了強大的自定義功能，它還可以很容易生成可下載的 CSS 文件。
4、Bootstrap Live Editor 是個所見即所得的構建 Bootstrap 的編輯器。在 Bootstrap 準備好的內容和代碼片段的基礎上提供一個又好又優雅的方法來編輯和美化 html，也因此它是個明智的選擇。除此之外，它還包括高級的選項比如按鈕配置，自定義標籤和爲用戶做最明智最有益的選擇。
（二）Bootstrap HTML編碼規範
1、對於屬性的定義，確保全部使用雙引號，絕不要使用單引號。
2、不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規範中明確說明這是可選的。
3、不要省略可選的結束標籤（closing tag）（例如，</li> 或 </body>）。
4、根據 HTML5 規範，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因爲 text/css 和 text/javascript 分別是它們的默認值。
5、避免使用JavaScript 生成的標籤。
（三）Bootstrap CSS編碼規範
1、避免爲 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。
2、與 <link> 標籤相比，@import 指令要慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。替代辦法有以下幾種：
（1）使用多個 <link> 元素；
（2）通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯爲一個文件；
（3）通過 Rails、Jekyll 或其他系統中提供過 CSS 文件合併功能；
3、class 名稱中只能出現小寫字符和破折號（dashe）（不是下劃線，也不是駝峯命名法）。
4、應當儘量限制使用簡寫形式的屬性聲明。
（四）Less 簡介
Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製作主題、擴充。