Bootstrap是一個(gè)非常受歡迎的前端開發(fā)框架，該框架極大的提高前端團(tuán)隊(duì)的開發(fā)效率。

Bootstrap對(duì)常見的CSS布局組件和JavaScript插件進(jìn)行了完整的封裝，使開發(fā)人員可以輕松使用。

使用Bootstrap可以快速制作精美的響應(yīng)式頁(yè)面，并且兼容移動(dòng)端

Boostrap是最近幾天學(xué)的一個(gè)新的開發(fā)框架，和之前學(xué)過的AUI框架來(lái)說(shuō)有相同點(diǎn)，也有很大的不同點(diǎn)，先說(shuō)說(shuō)相同點(diǎn)，你畢竟是用別人的框架，所以你不得不遵守人家已經(jīng)規(guī)定好的原則和規(guī)則，這種問題就會(huì)在實(shí)際的開發(fā)中遇到，因?yàn)閷?shí)際開發(fā)中不可能跟著框架走，一定是跟中客戶走，在這樣的話在實(shí)際開發(fā)中可能得改人家提供的樣式，很有可能南轅北轍，還不如不用框架；不同點(diǎn)就是Boostrap更加的強(qiáng)大，不僅僅和AUI一樣基于移動(dòng)端，而是PC，移動(dòng)同時(shí)開發(fā)，這就是響應(yīng)式頁(yè)面的強(qiáng)大。

什么是響應(yīng)式頁(yè)面？

頁(yè)面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無(wú)論用戶正在使用筆記本還是iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說(shuō)，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這樣，我們就可以不必為不斷到來(lái)的新設(shè)備做專門的版本設(shè)計(jì)和開發(fā)了。

這樣的話，有了響應(yīng)式頁(yè)面就是讓設(shè)計(jì)和開發(fā)人員的思路更加廣闊，不會(huì)再考慮用戶手上的電子設(shè)備大小了。

Bootstrap中有一個(gè)很重要的概念就是媒體查詢和12柵格系統(tǒng)。

媒體查詢：

<meta name="viewport"?

content="width=device-width, initial-scale=1 ,maximun-scale=1,user-scalable=no">

在頁(yè)面設(shè)置該信息后，手機(jī)端網(wǎng)頁(yè)的大小將根據(jù)手機(jī)屏幕自適應(yīng)（不再是980px）

@media (max-width: 412px){}?//視口像素小于等于412px時(shí)生效

@media (min-width: 412px){}?//視口像素大于等于412px時(shí)生效

這里還要提一個(gè)概念就是像素和視口

物理像素：是屏幕的實(shí)際像素

物理像素 = n * CSS像素

n就叫做設(shè)備像素比（DPR）

移動(dòng)端瀏覽器默認(rèn)視口：980px

Window.devicePixelRation//查詢?cè)O(shè)備的像素比

document.documentElement.clientWidth; // 查詢當(dāng)前設(shè)備的視口大小

12柵格系統(tǒng)是Boostrap的核心

12柵格系統(tǒng)就是把網(wǎng)頁(yè)的內(nèi)容區(qū)域按照寬度平分為12份，網(wǎng)頁(yè)開發(fā)人員可以自由按份組合，方便網(wǎng)頁(yè)的布局，使排版看起來(lái)整齊規(guī)范。

bootstarp提供了一個(gè)名為container的樣式容器

.container是一個(gè)自動(dòng)居中，高度自適應(yīng)的樣式。用.container作為網(wǎng)頁(yè)內(nèi)容最外層的div樣式，可以輕松的實(shí)現(xiàn)12柵格的網(wǎng)頁(yè)布局。 并且，這種12柵格系統(tǒng)是根據(jù)屏幕大小自適應(yīng)的，.container會(huì)自動(dòng)根據(jù)屏幕大小調(diào)整總寬度和柵格的平均寬度。

col-lg-n 最大列寬95px 在>=1200px像素的情況下將.container12等分 每份寬度95px 其余情況寬度為100%

col-md-n 最大寬度78px; 在>=992px像素的情況下將.container12等分 其余情況100%

col-sm-n 最大列寬60px 在>=768px像素的情況下將.container12等分 其余情況100%

col-xs-n 列寬根據(jù)視口大小12等分 在任何尺寸的屏幕下都將.container 12等分