一、刪格系統簡介
- Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。
- 官網：https://v3.bootcss.com/css/#grid
-
柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：
- 常用設備尺寸：小於768超小屏幕 [768,992)小屏幕 [992,1200)中等屏幕 大於1200大屏幕
- 根據屏幕尺寸變化，當到達臨界值時會自動適應，匹配相應的設置，實現響應式布局
- 如果自定義的網格數總和大於12，則多余的單元格另起一行
- 可以自定義每列的網格數，可以不相同
- 較大尺寸未設置時，默認繼承較小尺寸
- 較小尺寸未設置時，默認獨占一行
二、媒體查詢
/* 超小屏幕（手機，小於 768px） */ /* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */ /* 小屏幕（平板，大於等於 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面顯示器，大於等於 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面顯示器，大於等於 1200px） */ @media (min-width: @screen-lg-min) { ... }
三、刪格參數
通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的。
| 超小屏幕 手機 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面顯示器 (≥992px) | 大屏幕 大桌面顯示器 (≥1200px) | |
|---|---|---|---|---|
| 柵格系統行為 | 總是水平排列 | 開始是堆疊在一起的，當大於這些閾值時將變為水平排列C | ||
.container 最大寬度 |
None （自動） | 750px | 970px | 1170px |
| 類前綴 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）數 | 12 | |||
| 最大列（column）寬 | 自動 | ~62px | ~81px | ~97px |
| 槽（gutter）寬 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
四、案例說明
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <mata http-equiv="X-UA-Compatible" content="IE=edge"> 7 <link rel="stylesheet" href="css/bootstrap.css"> 8 <script src="js/bootstrap.js"></script> 9 <script src="js/jquery.js"></script> 10 <title>bootstrap</title> 11 <style> 12 .col1{ 13 background-color: red; 14 } 15 .col2{ 16 background-color: blue; 17 } 18 .col3{ 19 background-color: orange; 20 } 21 .col4{ 22 background-color: pink; 23 } 24 hr{ 25 border: 1px solid gray; 26 } 27 </style> 28 </head> 29 <body> 30 <h1>你好Bootstrap</h1> 31 <!-- 常用設備尺寸：小於768超小屏幕 [768,992)小屏幕 [992,1200)中等屏幕 大於1200大屏幕 --> 32 <div class="container"> 33 <!-- 默認獨占一行 --> 34 <div class="row"> 35 <div class="col1">col1</div> 36 <div class="col2">col2</div> 37 <div class="col3">col3</div> 38 <div class="col4">col4</div> 39 </div> 40 <hr> 41 <!-- 根據屏幕尺寸變化，當到達臨界值時會自動適應，匹配相應的設置，實現響應式布局 --> 42 <div class="row"> 43 <div class="col1 col-3 col-sm-2 col-md-1 col-lg-3">col1</div> 44 <div class="col2 col-3 col-sm-2 col-md-1 col-lg-3">col2</div> 45 <div class="col3 col-3 col-sm-2 col-md-1 col-lg-3">col3</div> 46 <div class="col4 col-3 col-sm-2 col-md-1 col-lg-3">col4</div> 47 </div> 48 <hr> 49 <!-- 如果自定義的網格數總和大於12，則多余的單元格另起一行 --> 50 <div class="row"> 51 <div class="col1 col-3 col-sm-2 col-md-1 col-lg-2">col1</div> 52 <div class="col2 col-3 col-sm-2 col-md-1 col-lg-1">col2</div> 53 <div class="col3 col-3 col-sm-2 col-md-1 col-lg-3">col3</div> 54 <div class="col4 col-3 col-sm-2 col-md-1 col-lg-6">col4</div> 55 </div> 56 <hr> 57 <!-- 可以自定義每列的網格數，可以不相同 --> 58 <div class="row"> 59 <div class="col1 col-3 col-sm-2 col-md-1 col-lg-5">col1</div> 60 <div class="col2 col-3 col-sm-2 col-md-1 col-lg-5">col2</div> 61 <div class="col3 col-3 col-sm-2 col-md-1 col-lg-3">col3</div> 62 <div class="col4 col-3 col-sm-2 col-md-1 col-lg-6">col4</div> 63 </div> 64 <hr> 65 <!-- 較大尺寸未設置時，默認繼承較小尺寸 --> 66 <div class="row"> 67 <div class="col1 col-3 col-sm-2 ">col1</div> 68 <div class="col2 col-3 col-sm-2 ">col2</div> 69 <div class="col3 col-3 col-sm-2 ">col3</div> 70 <div class="col4 col-3 col-sm-2 ">col4</div> 71 </div> 72 <hr> 73 <!-- 較小尺寸未設置時，默認獨占一行 --> 74 <div class="row"> 75 <div class="col1 col-sm-2 ">col1</div> 76 <div class="col2 col-sm-2 ">col2</div> 77 <div class="col3 col-sm-2 ">col3</div> 78 <div class="col4 col-sm-2 ">col4</div> 79 </div> 80 </div> 81 82 </body> 83 </html>
