响应式布局 Bootstrap栅格系统
响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的；
| 设备划分 | 尺寸区间 |
|---|---|
| 超小屏幕（手机）设置宽度 100% | < 768px |
| 小屏设备（平板）设置宽度 750px | >= 768px ~ <992px |
| 中等设备（桌面显示器）设置宽度 970px | >= 992px ~ <1200px |
| 宽屏设备（大桌面显示器）设置宽度 1170px | >= 1200px |
/* 示例 */
@media screen and (min-width: 767px) {
.container {
width: 100%;
}
}
@media screen and (min-width: 991px) {
.container {
width: 750px;
}
}
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
Bootstrap
<!-- 模板引入参考官网 -->
<!-- 要求当前网页以IE最高版本内核渲染网页 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
布局容器
bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，Bootstrap 预先定义好了这个类；预先定义的样式与原理中相同；
栅格系统
也称网格系统，它是指将页面布局划分为等宽的列，然后通过列数定义来模块化页面布局；
Bootstrap 提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕（视口）尺寸的增加，系统会自动分成最多12列；其实也就是把 container 划分为 12等份
栅格选项参数
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面，你的内容就可以放入这些创建好的布局中
| 超小屏幕 | 小屏设备 | 中等屏幕 | 宽屏设备 | |
|---|---|---|---|---|
| .container最大宽度 | 自动100% | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数 | 1 - 12 | 1 - 12 | 1 - 12 | 1 - 12 |
- 行 row 必须放到 .container 里面
- 实现平均划分需要添加类前缀
- 列大于12行，多余的列会另起一行排列
- 每一列默认有
padding: 0 15px; - 可以同时为一列指定多个设备的类名，一遍划分不同份数，列入
col-md-4 col-sm-6
列嵌套
栅格系统分成若干份后其中一份再次分成若干份，列嵌套最好再加一个 row 这样可以取消父元素的padding值，而且高度和父级一样高
<div class="col-md-4">
<div class="row">
<div class="col-md-6">item1</div>
<div class="col-md-6">item2</div>
</div>
</div>
列偏移
使用 .col-md-offset-* 类可以将列元素向右边偏移，这些类实际是通过使用 * 选择器为当前元素增加了左侧边距 margin
<div class="col-lg-6 col-lg-offset-3"></div>
列排序
通过使用 col-md-push-* ， col-md-pull-* ，可以很容易改变列的顺序
<!-- push左向右，pull右向左 -->
<div class="col-lg-5 col-lg-push-7">左侧</div>
<div class="col-lg-7 col-lg-pull-5">右侧</div>
响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同的屏幕显示或隐藏元素
.hidden-xs 超小屏隐藏
.hidden-sm 小屏隐藏
.hidden-md 中屏隐藏
.hidden-lg 大屏隐藏
.visible-xs 超小屏显示
.visible-sm 小屏显示
.visible-md 中屏显示
.visible-lg 大屏显示
