Bootstrap
1、Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。您可以從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。
2、實例採用的是百度的靜態資源庫(http://cdn.code.baidu.com/)上的Bootstrap資源。百度的靜態資源庫的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費,引入代碼如下：
http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js
http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css
http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap-theme.min.css
http://apps.bdimg.com/libs/jquery/2.0.0/css/jquery.min.js
<link href=”http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
<script src=”http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
Bootstrap Css
1、width 屬性控制設備的寬度。假設您的網站將被帶有不同屏幕分辨率的設備瀏覽，那麼將它設置爲 device-width 可以確保它能正確呈現在不同設備上。nitial-scale=1.0 確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
2、通過添加 img-responsive class 可以讓 Bootstrap 3 中的圖像對響應式佈局的支持更友好。
<img src=”…” class=”img-responsive” alt=”響應式圖像”>
3、Bootstrap 網格系統（Grid System）
Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，可以隨着設備或視口大小的增加而適當地擴展到 12 列。它包含了用於簡單的佈局選項的預定義類，也包含了用於生成更多語義佈局的功能強大的混合類。
（1）、下表總結了 Bootstrap 網格系統如何跨多個設備工作：
下面是 Bootstrap 網格的基本結構：
- <div class=“container”>
- <div class=“row”>
- <div class=“col-*-*”></div>
- <div class=“col-*-*”></div>
- </div>
- <div class=“row”>…</div>
- </div>
- <div class=“container”>….
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....- </pre></p><p></p><p><span style=“font-family:FangSong_GB2312;font-size:14px;”><span style=“color:rgb(51, 51, 51);”> （2）</span><span style=“color:rgb(51, 51, 51);”>、</span><span style=“color:rgb(51, 51, 51);”>我們在小設備瀏覽時無法確定網格顯示的位置。爲了解決這個問題，使用 可以使用 </span><strong><span style=“color:rgb(51, 51, 51);”>.clearfix</span></strong><span style=“color:rgb(51, 51, 51);”> class和 </span><a target=_blank href=“http://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html”><span style=“color:rgb(100, 133, 76);”>響應式實用工具</span></a><span style=“color:rgb(51, 51, 51);”>來解決，如下面實例所示：</span></span></p><p><span style=“color:rgb(51, 51, 51);”><span style=“font-family:FangSong_GB2312;font-size:14px;”>響應式實用工具：</span></span></p><p><span style=“color:rgb(51, 51, 51);”><span style=“font-family:FangSong_GB2312;font-size:14px;”><img src=“https://img-blog.csdn.net/20160717002315694?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center” alt=“” /></span></span></p><p><strong><span style=“color:rgb(0, 0, 255);”><span style=“font-family:FangSong_GB2312;font-size:14px;”><div class=“clearfix visible-xs”></div></span></span></strong></p><p><span style=“font-family:FangSong_GB2312;font-size:14px;”><span style=“color:rgb(51, 51, 51);”> （3）</span><span style=“color:rgb(51, 51, 51);”>、</span><span style=“color:rgb(51, 51, 51);”>爲了在大屏幕顯示器上使用偏移，請使用 </span><strong><span style=“color:rgb(51, 51, 51);”>.col-md-offset-*</span></strong><span style=“color:rgb(51, 51, 51);”> 類。這些類會把一個列的左外邊距（margin）增加 </span><strong><span style=“color:rgb(51, 51, 51);”>*</span></strong><span style=“color:rgb(51, 51, 51);”> 列，其中 </span><strong><span style=“color:rgb(51, 51, 51);”>*</span></strong><span style=“color:rgb(51, 51, 51);”> 範圍是從 </span><strong><span style=“color:rgb(51, 51, 51);”>1</span></strong><span style=“color:rgb(51, 51, 51);”>到 </span><strong><span style=“color:rgb(51, 51, 51);”>11</span></strong><span style=“color:rgb(51, 51, 51);”>。</span><span style=“color:rgb(51, 51, 51);”>例如：</span></span></p><p><strong><span style=“font-family:FangSong_GB2312;font-size:14px;”><span style=“color:rgb(0, 0, 255);”><div class=“col-xs-6 col-md-offset-3” </span><span style=“color:rgb(0, 0, 255);”>></div></span></span></strong></p><p><span style=“font-family:FangSong_GB2312;font-size:14px;”><span style=“color:rgb(51, 51, 51);”> （4）</span><span style=“color:rgb(51, 51, 51);”>、</span><span style=“color:rgb(51, 51, 51);”>爲了在內容中嵌套默認的網格，請添加一個新的 </span><strong><span style=“color:rgb(51, 51, 51);”>.row</span></strong><span style=“color:rgb(51, 51, 51);”>，並在一個已有的 </span><strong><span style=“color:rgb(51, 51, 51);”>.col-md-*</span></strong><span style=“color:rgb(51, 51, 51);”> 列內添加一組 </span><strong><span style=“color:rgb(51, 51, 51);”>.col-md-*</span></strong><span style=“color:rgb(51, 51, 51);”> 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須佔滿12列）。</span></span></p><p><pre name=“code” class=“html”><div class=“row”>
- <div class=“col-*-*”>
- <div class=“row”>
- <div class=“col-*-*”></div>
- <div class=“col-*-*”></div>
- </div>
- <div class=“row”>…</div>
- </div>
- </div>
</pre></p><p></p><p><span style="font-family:FangSong_GB2312;font-size:14px;"><span style="color:rgb(51, 51, 51);"> （2）</span><span style="color:rgb(51, 51, 51);">、</span><span style="color:rgb(51, 51, 51);">我們在小設備瀏覽時無法確定網格顯示的位置。爲了解決這個問題，使用 可以使用 </span><strong><span style="color:rgb(51, 51, 51);">.clearfix</span></strong><span style="color:rgb(51, 51, 51);"> class和 </span><a target=_blank href="http://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html"><span style="color:rgb(100, 133, 76);">響應式實用工具</span></a><span style="color:rgb(51, 51, 51);">來解決，如下面實例所示：</span></span></p><p><span style="color:rgb(51, 51, 51);"><span style="font-family:FangSong_GB2312;font-size:14px;">響應式實用工具：</span></span></p><p><span style="color:rgb(51, 51, 51);"><span style="font-family:FangSong_GB2312;font-size:14px;"><img src="https://img-blog.csdn.net/20160717002315694?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span></span></p><p><strong><span style="color:rgb(0, 0, 255);"><span style="font-family:FangSong_GB2312;font-size:14px;"><div class="clearfix visible-xs"></div></span></span></strong></p><p><span style="font-family:FangSong_GB2312;font-size:14px;"><span style="color:rgb(51, 51, 51);"> （3）</span><span style="color:rgb(51, 51, 51);">、</span><span style="color:rgb(51, 51, 51);">爲了在大屏幕顯示器上使用偏移，請使用 </span><strong><span style="color:rgb(51, 51, 51);">.col-md-offset-*</span></strong><span style="color:rgb(51, 51, 51);"> 類。這些類會把一個列的左外邊距（margin）增加 </span><strong><span style="color:rgb(51, 51, 51);">*</span></strong><span style="color:rgb(51, 51, 51);"> 列，其中 </span><strong><span style="color:rgb(51, 51, 51);">*</span></strong><span style="color:rgb(51, 51, 51);"> 範圍是從 </span><strong><span style="color:rgb(51, 51, 51);">1</span></strong><span style="color:rgb(51, 51, 51);">到 </span><strong><span style="color:rgb(51, 51, 51);">11</span></strong><span style="color:rgb(51, 51, 51);">。</span><span style="color:rgb(51, 51, 51);">例如：</span></span></p><p><strong><span style="font-family:FangSong_GB2312;font-size:14px;"><span style="color:rgb(0, 0, 255);"><div class="col-xs-6 col-md-offset-3" </span><span style="color:rgb(0, 0, 255);">></div></span></span></strong></p><p><span style="font-family:FangSong_GB2312;font-size:14px;"><span style="color:rgb(51, 51, 51);"> （4）</span><span style="color:rgb(51, 51, 51);">、</span><span style="color:rgb(51, 51, 51);">爲了在內容中嵌套默認的網格，請添加一個新的 </span><strong><span style="color:rgb(51, 51, 51);">.row</span></strong><span style="color:rgb(51, 51, 51);">，並在一個已有的 </span><strong><span style="color:rgb(51, 51, 51);">.col-md-*</span></strong><span style="color:rgb(51, 51, 51);"> 列內添加一組 </span><strong><span style="color:rgb(51, 51, 51);">.col-md-*</span></strong><span style="color:rgb(51, 51, 51);"> 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須佔滿12列）。</span></span></p><p><pre name="code" class="html"><div class="row">
<div class="col-*-*">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
</div>（5）、可以很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 範圍是從 1 到 11。我們有兩列布局，左列很窄，作爲側邊欄。我們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。
4、Bootstrap排版
（1）、內聯子標題
如果需要向任何標題添加一個內聯子標題，只需要簡單地在元素兩旁添加 <small>，或者添加 .small class，這樣子您就能得到一個字號更小的顏色更淺的文本。例如：
<h1>我是標題1 h1. <small>我是副標題1 h1</small></h1>
（2）、引導主體副本
爲了給段落添加強調文本，則可以添加 class=”lead”，這將得到更大更粗、行高更高的文本。例如：
<p class=”lead”></p>
（3）、強調
HTML 的默認強調標籤 <small>（設置文本爲父文本大小的 85%）、<strong>（設置文本爲更粗的文本）、<em>（設置文本爲斜體）。例如：
<small>本行內容是在標籤內</small><br>
<strong>本行內容是在標籤內</strong><br>
<em>本行內容是在標籤內，並呈現爲斜體</em><br>
<p class=”text-left”>向左對齊文本</p>
<p class=”text-center”>居中對齊文本</p>
<p class=”text-right”>向右對齊文本</p>
<p class=”text-muted”>本行內容是減弱的</p>
（4）、縮寫
HTML 元素提供了用於縮寫的標記，比如 WWW 或 HTTP。Bootstrap 定義 <abbr> 元素的樣式爲顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示完整的文本（只要您爲 <abbr> title 屬性添加了文本）。爲了得到一個更小字體的文本，請添加 .initialism 到 <abbr>。例如：
<abbr title=”World Wide Web”>WWW</abbr><br>
<abbr title=”Real Simple Syndication” class=”initialism”>RSS</abbr>
（5）、地址（Address）
使用 <address> 標籤，您可以在網頁上顯示聯繫信息。由於 <address> 默認爲 display:block;，您需要使用標籤來爲封閉的地址文本添加換行。
（6）、引用（Blockquote）
您可以在任意的 HTML 文本旁使用默認的 <blockquote>。其他選項包括，添加一個 <small> 標籤來標識引用的來源，使用 class .pull-right 向右對齊引用。
（7）、列表
Bootstrap 支持有序列表、無序列表和定義列表。
有序列表：有序列表是指以數字或其他有序字符開頭的列表。
無序列表：無序列表是指沒有特定順序的列表，是以傳統風格的着重號開頭的列表。如果您不想顯示這些着重號，您可以使用class .list-unstyled 來移除樣式。您也可以通過使用 class .list-inline 把所有的列表項放在同一行中。
定義列表：在這種類型的列表中，每個列表項可以包含 <dt> 和 <dd> 元素。<dt> 代表 定義術語，就像字典，這是被定義的屬於（或短語）。接着，<dd> 是 <dt> 的描述。您可以使用class dl-horizontal 把 <dl> 行中的屬於<dt>與描述<dd>並排顯示。
- <dl class=“dl-horizontal”>
- <dt>Description 1</dt>
- <dd>Item 1</dd>
- <dt>Description 2</dt>
- <dd>Item 2</dd>
- </dl>
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
5、Bootstrap代碼
Bootstrap 允許您以兩種方式顯示代碼：
第一種是 <code> 標籤。如果您想要內聯顯示代碼，那麼您應該使用 <code> 標籤。
第二種是 <pre> 標籤。如果代碼需要被顯示爲一個獨立的塊元素或者代碼有多行，那麼您應該使用 <pre> 標籤。
請確保當您使用 <pre> 和 <code> 標籤時，開始和結束標籤使用了 unicode 變體： < 和 >。
6、Bootstrap表格
（1）、表格類：
（2）、<tr>, <th> 和 <td> 類
（3）、響應式表格
通過把任意的 .table 包在 .table-responsive class 內，您可以讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差別。
<div class=”table-responsive”><table class=”table”></table></div>
7、Bootstrap表單
（1）、垂直或基本表單
基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。下面列出了創建基本表單的步驟：
A、向父 <form> 元素添加role=”form”。
B、把標籤和控件放在一個帶有class .form-group 的 <div> 中。這是獲取 最佳間距所必需的。
C、向所有的文本元素 <input>、<textarea> 和 <select> 添加class .form-control
(2)、內聯表單
如果需要創建一個表單，它的所有元素是內聯的，向左對齊的，標籤是並排的，請向 <form> 標籤添加class .form-inline。默認情況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內聯表單時，您需要在表單控件上設置一個寬度。使用 class .sr-only，您可以隱藏內聯表單的標籤。
(3)、水平表單
水平表單與其他表單不僅標記的數量上不同，而且表單的呈現形式也不同。如需創建一個水平佈局的表單，請按下面的幾個步驟進行：
A、 向父 <form> 元素添加class .form-horizontal和role=”form”。
B、把標籤和控件放在一個帶有 class .form-group 的 <div> 中。
C、向標籤添加 class .control-label。
（4）、支持的表單控件
Bootstrap 支持最常見的表單控件，主要是 input、textarea、checkbox、radio 和 select。
A、輸入框（Input）
最常見的表單文本字段是輸入框 input。用戶可以在其中輸入大多數必要的表單數據。Bootstrap 提供了對所有原生的 HTML5 的 input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。適當的 type 聲明是必需的，這樣才能讓 input 獲得完整的樣式。
<input type=”text” class=”form-control” placeholder=”文本輸入”>
B、文本框（Textarea）
當您需要進行多行輸入的時，則可以使用文本框 textarea。必要時可以改變 rows 屬性（較少的行 = 較小的盒子，較多的行 = 較大的盒子）。
C、複選框（（Checkbox）和單選框（Radio）
對一系列複選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。
D、選擇框（Select）
使用 multiple=”multiple” 允許用戶選擇多個選項。
E、靜態控件
當您需要在一個水平表單內的表單標籤後放置純文本時，請在 <p> 上使用class .form-control-static。
（5）、表單控件狀態
除了 :focus 狀態（即，用戶點擊 input 或使用 tab 鍵聚焦到 input 上），Bootstrap 還爲禁用的輸入框定義了樣式，並提供了表單驗證的 class。
A、輸入框焦點
當輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。
B、禁用的輸入框 input
如果您想要禁用一個輸入框 input，只需要簡單地添加 disabled 屬性，這不僅會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。
C、禁用的字段集 fieldset
對 <fieldset> 添加 disabled 屬性來禁用 <fieldset> 內的所有控件。驗證狀態
D、Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只需要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）即可使用驗證狀態。
- <div class=“form-group has-warning”>
- <div class=“col-sm-10”>
- <input type=“text” class=“form-control” id=“inputWarning”>
- </div>
- </div>
<div class="form-group has-warning">
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>（6）、表單控件大小
您可以分別使用 class .input-lg/input-sm 和 .col-lg-* 來設置表單的高度和寬度。
（7）、表單幫助文本
Bootstrap 表單控件可以在輸入框 input 上有一個塊級幫助文本。爲了添加一個佔用整個寬度的內容塊，請在 <input> 後使用 .help-block。
- <form role=“form”>
- <span>幫助文本實例</span>
- <input class=“form-control” type=“text” placeholder=“”>
- <span class=“help-block”>一個較長的幫助文本塊，超過一行，
- 需要擴展到下一行。本實例中的幫助文本總共有兩行。</span>
- </form>
<form role="form">
<span>幫助文本實例</span>
<input class="form-control" type="text" placeholder="">
<span class="help-block">一個較長的幫助文本塊，超過一行，
需要擴展到下一行。本實例中的幫助文本總共有兩行。</span>
</form>8、Bootstrap 按鈕
任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認外觀。但是Bootstrap 提供了一些選項來定義按鈕的樣式，具體如下表所示：以下樣式可用於<a>, <button>, 或 <input> 元素上：
Bootstrap 提供了激活、禁用等按鈕狀態的 class，下面將進行詳細講解。
A、激活狀態
按鈕在激活時將呈現爲被按壓的外觀（深色的背景、深色的邊框、陰影）。
下表列出了讓按鈕元素和錨元素呈激活狀態的 class：
B、禁用狀態
當您禁用一個按鈕時，它的顏色會變淡 50%，並失去漸變。下表列出了讓按鈕元素和錨元素呈禁用狀態的 class：
<a href=”#” class=”btn btn-default btn-lg”role=”button”>鏈接</a>
<a href=”#” class=”btn btn-default btn-lg disabled”role=”button”>
禁用鏈接</a>
9、Bootstrap 圖片
Bootstrap 提供了三個可對圖片應用簡單樣式的 class：
.img-rounded：添加 border-radius:6px 來獲得圖片圓角。
.img-circle：添加 border-radius:500px 來讓整個圖片變成圓形。
.img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。
10、Bootstrap 輔助類
（1）、文本
以下不同的類展示了不同的文本顏色。如果文本是個鏈接鼠標移動到文本上會變暗：
（2）、背景
以下不同的類展示了不同的背景顏色。 如果文本是個鏈接鼠標移動到文本上會變暗：
（3）、其它
