一、删格系统简介
- 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>
