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