大家好，我是IT修真院成都分院第一期的學(xué)員常開洋壮韭，一枚正直純潔善良的web前端程序員
今天給大家分享一下北发，修真院官網(wǎng)CSS（職業(yè)）任務(wù)纹因，深度思考中的知識點——bootstrap中的柵格系統(tǒng)
大家好，我是IT修真院成都分院第一期的學(xué)員常開洋鲫竞，一枚正直純潔善良的web前端程序員
1.背景介紹
柵格系統(tǒng)通過固定的格子結(jié)構(gòu)辐怕，來進行布局設(shè)計，這是一種設(shè)計風(fēng)格从绘，而且一直以來很廣泛地應(yīng)用于網(wǎng)頁設(shè)計領(lǐng)域寄疏。這樣的風(fēng)格清晰、工整僵井，可以讓網(wǎng)頁具有更友好的瀏覽體驗陕截。而隨著響應(yīng)式設(shè)計（responsive design）的流行，柵格系統(tǒng)開始被賦予新的意義批什，那就是农曲，一種響應(yīng)式設(shè)計的實現(xiàn)方式。
2.知識剖析
Bootstrap內(nèi)置了一套響應(yīng)式驻债、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)乳规，隨著屏幕設(shè)備或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列合呐。它就是通過一系列的行（row）與列（column）的組合創(chuàng)建頁面布局暮的，然后你的內(nèi)容就可以放入到你創(chuàng)建好的布局當中。正確的基本結(jié)構(gòu)是這樣的
3.常見問題
柵格布局的用法相信大家都很熟悉了淌实，今天我們主要來探討容器的padding 15px,行的margin -15px冻辩，列的padding 15px為什么要這么來回的使用15px
4.解決方案
容器container
Container是一個容器，使用它的主要是有兩個目的
1,在響應(yīng)式寬度上提供寬度約束拆祈。響應(yīng)式尺寸的改變其實改變的是 container 恨闪，行 (rows) 和列 (columns) 都是基于百分比的所以它們不需要做任何改變
2,提供 padding 以至于不內(nèi)容不直為緊貼于瀏覽器邊緣，兩邊都是 15px 放坏，下圖中粉色的就是了咙咽，稍后解釋更多；
行row
row 為col提供了空間淤年，理想上一行上分了12個col 犁珠，當所有col都向左浮時row 也就扮演了容器角色，另外當浮動有問題時row也不會重疊互亮。
row的兩側(cè)都擁有獨特的負15px的margin 值,如下圖中藍色部分.被當作為row的div被約束在 container內(nèi)邊界與粉色區(qū)域重疊，但沒超過余素。這負的15px margin值把row推出了 container的15pxpadding豹休，并與之重疊，本質(zhì)上講就是負出去桨吊。為什么這么做呢威根？原因得看列 (col) 的工作原理凤巨，下面我們會看到
列col
列(col)也有15px的padding，如下圖中黃顏色部分洛搀。上文中提到row的負margin抵消了container的padding敢茁，所以為每個column設(shè)置padding就是為了防止內(nèi)容直接觸碰邊界，使內(nèi)容不會緊貼在瀏覽器邊界上留美，而列與列之間有了padding才不會互相緊貼在一起彰檬。但是容器，行谎砾，與列的3個15px只是為了不讓col緊貼瀏覽器邊緣么逢倍，那直接取消container和row的15px只留下col的15px就行，為什么這么麻煩呢景图，繼續(xù)分析
嵌套
你設(shè)置了container,row,column后较雕，如果要在column中嵌套column首先要把被嵌套的column放到row中，把row放到作為容器的column中挚币，而不需要在放置一個container中亮蒋，col就充當了container如下圖藍色所示，是放入col中的row的負margin 15px區(qū)域
而下圖繼續(xù)將col放入row中妆毕，這樣就構(gòu)成了循環(huán)
我覺得嵌套的使用應(yīng)該是最符合container慎玖，row，column的這3個15px來回使用的解釋了
5.編碼實戰(zhàn)
如何學(xué)習(xí)
1
匹配你現(xiàn)在的個人情況尋找適合自己的崗位
2
了解職業(yè)前景薪金待遇设塔、競爭壓力等
3
掌握行業(yè)內(nèi)頂級技能
4
查看職業(yè)目標任務(wù)
5
參考學(xué)習(xí)資源凄吏，掌握技能點，逐個完成任務(wù)
6
加入班級闰蛔，和小伙伴們互幫互助痕钢，一塊學(xué)習(xí)
7
選擇導(dǎo)師，一路引導(dǎo)序六，加速自己成長
8
完成職業(yè)技能任连，升級業(yè)界大牛
演示鏈接:http://119.10.57.69:880/jnshu067/task10/task10-1.html
6.擴展思考
1.對于超小屏幕，柵格系統(tǒng)的斷點不夠用怎么辦例诀？
2.柵格系統(tǒng)是按照12等分來設(shè)計的随抠，如果想要5等分怎么做？
7.參考文獻
參考一：http://www.tuicool.com/articles/Afuu2q/
參考二：http://www.cnblogs.com/dojo-lzz/p/4621627.html
參考三：http://v3.bootcss.com/css/#grid
8.更多討論
柵格系統(tǒng)的真的很精妙，可以有更多的用法和理解么玛歌？
今天的分享就到這里啦阔馋，歡迎大家點贊、轉(zhuǎn)發(fā)秉沼、留言、拍磚~
下期不見不散~
