bootstrap3.0中柵格系統(tǒng)原理是怎樣的

這篇文章給大家介紹bootstrap3.0中柵格系統(tǒng)原理是怎樣的，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的始興網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

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

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

行（row）必須包含在.container中，以便為其賦予合適的排列（aligment）和內(nèi)補（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)建語義化的布局。通過設(shè)置padding從而創(chuàng)建列（cpumn）之間的間隔（gutter）。然后通過為第一和最后一樣設(shè)置負值的margin從而抵消掉padding的影響。柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個.cp-xs-4來創(chuàng)建。

DW6編碼實現(xiàn)

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

bootstrap3.0中柵格系統(tǒng)原理是怎樣的

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

bootstrap3.0中柵格系統(tǒng)原理是怎樣的

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

bootstrap3.0中柵格系統(tǒng)原理是怎樣的

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

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

然后在body標簽下添加如下代碼

代碼如下:

<h2>Hello, world!</h2>
<h3class="page-header">區(qū)域一</h3>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h3class="page-header">區(qū)域二</h3>
<p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p>
<h3class="page-header">區(qū)域三</h3>
<p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>

這幾個標簽大家應(yīng)該都能看的明白，最基礎(chǔ)最簡單的。

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

代碼如下:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0">

<linkhref="css/bootstrap.min.css"rel="stylesheet"media="screen"></p> <p>


</head>
<body>
<h2>Hello,world!</h2>
<h3class="page-header">區(qū)域一</h3>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h3class="page-header">區(qū)域二</h3>
<p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p>
<h3class="page-header">區(qū)域三</h3>
<p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
<scriptsrc="js/jquery-2.0.3.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>

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

bootstrap3.0中柵格系統(tǒng)原理是怎樣的

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

代碼如下:

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

效果如下

bootstrap3.0中柵格系統(tǒng)原理是怎樣的

可以發(fā)現(xiàn)container這個類設(shè)置了寬度，并且可以讓內(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">
<h2>Hello,world!</h2>
<divclass="row">
<divclass="col-xs-4">
<h3class="page-header">區(qū)域一</h3>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
</div>
<divclass="col-xs-4">
<h3class="page-header">區(qū)域二</h3>
<p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p>
</div>
<divclass="col-xs-4">
<h3class="page-header">區(qū)域三</h3>
<p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
</div>
</div>
</div>

效果如下

bootstrap3.0中柵格系統(tǒng)原理是怎樣的

的確排成一列，然后分成三欄。再結(jié)合一下上面柵格系統(tǒng)的6部原理。是不是懂一點了，反正我自己懂了很多。通過同樣的方式可以創(chuàng)建出比較復(fù)雜的網(wǎng)格布局頁面。只需要在布局使用的容器上面添加相應(yīng)的網(wǎng)格布局的類。比如說如果內(nèi)容占用6個網(wǎng)格，那么就添加一個cp-xs-6的類、占用四個網(wǎng)格就添加一個cp-xs-4的類，然后在同一排的周圍進行使用帶有row類的容器。

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

使用過的類有:

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

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

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

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

關(guān)于bootstrap3.0中柵格系統(tǒng)原理是怎樣的就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

文章標題：bootstrap3.0中柵格系統(tǒng)原理是怎樣的
當(dāng)前URL：http://muchs.cn/article16/jepdgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站制作、ChatGPT、App設(shè)計、全網(wǎng)營銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容