@(Bootstrap)
導(dǎo)言
前面我們講了如何安裝使用bootstrap框架沉馆，下面我們將會學(xué)習(xí)bootstrap的各種框架結(jié)構(gòu)臂容，布局刷允。在這篇文章中將講述如何使用柵格化布局
[TOC]
1.什么是柵格化布局
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)的工作原理：
網(wǎng)格系統(tǒng)的實現(xiàn)原理非常簡單疾嗅，僅僅是通過定義容器大小，平分12份(也有平分成24份或32份冕象，但12份是最常見的)代承，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢渐扮，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)次泽。Bootstrap框架中的網(wǎng)格系統(tǒng)就是將容器平分成12份。
2.開始柵格化布局
a創(chuàng)建一個容器
我們要先創(chuàng)建一個容器來存放我們的內(nèi)容席爽，這個容器的名字加containner,我們來看一下bootstrap文檔中的源碼意荤，這個樣式在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，文檔會居中顯示并適配各種設(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總和不能超過12
下面我們給個實例捐寥，部分源碼
Hello,World!
王文杜是個大傻逼嗎？是的ILOVEYOU下面為網(wǎng)頁效果
c.進(jìn)行列的嵌套
例如我們已經(jīng)創(chuàng)建一個num為8的列祖驱，我們可以在列里繼續(xù)嵌套列為6的列握恳，這樣就為原來的3/8，官方解釋如下
d.單元格的其他類
.c0l-xs- 無論屏幕寬度如何捺僻，單元格都在一行乡洼，寬度按照百分比設(shè)置；試用于手機(jī)匕坯；
.col-sm- 屏幕大于768px時束昵，單元格在一行顯示；屏幕小于768px時葛峻，獨(dú)占一行锹雏；試用于平板；
.col-md- 屏幕大于992px時术奖，單元格在一行顯示礁遵；屏幕小于992px時，獨(dú)占一行采记；試用于桌面顯示器佣耐；
.col-lg- 屏幕大于1200px時，單元格在一行顯示挺庞；屏幕小于1200px時晰赞，獨(dú)占一行；適用于大型桌面顯示器
e.列偏移
5、列偏移
有的時候掖鱼，我們不希望相鄰的兩個列緊靠在一起然走，但又不想使用margin或者其他的技術(shù)手段來。這個時候就可以使用列偏移（offset）功能來實現(xiàn)戏挡。使用列偏移也非常簡單芍瑞，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數(shù))，那么具有這個類名的列就會向右偏移褐墅。例如拆檬，你在列元素上添加“col-md-offset-4”，表示該列向右移動4個列的寬度妥凳。
以上就是柵格化布局的內(nèi)容
