@(Bootstrap)

導(dǎo)言

前面我們講了如何安裝使用bootstrap框架，下面我們將會(huì)學(xué)習(xí)bootstrap的各種框架結(jié)構(gòu)，布局。在這篇文章中將講述如何使用柵格化布局

[TOC]

1.什么是柵格化布局

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)的工作原理：

網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理非常簡(jiǎn)單，僅僅是通過(guò)定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見(jiàn)的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)。Bootstrap框架中的網(wǎng)格系統(tǒng)就是將容器平分成12份。

2.開(kāi)始柵格化布局

a創(chuàng)建一個(gè)容器

我們要先創(chuàng)建一個(gè)容器來(lái)存放我們的內(nèi)容，這個(gè)容器的名字加containner,我們來(lái)看一下bootstrap文檔中的源碼，這個(gè)樣式在bootstrap.css文件中,下面是bootstrap中的源碼

.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media(min-width:768px){.container{width:750px;}}@media(min-width:992px){.container{width:970px;}}@media(min-width:1200px){.container{width:1170px;}

margin-left和magin-right都設(shè)置為auto，文檔會(huì)居中顯示并適配各種設(shè)備

b.創(chuàng)建合適的柵格系統(tǒng)

我們看下bootstrap官網(wǎng)給的解釋

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

row代表行，bootstrap將劃分為12等分，用col-md-num表示，其中num是自己定義的最大為12，并且要保證自己設(shè)置的col總和不能超過(guò)12

下面我們給個(gè)實(shí)例，部分源碼

Hello,World!

下面為網(wǎng)頁(yè)效果

c.進(jìn)行列的嵌套

例如我們已經(jīng)創(chuàng)建一個(gè)num為8的列，我們可以在列里繼續(xù)嵌套列為6的列，這樣就為原來(lái)的3/8，官方解釋如下

d.單元格的其他類(lèi)

.c0l-xs-　　無(wú)論屏幕寬度如何，單元格都在一行，寬度按照百分比設(shè)置；試用于手機(jī)；

.col-sm-　　屏幕大于768px時(shí)，單元格在一行顯示；屏幕小于768px時(shí)，獨(dú)占一行；試用于平板；

.col-md-　　屏幕大于992px時(shí)，單元格在一行顯示；屏幕小于992px時(shí)，獨(dú)占一行；試用于桌面顯示器；

.col-lg-　　屏幕大于1200px時(shí)，單元格在一行顯示；屏幕小于1200px時(shí)，獨(dú)占一行；適用于大型桌面顯示器

e.列偏移

5、列偏移

有的時(shí)候，我們不希望相鄰的兩個(gè)列緊靠在一起，但又不想使用margin或者其他的技術(shù)手段來(lái)。這個(gè)時(shí)候就可以使用列偏移（offset）功能來(lái)實(shí)現(xiàn)。使用列偏移也非常簡(jiǎn)單，只需要在列元素上添加類(lèi)名“col-md-offset-*”(其中星號(hào)代表要偏移的列組合數(shù))，那么具有這個(gè)類(lèi)名的列就會(huì)向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示該列向右移動(dòng)4個(gè)列的寬度。

以上就是柵格化布局的內(nèi)容