一．Bootstrap? 概述
Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術工程師研發(fā)的一個基于HTML、CSS、JavaScript 的開源框架。該框架代碼簡潔、視覺優(yōu)美，可用于快速、簡單地構建基于 PC 及移動端設備的 Web 頁面需求。
2010 年 6 月，Twitter內部的工程師為了解決前端開發(fā)任務中的協(xié)作統(tǒng)一問題。經歷各種方案后，Bootstrap 最終被確定下來，并于 2011 年 8 月發(fā)布。經過很長時間的迭代升級，由最初的 CSS 驅動項目發(fā)展成為內置很多 JavaScript 插件和圖標的多功能 Web 前端的開源框架。
Bootstrap 最為重要的部分就是它的響應式布局，通過這種布局可以兼容 PC 端、PAD以及手機移動端的頁面訪問。
二．Bootstrap? 特點
Bootstrap 非常流行，得益于它非常實用的功能和特點。主要核心功能特點如下：(1).跨設備、跨瀏覽器
可以兼容所有現(xiàn)代瀏覽器，包括比較詬病的 IE7、8。當然，本課程不再考慮 IE9 以下瀏覽器。
(2).響應式布局
不但可以支持 PC 端的各種分辨率的顯示，還支持移動端 PAD、手機等屏幕的響應式切換顯示。
(3).提供的全面的組件
Bootstrap 提供了實用性很強的組件，包括：導航、標簽、工具條、按鈕等一系列組件，方便開發(fā)者調用。
(4).內置 jQuery插件
Bootstrap 提供了很多實用性的 jquery插件，這些插件方便開發(fā)者實現(xiàn) Web 中各種常規(guī)特效。
(5).支持 HTML5、CSS3
HTML5 語義化標簽和 CSS3 屬性，都得到很好的支持。
(6).支持 LESS 動態(tài)樣式LESS 使用變量、嵌套、操作混合編碼，編寫更快、更靈活的 CSS。它和 Bootstrap 能很好的配合開發(fā)。
三．Bootstrap? 結構
首先，想要了解 Boostrap 的文檔結構，需要在官網先把它下載到本地。
Bootstrap主要分為三大核心目錄：css(樣式)、js(腳本)、fonts(字體)。
1.css 目錄中有四個 css后綴的文件，其中包含 min 字樣的，是壓縮版本，一般使用這個；不包含的屬于沒有壓縮的，可以學習了解 css代碼的文件；而 map 后綴的文件則是css 源碼映射表，在一些特定的瀏覽器工具中使用。
2.js 目錄包含兩個文件，是未壓縮和壓縮的 js 文件。
3.fonts 目錄包含了不同后綴的字體文件。
四．創(chuàng)建第一個頁面
我們創(chuàng)建一個 HTML5 的頁面，并且將 Bootstrap 的核心文件引入，然后測試是否正常顯示。
在頁面中引入bootstrap的層疊樣式表，和javascript文件即可。
五．學習的各項準備
1.開發(fā)工具，我們使用Sublime Text3作為Bootstrap的開發(fā)工具，并且安裝了Emmet代碼生成插件；
2.測試工具，除了常規(guī)的現(xiàn)代瀏覽器，其次就是作為移動端的測試工具，我們這里采用的是 Opera Mobile Emulator，和 Chrome 的移動 Web 測試工具。
3.所需基礎，至少有 HTML5 第一季課程的基礎，Bootstrap 內置了很多 jQuery 插件，雖然使用起來比 jQuery 或 JS 本身要簡單的多，但如果有 jQuery 和 JS 課程的基礎，那學習理解力就更加深入；
4.課程分辨率：基礎課程，我們使用 1024 x 768 來錄制，但某些特殊部分，比如響應式和項目課程，需要大分辨率錄制，會采用 1440 x 900來錄制。
二、 排版樣式
一．頁面排版
Bootstrap 提供了一些常規(guī)設計好的頁面排版的樣式供開發(fā)者使用。
1. 頁面主體
Bootstrap 將全局 font-size 設置為 14px，line-height 行高設置為 1.428(即20px)；
段落元素被設置等于 1/2 行高(即 10px)；顏色被設置為#333。
//創(chuàng)建包含段落突出的文本
給當前p標簽添加lead類名即可
2. 標題
//從 h1 到 h6
<h1>Bootstrap 框架</h1>
//36px
<h2>Bootstrap 框架<h2/>
//30px
<h3>Bootstrap 框架</h3>
//24px
<h4>Bootstrap 框架</h4>
//18px
<h5>Bootstrap 框架</h5>
//14px
<h6>Bootstrap 框架</h6>
//12px
Bootstrap 分別對 h1 ~ h6 進行了 CSS 樣式的重構，并且還支持普通內聯(lián)元素定義 class=(.h1 ~ h6)來實現(xiàn)相同的功能。
//內聯(lián)元素使用標題字體
<span class="h1">Bootstrap</span>
注：通過 Firebug 查看元素還看到，字體顏色、字體樣式、行高均被固定了，從而保證了統(tǒng)一性，而原生的會根據(jù)系統(tǒng)內置的首選字體決定，顏色是最黑色。在 h1 ~h6 元素之間，還可以嵌入一個 small 元素作為副標題，//在標題元素內插入 small 元素
我們發(fā)現(xiàn) h1 ~ h3 下 small 元素的大小只占父元素的 65%，那么通過計算(查看 Firebug 計算后的樣式)，h1 ~ h3 下的 small 為 23.4px、19.5px、15.6px；h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分別為：13.5px、10.5px、9px。在 h1 ~ h6 下的 small 樣式也進行了改變，顏色變成淡灰色：#777，行高為1，粗度為 400。
3. 內聯(lián)文本
元素//添加標記，元素或.mark 類
刪除的文本<del></del>
無用的文本<s></s>
?插入的文本<ins></ins>
下劃線文本<u></u>
?三、 柵格系統(tǒng)學習要點：
1.移動設備優(yōu)先
2.布局容器
3.柵格系統(tǒng)
一．移動設備優(yōu)先
在 HTML5 的項目中，我們做了移動端的項目。它有一份非常重要的 meta，用于設置屏幕和設備等寬以及是否運行用戶縮放，及縮放比例的問題。
//分別為：屏幕寬度和設備一致、初始縮放比例、最大縮放比例和禁止用戶縮放
柵格系統(tǒng)中，瀏覽器會隨著屏幕的大小的增減自動分配最多12列。通過一系列的行(row)與列(column)的組合來創(chuàng)建頁面布局。工作原理如下：
1.“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100%寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
2.通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。
3.你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。
4.類似 .row和 .col-xs-4 這種預定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創(chuàng)建語義化的布局。
5.通過為“列（column）”設置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了 padding。
6.負值的 margin 就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
7.柵格系統(tǒng)中的列是通過指定 1 到 12 的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創(chuàng)建。
8.如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
9.柵格類適用于與屏幕寬度大于或等于分界點大小的設備 ， 并且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-md-* 柵格類適用于與屏幕寬度大于或等于分界點大小的設備 ，并且針對小屏幕設備覆蓋柵格類。因此，在元素上應用任何 .col-lg-*不存在， 也影響大屏幕設備。
柵格參數(shù)表如上圖所示，柵格系統(tǒng)最外層區(qū)分了四種寬度的瀏覽器：超小屏(<768px)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)。而內層.container容器的自適應寬度為：自動、750px、970px 和 1170px。自動的意思為，如果你是手機屏幕，則全面獨占一行顯示。//四種屏幕分類全部激活
