bootstrap--網格化布局
阿新 • • 發佈：2018-09-05
情況 idt oot 沒有 設備 scree trap ati css
@media (min-width: 768px)
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
float: left;
}
1.響應式網格系統隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列
2.規則
- 行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。
- 使用行來創建列的水平組。
- 內容應該放置在列內，且唯有列可以是行的直接子元素。
- 預定義的網格類，比如 .row 和 .col-xs-4，可用於快速創建網格布局。
3.Bootstrap 中的媒體查詢允許您基於視口大小移動、顯示並隱藏內容。下面的媒體查詢在 LESS 文件中使用，用來創建 Bootstrap 網格系統中的關鍵的分界點閾值。
/* 超小設備（手機，小於 768px） */---xs
/* Bootstrap 中默認情況下沒有媒體查詢 */
/* 小型設備（平板電腦，768px 起） */--sm
@media (min-width: @screen-sm-min) { ... }
/* 中型設備（臺式電腦，992px 起） */--md
@media (min-width: @screen-md-min) { ... }
/* 大型設備（大臺式電腦，1200px 起） */--lg
@media (min-width: @screen-lg-min) { ... }
4.div沒在網格布局中時，是獨占一行的，網格把屏幕寬度平分為12個網格，可以定義每個列在各種屏幕占用多少個網格，在沒有定義的屏幕中還是獨占一行（更大的尺寸沒有定義時會向下兼容）
下面代碼在平板設備（768-992）中側邊占4格，內容占8格，由於沒有定義更大尺，768以上尺寸都會是這個布局
小於768的各自獨占一行
原理就是通過@media媒體查詢獲取當前屏幕寬度，然後設置相應div的寬度比例
比如下例中div.col-sm-4在屏幕寬度大於768px時，css中會出現：
@media (min-width: 768px)
.col-sm-4 {
width: 33.33333333%;
@media (min-width: 768px)
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="col-sm-4">
<h2>側邊標題</h2>
<p>這裏是側邊這裏是側邊這裏是側邊這裏是側邊</p>
</div>
<div class="col-sm-8">
<h2>內容標題</h2>
<p>這裏是內容這裏是內容這裏是內容這裏是內容這裏是內容這裏是內容這裏是內容這裏是內容這裏是內容這裏是內容這裏是內容這裏是內容</p>
</div>
</div>
</body>
</html>
5.組合使用網格
bootstrap--網格化布局