快捷導(dǎo)航

Bootstrap頁(yè)面布局基礎(chǔ)知識(shí)全面解析

更新時(shí)間：2016年06月13日 11:12:13 作者：張占嶺

Bootstrap作為支持響應(yīng)式布局的一個(gè)前端插件，發(fā)揮著非常重要的作用，下面通過(guò)本文給大家介紹Bootstrap頁(yè)面布局基礎(chǔ)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

Bootstrap作為支持響應(yīng)式布局的一個(gè)前端插件，確實(shí)發(fā)揮著重要的作用，無(wú)論你是在手機(jī)，平板還是ＰＣ上瀏覽網(wǎng)頁(yè)，都能達(dá)到不錯(cuò)的效果，這一切一切，都是bootstrap帶給我們的！

今天主要說(shuō)下頁(yè)面的布局，這是最基礎(chǔ)的東西了，當(dāng)我們?cè)O(shè)計(jì)一個(gè)站點(diǎn)時(shí)，應(yīng)該為它設(shè)計(jì)一個(gè)全局性的統(tǒng)一的規(guī)范頁(yè)面，這種頁(yè)面我們叫它布局頁(yè)，而在頁(yè)面上體現(xiàn)出來(lái)的東西，就是布局的元素，在bootstrap里當(dāng)然也是不可缺少的東西。

Bootstrap的布局是一種柵格系統(tǒng)，即它由行和列組成，在使用時(shí)需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè) .container 容器。

一　.container 類(lèi)用于固定寬度并支持響應(yīng)式布局的容器。

<div class="container">
...
</div> 
.container-fluid 類(lèi)用于 100% 寬度，占據(jù)全部視口（viewport）的容器。

<div class="container-fluid">
...
</div>

二　柵格系統(tǒng)的行和列，在bootstrap里，行和列使用row和col表示，而一行中最多有１２個(gè)列單元組成，col-md-1表示占用１個(gè)單元的寬度，而col-md-7表示占用７個(gè)單元的寬度，它們加在一起最多為１２個(gè)單元

<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>

第二和第三行顯示出來(lái)的效果類(lèi)似這樣

三　嵌套列，列中還可以有列，這種嵌套我們需要把md改為sm

<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>

效果類(lèi)似于這樣