欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

bootstrap3.0教程之柵格系統(tǒng)原理(布局)

  發(fā)布時(shí)間:2014-04-11 14:27:51   作者:佚名   我要評(píng)論
Bootstrap內(nèi)置了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng),隨著屏幕設(shè)備或視口(viewport)尺寸的增加,系統(tǒng)會(huì)自動(dòng)分為最多12列。我在這里是把Bootstrap中的柵格系統(tǒ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)叫做布局。它就是通過一系列的行(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可以用來快速創(chuàng)建柵格布局。Bootstrap源碼中定義的mixin也可以用來創(chuàng)建語(yǔ)義化的布局。通過設(shè)置padding從而創(chuàng)建列(cpumn)之間的間隔(gutter)。然后通過為第一和最后一樣設(shè)置負(fù)值的margin從而抵消掉padding的影響。柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如,三個(gè)等寬的列可以使用三個(gè).cp-xs-4來創(chuàng)建。

DW6編碼實(shí)現(xiàn)

Okay勒,下面開始寫代碼了額。首先上一張圖看看我使用的編輯器,之前在學(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)簽下添加如下代碼

復(fù)制代碼
代碼如下:

<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è)面所有代碼如下

復(fù)制代碼
代碼如下:

<!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è)面效果占滿全屏,我們可以通過Bootstrap 樣式類對(duì)上面的內(nèi)容進(jìn)行居中。


復(fù)制代碼
代碼如下:

<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)如下

復(fù)制代碼
代碼如下:

<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)了,反正我自己懂了很多。通過同樣的方式可以創(chuàng)建出比較復(fù)雜的網(wǎng)格布局頁(yè)面。只需要在布局使用的容器上面添加相應(yīng)的網(wǎng)格布局的類。比如說如果內(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)),通過簡(jiǎn)單的實(shí)例來理解它的工作原理。

使用過的類有:

1..container:用.container包裹頁(yè)面上的內(nèi)容即可實(shí)現(xiàn)居中對(duì)齊。在不同的媒體查詢或值范圍內(nèi)都為container設(shè)置了max-width,用以匹配柵格系統(tǒng)。

2..cp-xs-4:這個(gè)類通過"-"分為三個(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)文章

最新評(píng)論