亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時間：2014-04-11 14:27:51   作者：佚名   我要評論
Bootstrap內(nèi)置了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設備或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。我在這里是把Bootstrap中的柵格系統(tǒng)叫做布局

柵格系統(tǒng)（布局）

Bootstrap內(nèi)置了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設備或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。

我在這里是把Bootstrap中的柵格系統(tǒng)叫做布局。它就是通過一系列的行（row）與列（column）的組合創(chuàng)建頁面布局，然后你的內(nèi)容就可以放入到你創(chuàng)建好的布局當中。下面就簡單介紹一下Bootstrap柵格系統(tǒng)的工作原理：

行（row）必須包含在.container中，以便為其賦予合適的排列（aligment）和內(nèi)補（padding）。使用行（row）在水平方向創(chuàng)建一組列（cpumn）。你的內(nèi)容應當放置于列（cpumn）內(nèi)，而且，只有列（cpumn）可以作為行（row）的直接子元素。類似Predefined grid classes like .row and .cp-xs-4 這些預定義的柵格class可以用來快速創(chuàng)建柵格布局。Bootstrap源碼中定義的mixin也可以用來創(chuàng)建語義化的布局。通過設置padding從而創(chuàng)建列（cpumn）之間的間隔（gutter）。然后通過為第一和最后一樣設置負值的margin從而抵消掉padding的影響。柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個.cp-xs-4來創(chuàng)建。

DW6編碼實現(xiàn)

Okay勒，下面開始寫代碼了額。首先上一張圖看看我使用的編輯器，之前在學校學習Html+CSS的時候使用較多的工具。

然后新建一個HTML文檔，選擇類型HTML5

創(chuàng)建好后，另存為與上一節(jié)的講解中js、css文件夾的同一目錄下。

layout.html就是我剛剛創(chuàng)建的文件。Bootstrap.html也是上一節(jié)中創(chuàng)建的第一個html頁面。

現(xiàn)在可以將Bootstrap.html中的代碼全部Copy到layout.html頁面。

然后在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>


這幾個標簽大家應該都能看的明白，最基礎最簡單的。

添加完后layout.html頁面所有代碼如下

復制代碼
代碼如下:

<!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>

當然效果也很簡單，我還是把截圖放上，可以進行對比。

優(yōu)化一：可以發(fā)現(xiàn)上圖的頁面效果占滿全屏，我們可以通過Bootstrap 樣式類對上面的內(nèi)容進行居中。


復制代碼
代碼如下:

<div class="container">
.........之前上面添加在body標簽下的代碼
</div>


效果如下

可以發(fā)現(xiàn)container這個類設置了寬度，并且可以讓內(nèi)容顯示在頁面的中間。

優(yōu)化二：將三個區(qū)域顯示在同一排，并且平均分成三欄。

首先為三個區(qū)域添加一個容器，可以使用div，并且為div添加一個類 <div class="row">.

然后我們?yōu)槊總€小的區(qū)域也添加一個容器div，并且為div添加一個類<div class="cp-xs-4">

簡單代碼實現(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部原理。是不是懂一點了，反正我自己懂了很多。通過同樣的方式可以創(chuàng)建出比較復雜的網(wǎng)格布局頁面。只需要在布局使用的容器上面添加相應的網(wǎng)格布局的類。比如說如果內(nèi)容占用6個網(wǎng)格，那么就添加一個cp-xs-6的類、占用四個網(wǎng)格就添加一個cp-xs-4的類，然后在同一排的周圍進行使用帶有row類的容器。

總結(jié)

本節(jié)主要學習的布局（柵格系統(tǒng)），通過簡單的實例來理解它的工作原理。

使用過的類有:

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

2..cp-xs-4:這個類通過"-"分為三個部分，第三個部分的數(shù)字作為一個泛指，它的范圍是1到12。就是可以把一個區(qū)域分為12個欄，這個要和row類聯(lián)合使用。

其實這個布局很像HTMl中的Table布局TR行和TD列吧。

暫時的理解就這些，代碼直接復制粘貼就可以看效果，當然首先要把預先的css、js文件進行準備。

相關文章

最新評論