溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“bootstrap響應式布局的概念是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“bootstrap響應式布局的概念是什么”吧！
在bootstrap中，響應式布局是指同一個頁面在不同的屏幕尺寸下有著不同的布局，響應式布局可以兼容不同分辨率的設備，可以利用柵格系統將一行平均分成12個格子，指定元素占幾個格子來實現。
本教程操作環境：Windows10系統、bootstrap3.3.7版、DELL G3電腦
一、基本概念
響應式布局指的是同一頁面在不同屏幕尺寸下有不同的布局，可以兼容不同分辨率的設備
傳統的開發方式是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>
感謝各位的閱讀，以上就是“bootstrap響應式布局的概念是什么”的內容了，經過本文的學習后，相信大家對bootstrap響應式布局的概念是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
