Bootstrap柵格系統(tǒng)北京電子科技職業(yè)學(xué)院柵格概述一Bootstrap柵格系統(tǒng)二柵格系統(tǒng)工作原理三目錄Contents媒體查詢四柵格參數(shù)五柵格概述1柵格概述在平面設(shè)計(jì)中，柵格是一種由一系列用于組織內(nèi)容的相交的直線（垂直的、水平的）組成的結(jié)構(gòu)（通常是二維的）。它廣泛應(yīng)用于打印設(shè)計(jì)中的設(shè)計(jì)布局和內(nèi)容結(jié)構(gòu)。在網(wǎng)頁(yè)設(shè)計(jì)中，它是一種用于快速創(chuàng)建一致的布局和有效地使用HTML和CSS的方法。網(wǎng)頁(yè)設(shè)計(jì)中的柵格用于組織內(nèi)容，讓網(wǎng)站易于瀏覽，并降低用戶端的負(fù)載。Bootstrap柵格系統(tǒng)2Bootstrap柵格系統(tǒng)Bootstrap包含了一個(gè)響應(yīng)式的、移動(dòng)設(shè)備優(yōu)先的、不固定的柵格系統(tǒng)，可以隨著設(shè)備或視口大小的增加而適當(dāng)?shù)財(cái)U(kuò)展到12列。它包含了用于簡(jiǎn)單的布局選項(xiàng)的預(yù)定義類，也包含了用于生成更多語(yǔ)義布局的功能強(qiáng)大的混合類。Bootstrap3是移動(dòng)設(shè)備優(yōu)先的，在這個(gè)意義上，Bootstrap代碼從小屏幕設(shè)備（比如移動(dòng)設(shè)備、平板電腦）開始，然后擴(kuò)展到大屏幕設(shè)備（比如筆記本電腦、臺(tái)式電腦）上的組件和網(wǎng)格。Bootstrap柵格系統(tǒng)移動(dòng)設(shè)備優(yōu)先策略內(nèi)容：決定什么是最重要的。布局：優(yōu)先設(shè)計(jì)更小的寬度；基礎(chǔ)的CSS是移動(dòng)設(shè)備優(yōu)先，媒體查詢是針對(duì)于平板電腦、臺(tái)式電腦。漸進(jìn)增強(qiáng)：隨著屏幕大小的增加而添加元素。Bootstrap柵格系統(tǒng)響應(yīng)式柵格系統(tǒng)隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。111111111111444486612柵格系統(tǒng)工作原理3柵格系統(tǒng)工作原理柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下Bootstrap柵格系統(tǒng)的工作原理：1、“行（row）”必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。2、通過(guò)“行（row）”在水平方向創(chuàng)建一組“列（column）”。3、內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。柵格系統(tǒng)工作原理4、通過(guò)為“列（column）”設(shè)置padding屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過(guò)為.row元素設(shè)置負(fù)值margin從而抵消掉為.container元素設(shè)置的padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。5、柵格系統(tǒng)中的列是通過(guò)指定1到12的值來(lái)表示其跨越的范圍。例如，三個(gè)等寬的列可以使用三個(gè).col-xs-4來(lái)創(chuàng)建。6、如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。柵格系統(tǒng)工作原理7、柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對(duì)小屏幕設(shè)備覆蓋柵格類。因此，在元素上應(yīng)用任何.col-md-*柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對(duì)小屏幕設(shè)備覆蓋柵格類。因此，在元素上應(yīng)用任何.col-lg-*不存在，也影響大屏幕設(shè)備。媒體查詢4媒體查詢?cè)跂鸥裣到y(tǒng)中，我們?cè)贚ess文件中使用以下媒體查詢（mediaquery）來(lái)創(chuàng)建關(guān)鍵的分界點(diǎn)閾值。/*超小屏幕（手機(jī)，小于768px）*//*小屏幕（平板，大于等于768px）*/@media(min-width:@screen-sm-min){...}/*中等屏幕（桌面顯示器，大于等于992px）*/@media(min-width:@screen-md-min){...}/*大屏幕（大桌面顯示器，大于等于1200px）*/@media(min-width:@screen-lg-min){...}媒體查詢我們偶爾也會(huì)在媒體查詢代碼中包含max-width從而將CSS的影響限制在更小范圍的屏幕大小之內(nèi)。@media(max-width:@screen-xs-max){...}@media(min-width:@screen-sm-min)and(max-width:@screen-sm-max){...}@media(min-width:@screen-md-min)and(max-width:@screen-md-max){...}@media(min-width:@screen-lg-min){...}柵格參數(shù)5柵格參數(shù)

超小屏幕

手機(jī)(<768px)小屏幕

平板

(≥768px)中等屏幕

桌面顯示器(≥992px)大屏幕

大桌面顯示器(≥1200px)柵格系統(tǒng)行為總是水平排列開始是堆疊在一起的，當(dāng)大于這些閾值時(shí)將變?yōu)樗脚帕蠧.container

最大寬度None（自動(dòng)）750px970px1170px類前綴.col-xs-.col-sm-.col-md-.col-lg-列（column）數(shù)12最大列（column）寬自動(dòng)~62px~81px~97p