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