Bootstrap3.0學(xué)習(xí)筆記之柵格系統(tǒng)原理
我要評(píng)論通過(guò)前面兩篇文章的簡(jiǎn)單介紹，大致對(duì)于Bootstrap有了初步的了解。由于自己也只是想通過(guò)Bootstrap官網(wǎng)來(lái)進(jìn)行簡(jiǎn)單的學(xué)習(xí)，自己能夠隨便搞個(gè)不是太搓的頁(yè)面就可以了。所以如果你是新手或許可以來(lái)看看，對(duì)你還有那么一點(diǎn)兒幫助，高手請(qǐng)飄過(guò)。
《Bootstrap3.0學(xué)習(xí)筆記》中也只是簡(jiǎn)單的介紹了如何下載文件，及進(jìn)行引用下載的文件，還沒(méi)有真正的進(jìn)入前端的設(shè)計(jì)學(xué)習(xí)中。我也看到了廣大網(wǎng)友們對(duì)Bootstrap3.0也具有很大的興趣，有之前就使用過(guò)的大牛，也有和我一樣正打算學(xué)習(xí)一下的盆友、小菜。至于回復(fù)中比較多的就是：希望能有個(gè)系列，當(dāng)然我也很希望自己能很好的規(guī)劃列一個(gè)系列，然后按照這個(gè)大綱進(jìn)行即可。不過(guò)本人能力有限，所以只好跟隨自己的喜好來(lái)進(jìn)行學(xué)習(xí)了。
聲明：寫作能力真是不濟(jì)，還望各位看官見(jiàn)諒。如有錯(cuò)誤，請(qǐng)及時(shí)通知，本人必會(huì)在最短的時(shí)間進(jìn)行更正，當(dāng)然更希望能有更多的人來(lái)一起學(xué)習(xí)。
柵格系統(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)建一組列（column）。你的內(nèi)容應(yīng)當(dāng)放置于列（column）內(nèi)，而且，只有列（column）可以作為行（row）的直接子元素。類似Predefined grid classes like .rowand .col-xs-4這些預(yù)定義的柵格class可以用來(lái)快速創(chuàng)建柵格布局。Bootstrap源碼中定義的mixin也可以用來(lái)創(chuàng)建語(yǔ)義化的布局。通過(guò)設(shè)置padding從而創(chuàng)建列（column）之間的間隔（gutter）。然后通過(guò)為第一和最后一樣設(shè)置負(fù)值的margin從而抵消掉padding的影響。柵格系統(tǒng)中的列是通過(guò)指定1到12的值來(lái)表示其跨越的范圍。例如，三個(gè)等寬的列可以使用三個(gè).col-xs-4來(lái)創(chuàng)建。DW6編碼實(shí)現(xiàn)
Okay勒，下面開(kāi)始寫代碼了額。首先上一張圖看看我使用的編輯器，之前在學(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>
<h2 class="page-header">區(qū)域一</h2>
<p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<h2 class="page-header">區(qū)域二</h2>
<p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
<h2 class="page-header">區(qū)域三</h2>
<p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
這幾個(gè)標(biāo)簽大家應(yīng)該都能看的明白，最基礎(chǔ)最簡(jiǎn)單的。
添加完后layout.html頁(yè)面所有代碼如下
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <pre></pre> <pre><font face="Arial"><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]>
<script src="<a ></script</a>>
<script src="<a ></script</a>>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<h2 class="page-header">區(qū)域一</h2>
<p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
<h2 class="page-header">區(qū)域二</h2>
<p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
<h2 class="page-header">區(qū)域三</h2>
<p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p> <script src="js/jquery-2.0.3.min.js"></script>
<script src="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 >.
然后我們?yōu)槊總€(gè)小的區(qū)域也添加一個(gè)容器div，并且為div添加一個(gè)類<div >
簡(jiǎn)單代碼實(shí)現(xiàn)如下
<div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-xs-4"> <h2 class="page-header">區(qū)域一</h2> <p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p> </div> <div class="col-xs-4"> <h2 class="page-header">區(qū)域二</h2> <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p> </div> <div class="col-xs-4"> <h2 class="page-header">區(qū)域三</h2> <p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</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è)col-xs-6的類、占用四個(gè)網(wǎng)格就添加一個(gè)col-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..col-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)文章
15 個(gè)為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國(guó)外的一些網(wǎng)站)
今天的文章，我們將分享15個(gè)可以學(xué)習(xí)編程的網(wǎng)站，這些網(wǎng)站上提供了很多編程教程，圖書以及編程練習(xí)，希望對(duì)你有用2024-11-02web開(kāi)發(fā)中的長(zhǎng)度單位小結(jié)
這篇文章主要介紹了web開(kāi)發(fā)中的長(zhǎng)度單位主要包括px,pt，em等,需要的朋友可以參考下2023-08-06網(wǎng)頁(yè)前端開(kāi)發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對(duì)單位，一般用于pc端網(wǎng)頁(yè)開(kāi)發(fā),因?yàn)槭墙^對(duì)單位所以在移動(dòng)端上的使用體驗(yàn)并不是很好,rem它是描述相對(duì)于當(dāng)前根元素字體尺寸，是相對(duì)單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮，各有優(yōu)點(diǎn)，選擇適合的壓縮工具為將來(lái)做項(xiàng)目開(kāi)發(fā)使用是一件很重要的事情??！在這介紹YUI-compressor,需要的朋友可以參考下2023-06-21html,css,javascript是怎樣變成頁(yè)面的
瀏覽器是多進(jìn)程的，有瀏覽器主進(jìn)程，網(wǎng)絡(luò)進(jìn)程，渲染進(jìn)程，插件進(jìn)程等，在將html，css，javascript解析成一個(gè)頁(yè)面的時(shí)候，就需要多個(gè)進(jìn)程的分工合作2023-05-01- 本文為大家整理了常用的文件對(duì)應(yīng)的MIME類型，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁(yè)中使用Unicode字符的介紹(&#,\u等)
國(guó)際組織制定了可以容納世界上所有文字和符號(hào)的字符編碼方案，稱為Unicode，是通用字符集Universal Character Set的縮寫，用以滿足跨語(yǔ)言、跨平臺(tái)進(jìn)行文本轉(zhuǎn)換、處理的要求2021-11-27前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-12-02
告別硬編碼讓你的前端表格自動(dòng)計(jì)算的實(shí)例代碼
這篇文章主要介紹了告別硬編碼讓你的前端表格自動(dòng)計(jì)算,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-27
