站長資訊網(wǎng)
在bootstrap中，響應(yīng)式布局是指同一個頁面在不同的屏幕尺寸下有著不同的布局，響應(yīng)式布局可以兼容不同分辨率的設(shè)備，可以利用柵格系統(tǒng)將一行平均分成12個格子，指定元素占幾個格子來實現(xiàn)。
本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap3.3.7版、DELL G3電腦
bootstrap的響應(yīng)式布局是什么意思
一、基本概念
響應(yīng)式布局指的是同一頁面在不同屏幕尺寸下有不同的布局，可以兼容不同分辨率的設(shè)備
傳統(tǒng)的開發(fā)方式是PC端開發(fā)一套，手機(jī)端再開發(fā)一套，而使用響應(yīng)式布局只要開發(fā)一套就夠，缺點就是CSS比較重。
實現(xiàn)：依賴于柵格系統(tǒng)，將一行平均分成12個格子，可以指定元素占幾個格子
* 步驟： （1）定義容器：相當(dāng)于之前的table * 容器分類： * container：兩邊留白 * container-fluid：每一種設(shè)備都是100%寬度 （2）定義行：相當(dāng)于之前的tr，樣式：row （3）定義元素：指定該元素在不同的設(shè)備上，所占的格子數(shù)目， 樣式：col-設(shè)備代號-格子數(shù)目
柵格參數(shù)：
注意：
（1）一行中如果格子數(shù)目超過12，則超出部分自動換行。 （2）柵格類屬性可以向上兼容。柵格類適用于與屏幕寬度大于或等于分界點大小的設(shè)備。 （3）如果真實設(shè)備寬度小于了設(shè)置柵格類屬性的設(shè)備代碼的最小值，會一個元素沾滿一整行。
二、示例
<!DOCTYPE html><html lang="zh-CN"><head> <style> .inner{ border:1px solid red; } </style></head><body><!--1.定義容器--><p class="container"> <!--2.定義行--> <p class="row"> <!--3.定義元素 在大顯示器一行12個格子 在pad上一行6個格子 --> <!--這里同時定義了大屏幕和小屏幕兩種情況都適用--> <p class="col-lg-1 col-sm-2 inner">柵格</p> <p class="col-lg-1 col-sm-2 inner">柵格</p> <p class="col-lg-1 col-sm-2 inner">柵格</p> <p class="col-lg-1 col-sm-2 inner">柵格</p> <p class="col-lg-1 col-sm-2 inner">柵格</p> <p class="col-lg-1 col-sm-2 inner">柵格</p> <p class="col-lg-1 col-sm-2 inner">柵格</p> <p class="col-lg-1 col-sm-2 inner">柵格</p> <p class="col-lg-1 col-sm-2 inner">柵格</p> <p class="col-lg-1 col-sm-2 inner">柵格</p> <p class="col-lg-1 col-sm-2 inner">柵格</p> </p></p></body></html>
