bootstrap3.0教程之柵格系統(tǒng)原理(布局)
我要評(píng)論柵格系統(tǒng)（布局）
Bootstrap內(nèi)置了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設(shè)備或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。
我在這里是把Bootstrap中的柵格系統(tǒng)叫做布局。它就是通過(guò)一系列的行（row）與列（column）的組合創(chuàng)建頁(yè)面布局，然后你的內(nèi)容就可以放入到你創(chuàng)建好的布局當(dāng)中。下面就簡(jiǎn)單介紹一下Bootstrap柵格系統(tǒng)的工作原理：
行（row）必須包含在.container中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。使用行（row）在水平方向創(chuàng)建一組列（cpumn）。你的內(nèi)容應(yīng)當(dāng)放置于列（cpumn）內(nèi)，而且，只有列（cpumn）可以作為行（row）的直接子元素。類似Predefined grid classes like .row and .cp-xs-4 這些預(yù)定義的柵格class可以用來(lái)快速創(chuàng)建柵格布局。Bootstrap源碼中定義的mixin也可以用來(lái)創(chuàng)建語(yǔ)義化的布局。通過(guò)設(shè)置padding從而創(chuàng)建列（cpumn）之間的間隔（gutter）。然后通過(guò)為第一和最后一樣設(shè)置負(fù)值的margin從而抵消掉padding的影響。柵格系統(tǒng)中的列是通過(guò)指定1到12的值來(lái)表示其跨越的范圍。例如，三個(gè)等寬的列可以使用三個(gè).cp-xs-4來(lái)創(chuàng)建。
DW6編碼實(shí)現(xiàn)
Okay勒，下面開(kāi)始寫(xiě)代碼了額。首先上一張圖看看我使用的編輯器，之前在學(xué)校學(xué)習(xí)Html+CSS的時(shí)候使用較多的工具。
然后新建一個(gè)HTML文檔，選擇類型HTML5
創(chuàng)建好后，另存為與上一節(jié)的講解中js、css文件夾的同一目錄下。
layout.html就是我剛剛創(chuàng)建的文件。Bootstrap.html也是上一節(jié)中創(chuàng)建的第一個(gè)html頁(yè)面。
現(xiàn)在可以將Bootstrap.html中的代碼全部Copy到layout.html頁(yè)面。
然后在body標(biāo)簽下添加如下代碼
<h1>Hello, world!</h1>
<h2class="page-header">區(qū)域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h2class="page-header">區(qū)域二</h2>
<p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p>
<h2class="page-header">區(qū)域三</h2>
<p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
這幾個(gè)標(biāo)簽大家應(yīng)該都能看的明白，最基礎(chǔ)最簡(jiǎn)單的。
添加完后layout.html頁(yè)面所有代碼如下
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<!--Bootstrap-->
<linkhref="css/bootstrap.min.css"rel="stylesheet"media="screen"></p> <p><!--HTML5ShimandRespond.jsIE8supportofHTML5elementsandmediaqueries-->
<!--WARNING:Respond.jsdoesn'tworkifyouviewthepageviafile://-->
<!--[ifltIE9]>
<scriptsrc="<a ></script</a>>
<scriptsrc="<a ></script</a>>
<![endif]-->
</head>
<body>
<h1>Hello,world!</h1>
<h2class="page-header">區(qū)域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h2class="page-header">區(qū)域二</h2>
<p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p>
<h2class="page-header">區(qū)域三</h2>
<p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
<scriptsrc="js/jquery-2.0.3.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>
當(dāng)然效果也很簡(jiǎn)單，我還是把截圖放上，可以進(jìn)行對(duì)比。
優(yōu)化一：可以發(fā)現(xiàn)上圖的頁(yè)面效果占滿全屏，我們可以通過(guò)Bootstrap 樣式類對(duì)上面的內(nèi)容進(jìn)行居中。
<div class="container">
.........之前上面添加在body標(biāo)簽下的代碼
</div>
效果如下
可以發(fā)現(xiàn)container這個(gè)類設(shè)置了寬度，并且可以讓內(nèi)容顯示在頁(yè)面的中間。
優(yōu)化二：將三個(gè)區(qū)域顯示在同一排，并且平均分成三欄。
首先為三個(gè)區(qū)域添加一個(gè)容器，可以使用div，并且為div添加一個(gè)類 <div class="row">.
然后我們?yōu)槊總€(gè)小的區(qū)域也添加一個(gè)容器div，并且為div添加一個(gè)類<div class="cp-xs-4">
簡(jiǎn)單代碼實(shí)現(xiàn)如下
<div class="container">
<h1>Hello,world!</h1>
<divclass="row">
<divclass="col-xs-4">
<h2class="page-header">區(qū)域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
</div>
<divclass="col-xs-4">
<h2class="page-header">區(qū)域二</h2>
<p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p>
</div>
<divclass="col-xs-4">
<h2class="page-header">區(qū)域三</h2>
<p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
</div>
</div>
</div>
效果如下
的確排成一列，然后分成三欄。再結(jié)合一下上面柵格系統(tǒng)的6部原理。是不是懂一點(diǎn)了，反正我自己懂了很多。通過(guò)同樣的方式可以創(chuàng)建出比較復(fù)雜的網(wǎng)格布局頁(yè)面。只需要在布局使用的容器上面添加相應(yīng)的網(wǎng)格布局的類。比如說(shuō)如果內(nèi)容占用6個(gè)網(wǎng)格，那么就添加一個(gè)cp-xs-6的類、占用四個(gè)網(wǎng)格就添加一個(gè)cp-xs-4的類，然后在同一排的周圍進(jìn)行使用帶有row類的容器。
總結(jié)
本節(jié)主要學(xué)習(xí)的布局（柵格系統(tǒng)），通過(guò)簡(jiǎn)單的實(shí)例來(lái)理解它的工作原理。
使用過(guò)的類有:
1..container:用.container包裹頁(yè)面上的內(nèi)容即可實(shí)現(xiàn)居中對(duì)齊。在不同的媒體查詢或值范圍內(nèi)都為container設(shè)置了max-width，用以匹配柵格系統(tǒng)。
2..cp-xs-4:這個(gè)類通過(guò)"-"分為三個(gè)部分，第三個(gè)部分的數(shù)字作為一個(gè)泛指，它的范圍是1到12。就是可以把一個(gè)區(qū)域分為12個(gè)欄，這個(gè)要和row類聯(lián)合使用。
其實(shí)這個(gè)布局很像HTMl中的Table布局TR行和TD列吧。
暫時(shí)的理解就這些，代碼直接復(fù)制粘貼就可以看效果，當(dāng)然首先要把預(yù)先的css、js文件進(jìn)行準(zhǔn)備。
相關(guān)文章
bootstrap3.0教程之柵格系統(tǒng)案例(包括柵格選項(xiàng)、從堆疊到水平排列、移
這篇文章主要介紹了bootstrap3.0教程之柵格系統(tǒng)案例,包括柵格選項(xiàng)、從堆疊到水平排列、移動(dòng)設(shè)備和桌面、Responsive column resets、列偏移、嵌套列、列排序,需要的朋友可以2014-04-11簡(jiǎn)單實(shí)現(xiàn)柵格布局的兩種方式
本文給大家介紹的是2種柵格布局的簡(jiǎn)單實(shí)現(xiàn)方式，并附上示例代碼，非常實(shí)用，這里推薦給大家，有需要的小伙伴參考下吧。2015-03-10