之前，我很少做響應(yīng)式的頁面纸肉，新到的這家公司需要把官網(wǎng)的靜態(tài)頁面做成自適應(yīng)移動(dòng)端和PC端溺欧。如果想快速布局的話喊熟，bootstrap無意是一個(gè)比較好的選擇。
bootstrap是一個(gè)對(duì)移動(dòng)端非常友好的UI框架胧奔，它的原理是把屏幕的寬度分成12個(gè)等分大小的柵格逊移，bootstrap會(huì)查詢當(dāng)前屏幕的寬度，然后根據(jù)你定義的柵格數(shù)量來渲染頁面龙填。
bootstrap把屏幕的大小分為4個(gè)區(qū)間胳泉，col-xs-*、col-sm-*岩遗、col-md-*扇商、col-lg-*，分別代表超小屏幕（<768px）宿礁，小屏幕（768px-991px）案铺，中等屏幕（992px-1199px），大屏幕（>=1200px）梆靖。假如說控汉，你要顯示一塊內(nèi)容，它在超小屏幕和小屏幕占12份返吻，在中屏和大屏占6份姑子，那么就是這樣寫：
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"></div>
我們把列定好了，接下來我們需要定義行测僵。記住列的外層一定要包裹行的樣式街佑，否則會(huì)出問題的。
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"></div>
</div>
class="row"中定義了margin-left: -15px margin-right: -15px捍靠，所以這時(shí)候的內(nèi)容是往外凸的沐旨。這里我就遇到過一個(gè)坑，我的內(nèi)容是一張背景圖片榨婆，然后我按上面的方式設(shè)置屬性磁携，結(jié)果出現(xiàn)了一條橫向的滾動(dòng)條，當(dāng)時(shí)左思右想都覺得圖片的最大寬度為100%良风，不會(huì)超出當(dāng)前屏幕的大小颜武。后來才知道是那兩個(gè)負(fù)邊距值搞得鬼，它向外凸了之后拖吼，圖片的寬度就大于當(dāng)前屏幕的寬度，所以就產(chǎn)生了滾動(dòng)條这吻。
所以吊档，在class="row"的外層還需要包裹一個(gè)class，
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"></div>
</div>
</div>
class="container"中定義了padding-left: 15px padding-right: 15px唾糯，剛好可以與class="row"中的margin-left: -15px margin-right: -15px抵消怠硼，所以就完美地解決了這個(gè)問題鬼贱。
這3層的嵌套關(guān)系是每個(gè)頁面都必須的。
為了更好地完成響應(yīng)式布局香璃，bootstrap還定義了顯示这难、隱藏的類，很符合開發(fā)者的需求葡秒，它可以有這樣的應(yīng)用場(chǎng)景——大屏幕中的有些修飾性的東西可以在小屏幕隱藏掉姻乓，這樣可以讓移動(dòng)端的用戶體驗(yàn)更好。
這個(gè)問題我也掉過一個(gè)坑眯牧，我想在超小屏幕中隱藏掉某個(gè)東西蹋岩，我用了這樣的col-xs-0類，但在bootstrap中不存在0個(gè)柵格学少，結(jié)果當(dāng)然就不會(huì)生效剪个。
bootstrap定義的組件也非常好用，這里就不具體講他們的用法了版确，因?yàn)槲矣X得柵格系統(tǒng)才是bootstrap最基礎(chǔ)扣囊、最重要的內(nèi)容。
