首頁 >web前端 >css教學 >關於bootstrap3.0的柵格系統原理

關於bootstrap3.0的柵格系統原理

不言
不言原創
2018-06-20 13:47:031932瀏覽

這篇文章主要介紹了關於bootstrap3.0的柵格系統原理,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

Bootstrap內建了一套響應式、行動裝置優先的流式柵格系統,隨著螢幕設備或視窗(viewport)尺寸的增加,系統會自動分為最多12列。我在這裡是把Bootstrap中的柵格系統叫做佈局

柵格系統(佈局)

Bootstrap內建了一套響應式、移動設備優先的流式柵格系統,隨著螢幕設備或視窗(viewport)尺寸的增加,系統會自動分成最多12列。

我在這裡是把Bootstrap中的柵格系統叫做佈局。它就是透過一系列的行(row)與列(column)的組合來建立頁面佈局,然後你的內容就可以放入到你創造好的佈局當中。以下就簡單介紹一下Bootstrap柵格系統的工作原理:

行(row)必須包含在.container中,以便為其賦予合適的排列(aligment)和內補(padding)。使用行(row)在水平方向建立一組列(cpumn)。你的內容要放置在列(cpumn)內,而且,只有列(cpumn)可以作為行(row)的直接子元素。類似Predefined grid classes like .row and .cp-xs-4 這些預先定義的柵格class可以用來快速建立柵格佈局。 Bootstrap原始碼中定義的mixin也可以用來建立語意化的佈局。透過設定padding從而建立列(cpumn)之間的間隔(gutter)。然後透過為第一和最後一樣設定負值的margin從而抵消掉padding的影響。柵格系統中的欄位是透過指定1到12的值來表示其跨越的範圍。例如,三個等寬的欄位可以使用三個.cp-xs-4來建立。

DW6編碼實作

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

然後新建一個HTML文檔,選擇類型HTML5

#已建立好後,另存為與上一節的講解中js、css資料夾的同一目錄下。

layout.html就是我剛剛建立的檔案。 Bootstrap.html也是第一個在上一節建立的html頁面。

現在可以將Bootstrap.html中的程式碼全部Copy到layout.html頁面。

然後在body標籤下加入如下程式碼

<h1>Hello, world!</h1>
<h2class="page-header">区域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h2class="page-header">区域二</h2>
<p>IfyouworkwithBootstrap&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;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&#39;tworkifyouviewthepageviafile://-->
<!--[ifltIE9]>
<scriptsrc="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
<scriptsrc="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
<![endif]-->
</head>
<body>
<h1>Hello,world!</h1>
<h2class="page-header">区域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h2class="page-header">区域二</h2>
<p>IfyouworkwithBootstrap&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
<scriptsrc="js/jquery-2.0.3.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>

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

優化一:可以發現上圖的頁面效果佔滿全屏,我們可以透過Bootstrap 樣式類別對上面的內容進行居中。

<p class="container">
 .........之前上面添加在body标签下的代码
</p>

效果如下

可以發現container這個類別設定了寬度,並且可以讓內容顯示在頁面的中間。

最佳化二:將三個區域顯示在同一排,並且平均分成三欄。

首先為三個區域添加一個容器,可以使用p,並且為p添加一個類別e88f4217a654973b612675b9cc7cb93e.

然後我們為每個小的區域也添加一個容器p,並且為p添加一個類別1356d366468de702eb7d5063f78f1f8e

簡單程式碼實作如下

<p class="container">
<h1>Hello,world!</h1>
<pclass="row">
<pclass="col-xs-4">
<h2class="page-header">区域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
</p>
<pclass="col-xs-4">
<h2class="page-header">区域二</h2>
<p>IfyouworkwithBootstrap&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
</p>
<pclass="col-xs-4">
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
</p>
</p>
</p>

效果如下

的確排成一列,然後分成三欄。再結合一下上面柵格系統的6部原理。是不是懂一點了,反正我自己懂了很多。透過同樣的方式可以創建出比較複雜的網格佈局頁面。只需要在佈局使用的容器上面添加相應的網格佈局的類別。比如說如果內容佔用6個網格,那麼就增加一個cp-xs-6的類別、佔用四個網格就加入一個cp-xs-4的類,然後在同一排的周圍進行使用帶有row類的容器。

總結

本節主要學習的佈局(柵格系統),透過簡單的實例來理解它的工作原理。

使用過的類別有:

1..container:用.container包裹頁面上的內容即可實現居中對齊。在不同的媒體查詢或值範圍內都為container設定了max-width,用以符合柵格系統。

2..cp-xs-4:這個類別透過"-"分成三個部分,第三個部分的數字作為一個泛指,它的範圍是1到12。就是可以把一個區域分成12個欄,這個要跟row類聯合使用。

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

暫時的理解就這些,程式碼直接複製貼上就可以看效果,當然首先要把預先的css、js檔案做準備。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

實如何使用CSS保持頁面內容的寬高比

以上是關於bootstrap3.0的柵格系統原理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn