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