在響應(yīng)式網(wǎng)站中使用bootstrap的使用率是極大的,很多開(kāi)發(fā)者都在使用它。那boosttrap的優(yōu)勢(shì)是什么了?在boosttrap出現(xiàn)前有很多網(wǎng)站的頁(yè)面排版命名重復(fù)、復(fù)雜、無(wú)意義,樣式重復(fù)、冗余、不規(guī)范、不和諧,頁(yè)面錯(cuò)亂、不規(guī)范、不和諧,而boosttrap出現(xiàn)后各種命名都統(tǒng)一并且規(guī)范化,頁(yè)面風(fēng)格統(tǒng)一,畫(huà)面和諧。
Bootstrap的核心是柵格系統(tǒng),Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng),隨著屏幕或視口(viewport)尺寸的增加,系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類(lèi)。
排列如圖:

柵格參數(shù)如圖:
柵格系統(tǒng)是通過(guò)一系列的行(row)與列(column)的組合來(lái)組建頁(yè)面布局的,Bootstrap 需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè).container容器。Bootstrap提供了兩個(gè)容器類(lèi)(.container和.container-fluid),而這兩種容器類(lèi)不能互相嵌套。
如圖:
當(dāng)屏幕寬度大于和等于1200px時(shí).Bootstrap使用.col-lg-的類(lèi)來(lái)組建頁(yè)面布局,當(dāng)屏幕寬度大于和等于992px時(shí).Bootstrap使用.col-md-的類(lèi)來(lái)組建頁(yè)面布局,當(dāng)屏幕寬度大于和等于768px時(shí).Bootstrap使用.col-sm-的類(lèi)來(lái)組建頁(yè)面布局,當(dāng)屏幕寬度小于768px時(shí).Bootstrap使用.col-sm-的類(lèi)來(lái)組建頁(yè)面布局,通過(guò)這些響應(yīng)式的類(lèi)Bootstrap組建了一個(gè)在多種屏幕設(shè)備上的響應(yīng)式網(wǎng)站。
如沒(méi)特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請(qǐng)注明來(lái)自http://www.oulysa.com/news/5882.html