响应式布局 Bootstrap栅格系统

响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的；

/* 示例 */
@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

推荐使用：https://v3.bootcss.com/

<!-- 模板引入参考官网 -->
<!-- 要求当前网页以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）的组合来创建页面，你的内容就可以放入这些创建好的布局中

• 行 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 大屏显示

响应式布局 Bootstrap栅格系统

原文：https://www.cnblogs.com/article-record/p/12528410.html