移动 webApp 开发入门与进阶

作者：user 发布日期： 浏览量：20

简介

什么是移动 Web 开发：
- 针对移动端的 Web 开发
- 移动端：手机、平板电脑
- PC端：台式机、笔记本电脑
- Web 开发就是 HTML、CSS、Javascript 代码在浏览器中运行

一、移动 Web 开发入门

1、像素

分辨率：
- 屏幕上的点，每一个点称为物理像素
- 分辨率 = 纵向的点数 x 横向的点数

物理像素(physical pixel)：
- 也称为设备像素(dp：device pixel)）

CSS 像素：
- 也称为逻辑像素（logical pixel）或 设备独立像素（dip：device independent pixel）
- CSS 像素是实际开发中使用的像素

设备像素比（dpr）：
- 设备像素比（dpr：device pixel ratio）
- dpr = 设备像素 / CSS像素（缩放比是 1 的情况下）
- dpi = 2 表示 1 个CSS像素用 2x2个设备像素来绘制

标清屏和高清屏：
- 标清屏：是指设备像素与CSS像素一比一，即 1 个CSS像素 = 1 个物理像素
- 高清屏：是指设备像素与CSS像素比大于 1

缩放：
- 缩放改变的是 CSS 像素的大小
- 放大：1 个CSS像素 = 多 x 多 个物理像素
- 缩小：多 x 多 个CSS像素 = 1 个物理像素

PPI/DPI：
- 屏幕英寸：屏幕对角线的长度
- PPI：每英寸的物理像素点，PPI = （屏幕宽的平方 + 屏幕高的平方）开根号再除以屏幕英寸
- DPI：每英寸的点

2、视口（viewport）

视口宽度设置：

// 一般这样写
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
// 下面这些是分开写
<meta name="viewport" content="initial-scale=1">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="maximum-scale=1,minimum-scale=1">

JS 中获取视口宽度：

console.log(window.innerWidth);
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.getBoundingClientRect().width);

var viewWidth = window.innerWidth || document.documentElement.clientWidth || document.documentElement.getBoundingClientRect().width;

JS 中获取设备像素比 dpr：

console.log(window.devicePixelRatio);

3、box-sizing 属性

  • box-sizing 属性：常用于宽高设置为百分比形式时
  • 属性值：content-box（默认），表示设置的宽高就是实际内容的宽高
  • 属性值：border-box，表示设置的宽高是实际内容的宽高 + padding + border

4、图标字体

  • 可以使用字体属性设置的图标
  • 推荐使用阿里巴巴矢量图片库：iconfront

5、flex 布局

（1）flex 的基本概念

flex 布局：
- Flex 是 Flexible Box 的缩写，意为“弹性的盒子”，所以 flex 布局也称为 “弹性布局”
- flex 布局主要用于使 flex 项目进行排列或缩放

什么是 flex 容器（flex container）:
- 采用 flex 布局的元素，称为 flex 容器
- 只要盒子内写上 display: flex; 或 inline-flex; 都称为 flex 容器
- display: flex; 在没有设置容器宽度时，父容器有固定宽度，默认100%
- display: inline-flex; 在没有设置容器宽度时，父容器的宽度由项目撑开

什么是 flex 项目（flex item）:
- flex 容器的所有子元素自动成为容器的成员，称为 flex 项目
- 主轴默认是水平的；项目默认沿主轴排列

（2）容器属性

flex-direction 属性：
- flex-direction 属性：用于控制容器内排列方向与顺序
- 属性值：row（默认），按顺序横向排列
- 属性值：row-reverse，按倒序横向排列
- 属性值：column，按顺序纵向排列
- 属性值：column-reverse，按倒序纵向排列

flex-wrap 属性：
- flex-wrap 属性：用于控制容器内项目是否换行
- 属性值：nowrap（默认），默认不换行
- 属性值：wrap，表示换行，第一排会紧贴容器顶部
- 属性值：wrap-reverse，同样表示换行，但第一排会紧贴容器底部

justify-content 属性：
- justify-content 属性：用于控制容器内元素在水平方向的对齐方式
- 属性值：flex-start（默认），表示左对齐
- 属性值：center，表示居中对齐
- 属性值：flex-end，表示右对齐
- 属性值：space-between，表示左右两端对齐，即左右两侧项目都紧贴父容器，且项目之间间距相等

align-items 属性：
- align-items 属性：用于控制容器内元素在竖直方向的对齐方式
- 属性值：stretch（默认），表示如果项目没有设置高度，或高度为 auto，则占满整个容器高度
- 属性值：flex-start，表示紧贴容器顶部
- 属性值：center，表示在竖直方向居中
- 属性值：flex-end，表示紧贴容器底部

（3）项目属性

order 属性：
- order 属性：用于决定项目的排列顺序
- 属性值：0（默认），属性值越小，元素排列越靠前

flex-grow 属性：
- flex-grow 属性：用于决定项目在有剩余空间的情况下是否放大（即使设置了固定宽度，也会放大）
- 属性值：0（默认），表示不放大

flex-shrink 属性：
- flex-shrink 属性：用于决定项目在空间不足时是否缩小（即使设置了固定宽度，也会缩小）
- 属性值：1（默认），表示空间不足时所有项目一起等比例缩小

flex-basis 属性：
- flex-basis 属性：用于设置项目宽度
- 属性值：auto（默认），表示使用默认宽度，或者以 width 为自身的宽度

flex 属性：
- flex 属性是 flex-grow、flex-shrink 与 flex-basis 三个属性的简写形式，用于设置项目的放大、缩小与宽度
- 属性值：0 1 auto（默认），表示不放大、等比例缩小、使用默认宽度

align-self 属性：
- align-self 属性允许单个项目有与其它项目不一样的对齐方式，可覆盖 align-items 属性
- 属性值：auto（默认），表示继承父容器的 align-items 属性；如果没有父容器，则等同于 stretch
- 属性值：stretch，表示如果项目没有设置高度，或高度为 auto，则占满整个容器高度
- 属性值：flex-start，表示紧贴容器顶部
- 属性值：center，表示在竖直方向居中
- 属性值：flex-end，表示紧贴容器底部

6、媒体查询

（1）媒体查询 - 基础

什么是媒体查询（media query）：

@media 查询类型 查询逻辑 (特征表达式) {
    /* 实现的样式 */
    /* body {
        background-color: red;
    } */
}

为什么需要媒体查询：
- 一套样式不可能适应各种大小的屏幕，针对不同的屏幕大小写样式，让我们的页面在不同大小的屏幕上都能正常显示

媒体查询的类型：
- all（默认值）：表示包含 screen、print和speech，一般直接使用 all
- screen：屏幕
- print：打印预览
- speech：屏幕阅读器

@media all and (min-width: 900px) {
    /* 表示当屏幕大于900px 时屏幕背景色变为红色 */
    body {
        background-color: red;
    }
}
/* 也可以简写为 */
@media (min-width: 900px) {
    /* 表示当屏幕大于等于900px 时屏幕背景色变为红色 */
    body {
        background-color: red;
    }
}

媒体查询中的逻辑：
- 与（and）
- 或（,）：逗号前面的是一个整体
- 非（not）：如果后面都是与，则后面是一个整体，表示对后面的取反；如果后面有或，则表示对或之前的取反

// 与
@media screen and (min-width: 900px) and (max-width: 1024px){
    /* 表示当屏幕大于等于 900px 且 小于等于 1024px 时屏幕背景色变为红色 */
    body {
        background-color: red;
    }
}

// 或
@media screen and (max-width: 900px), (min-width: 1024px){
    /* 表示当屏幕小于等于 900px 或 大于等于 1024px 时屏幕背景色变为红色 */
    body {
        background-color: red;
    }
}
// 上一个相当于
@media screen and (max-width: 900px), all and (min-width: 1024px){
    /* 表示当屏幕小于等于 900px 或 all大于等于 1024px 时屏幕背景色变为红色 */
    body {
        background-color: red;
    }
}

@media screen and (max-width: 900px), screen and (min-width: 1024px){
    /* 表示当屏幕小于等于 900px 或 屏幕大于等于 1024px 时屏幕背景色变为红色 */
    body {
        background-color: red;
    }
}

// 非
@media not screen and (max-width: 900px), screen and (min-width: 1024px){
    /* 表示当屏幕大于等于900px 或 屏幕大于 1024px 时屏幕背景色变为红色 */
    body {
        background-color: red;
    }
}

媒体特征表达式：
- width / max-width / min-width：一般使用的是表示范围的，所以 width 不常用
- -webkit-device-pixel-ratio / -webkit-max-device-pixel-ratio / -webkit-min-device-pixel-ratio：
- orientation 属性设置横屏（landscape）或竖屏（portrait）

@media screen and (-webkit-device-pixel-ratio: 1) {
    /* 表示当设备像素比为 1 时屏幕背景色变为红色 */
    body {
        background-color: red;
    }
}
@media (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
    /* 表示当横屏的设备像素比大于等于 1 时屏幕背景色变为红色 */
    body {
        background-color: red;
    }
}

（2）媒体查询 - 策略

/*
    断点
      xs: < 576px
      sm: 576px ~ 768px
      md: 768px ~ 992px
      lg: 992px ~ 1200px
      xl: > 1200px
    断点的设置：当改变屏幕大小到达某个值时，需要将显示内容进行换行等操作
*/

/* 一般的设置方式 */
@media (max-width: 576px) {}
@media (min-width: 577px) and (max-width: 768px) {}
@media (min-width: 769px) and (max-width: 992px) {}
@media (min-width: 993px) and (max-width: 1200px) {}
@media (min-width: 1201px) {}

/* 
    PC first（PC 端优先）
    这种写法顺序不能更改，原因是符合条件时后面的覆盖前面的
 */
/* 先设置最大 */

@media (max-width: 1200px) {}
@media (max-width: 992px) {}
@media (max-width: 768px) {}
@media (max-width: 576px) {}

/* 
    mobile first（移动端优先）
    这种写法顺序也不能更改，原因是符合条件时后面的覆盖前面的
 */
/* 先设置最小 */

@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}

7、移动端常用单位（px/%/em/rem/vw/vh）

  • px / % / em / rem / vw / vh 这些单位中除了 px 是固定单位，其它都是相对单位
  • em：元素自身字体大小，1 em = 1 font-size，即表示 1 个 em 等于它自身 font-size 的大小；当自身没有设置 font-size 属性或 font-size 属性单位也为 em 时，则会向父元素找
font-size: 12px;
width: 5em;  // 相当于宽为 5 x 12 = 60px
height: 6em;  // 相当于高为 6 x 12 = 72px
  • rem：rem 是相对根元素设置的 font-size，即设置的是 html 的字体大小，然后可以整个当前页面全局使用
html {
    font-size: 12px;
}
.box {
    width: 1rem;  // 相当于宽为 1 x 12 = 12px
}
  • vw：视口宽度，1 vw = 1%viewWidth
  • vh：视口高度，1 vw = 1%viewHeight

二、响应式布局

1、什么是响应式布局

  • 2010年5月由 Ethan Marcotte 提出的一个概念
  • 一个网站兼容多种终端
  • 对不同屏幕尺寸（大小）做出响应，并进行相应布局的一种移动 Web 开发方式

响应式布局的原理：
- 使用媒体查询设置断点
- 超小屏（Extra small）：< 576px
- 小屏（Small，sm）：>= 576px（540px）
- 中屏（Medium，md）：>= 768px（720px）
- 大屏（Large，lg）：>= 992px（960px）
- 超大屏（Extra large，xl）：>= 1200px（1140px）

响应式布局的优缺点及适用性：
- 优点：一份代码兼容多种终端
- 缺点：需要兼容各种终端，工作量大，效率低下；代码累赘，在特定终端会出现无用代码；加载时间长
- 适用：结构比较简单的页面，一些展示性网站，例如企业网站等
- 不适用：结构复杂、交互多的页面，一些功能性的页面，例如淘宝等

2、栅格系统

什么是栅格系统：
- 响应式布局的一种实现方式
- 将页面栅格化
- 栅格的列一般有 12 列、16 列、24 列

实现栅格系统：
- 使用 float 实现栅格系统（代码见文章末尾附录“float 实现栅格系统”）
- 使用 flex 布局实现栅格系统（代码见文章末尾附录“flex 布局实现栅格系统”）

三、移动端屏幕适配

移动端屏幕适配是什么：
- 使页面在移动端各种大小屏幕上都能够正常显示的一种移动端开发方案

移动端屏幕适配与响应式布局的关系：

移动端适配 响应式布局
终端 仅移动端 PC 端和移动端
常用单位 宽高：rem \/ %；字体：px 宽：%；高、字体：px
宽和高 宽和高都随着屏幕大小等比例变化 宽度变化，高度不变，非等比例

1、简单适配

  • 存在的问题：1px 边框问题：当设备像素比大于 1 时，1 像素边框不再是 1px，而是根据设备像素比而变化
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

(function() {
  // 使用严格模式
  'use strict';

  setRemUnit();

  window.addEventListener('resize', setRemUnit);

  function setRemUnit() {
    var docEl = document.documentElement;
    var ratio = 18.75;
    var viewWith = docEl.getBoundingClientRect().width || window.innerWidth;

    docEl.style.fontSize = viewWith / ratio + 'px';
  }
})();

2、通用适配

  • 通用适配方案解决简单适配方案 1px 边框的问题
  • 不设置 meta 标签也可以，下面 JS 里会设置
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

(function () {
  // 使用严格模式
  'use strict';

  var docEl = document.documentElement;
  var viewportEl = document.querySelector('meta[name="viewport"]');
  var dpr = window.devicePixelRatio || 1;
  // 最大/最小宽度
  var maxWidth = 540;
  var minWidth = 320;

  if (dpr >= 3) {
    dpr = 3;
  } else if (dpr >= 2) {
    dpr = 2;
  } else {
    dpr = 1;
  }

  docEl.setAttribute('data-dpr', dpr);
  docEl.setAttribute('max-width', maxWidth);
  docEl.setAttribute('min-width', minWidth);

  var scale = 1 / dpr;
  var content = 'width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';

  if (viewportEl) {
    viewportEl.setAttribute('content', content);
  } else {
    viewportEl = document.createElement('meta');
    viewportEl.setAttribute('name', 'viewport');
    viewportEl.setAttribute('content', content);
    document.head.appendChild(viewportEl);
  }

  setRemUnit();

  window.addEventListener('resize', setRemUnit);

  function setRemUnit() {
    // 比率可改
    var ratio = 18.75;
    var viewWith = docEl.getBoundingClientRect().width || window.innerWidth;

    if (maxWidth && (viewWith / dpr > maxWidth)) {
      viewWith = maxWidth * dpr;
    } else if (minWidth && (viewWith / dpr < minWidth)) {
      viewWith = minWidth * dpr;
    }
    docEl.style.fontSize = viewWith / ratio + 'px';
  }
})();

四、移动端事件

PC端事件 移动端事件
鼠标事件、键盘事件 触摸事件（touch 事件、pointer事件）、手势（gesture）事件、传感器（sensor）事件

1、touch 事件

onXXX（DOM0 级） addEventListener（DOM2 级） 说明
ontouchstart touchstart 触摸开始时触发事件
ontouchmove touchmove 触摸移动时触发事件
ontouchend touchend 触摸结束时触发事件
ontouchcancel touchcancel 触摸中断时触发事件（一般是系统级事件，平常我们使用不到），例如触摸屏幕时来电话

2、touch 事件的 event 对象

touches、targetTouches和changedTouches的区别：
- 当屏幕上出现4个手指，其中2个在目标区域内，2个在目标区域外，在目标区域内、外分别有一个手指发生移动

touches targetTouches changedTouches
区别 touches 包含屏幕上所有触摸点的信息 targetTouches 包含目标区域所有触摸点的信息 changedTouches 包含所有发生改变的点的信息
- 一般单指时使用 e.changedTouches[0] 得到该触摸点的信息
- clientX 和 clientY 指的是在屏幕可视区域内的坐标
- pageX 和 pageY 指的是考虑滚动条时页面的坐标

3、hammer.js 使用高级事件

  • hammer 官网：http://hammerjs.github.io/
  • hammer 的使用：实例化 Hammer 对象，调用 on 方法并传入事件和回调函数
// 第二个参数是参数列表，如果没有参数可以不写
var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
    console.log(ev);
});
  • hammer添加了 tap（单击）、doubletap（双击）、press（长按）、水平 pan（平移）、swipe（滑动）、pinch（捏） 和 rotate（旋转）事件
  • 默认情况下禁用 pinch 和 rotate，因为它们会使元素阻塞，但可以通过调用启用它们
hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

五、移动端常见问题

1、浏览器兼容性

（1）HTML 浏览器兼容性

  • can i use官网：https://www.caniuse.com/
  • caniuse 用于查询HTML、CSS、JavaScript的某个标签或属性在某个浏览器版本能不能使用
  • html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，可以下载并引入 html5shiv.js 让 IE 浏览器识别并支持 HTML5 元素

（2）JS 浏览器兼容性

  • 做特性检测，不要做浏览器检测
  • 判断某个方法在浏览器是否支持，可以使用 window 打点调用该方法去判断，即使该方法不存在也不会报错，只会输出 undefined
if (window.requestAnimationFrame) {

} else {

}
  • 上一种形式只考虑是否支持，但有的浏览器是部分支持，需要加厂商前缀
  • 标准写法的必须写在最前面，后面的厂商支持的写在标准写法的后面，顺序随意
  • 如果前面几种都不支持，则表明浏览器根本不支持这个东西，所以可以抛出一个错误或者可以自己写一个函数模拟这个过程
// 示例
var requestAnimationFrame = window.requestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.mozRequestAnimationFrame || 
                            window.oRequestAnimationFrame ||
                            window.msRequestAnimationFrame; 
                            // window.msRequestAnimationFrame ||
                            // function(fn) {
                            //   setTimeout(fn, 16)
                            // }

（3）CSS 浏览器兼容性

  • 有一些特性需要加厂商前缀，但这个前缀不可能每次都去查 caniuse 手动添加，所以实际开发中可以使用一些插件，例如 emmet
  • Modernizr 官网地址：http://modernizr.cn/
  • Modernizr 是一个用于检测用户浏览器是否支持 HTML5 与 CSS3 特性，然后就可以定制化写 CSS
// 示例

// 高版本支持
.flexbox header {
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  -ms-align-items: center;
  align-items: center;
}
// 高版本不支持写兼容性的写法
.no-flexbox header {
  text-align: center;
  line-height: 50px;
}

2、移动端动画

  • 推荐使用一个封装好的动画库 Animate.css：https://animate.style/
  • 用来做动画的方法有哪些
DOM Canvas
setInterval 支持 支持
JavaScript setTimeout 支持 支持
requestAnimationFrame 支持（推荐使用） 支持（推荐使用）
CSS3 transition（过渡） 支持（推荐使用） 不支持
animation（动画） 支持（推荐使用） 不支持
- 做动画时优先考虑使用 CSS3，CSS3不支持后才考虑 requestAnimationFrame
- requestAnimationFrame 的使用要点是：调用一次只执行一帧
- requestAnimationFrame 的使用方法： 
// html
<button id="btn">start</button>
<div id="box" class="box"></div>
// JS
var requestAnimationFrame = window.requestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.mozRequestAnimationFrame || 
                            window.oRequestAnimationFrame ||
                            window.msRequestAnimationFrame; 
var boxEl = document.getElementById('box');
var btnEl = document.getElementById('btn');
var dest = window.innerWidth - 100;
var speed = 10;
var position = 0;

btnEl.addEventListener('click', function() {
    requestAnimationFrame(step);
});

function move(el, position) {
    el.style.transform = 'translate3d(' + position + 'px, 0, 0)';
}

function step() {
    if(position < dest) {
      position += speed;
      move(boxEl, position);
      requestAnimationFrame(step);
    } else {
      position = dest;
      move(boxEl, position);
    }
}

3、移动端 click 事件有 300ms延迟

  • click 事件出现 300ms延迟的原因：因为浏览器有双击放大的功能，如果在 300ms 内有第二次点击，则表示这是一次双击操作
  • 解决方法：
    1）有些浏览器解决办法是在 \<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no” > 的 content 属性中添加 width=device-width （但这种方法并不是所有浏览器都支持）
    2）使用 fastclick.js，其原理是：在检测到 touchend 事件的时候，会通过DOM自定义事件立即触发一个模拟的 click 事件，并把浏览器在 300ms 之后真正的 click 事件阻止掉

4、单行和多行文字溢出省略

  • 单行文字溢出并用 … 替代
  • flex 布局不能直接跟文字溢出省略一起使用，解决办法是：在文字上包一层，文字溢出在该层使用，flex 布局在上一层使用（主要针对单行溢出省略）
.text-ellipsis {
  // 超出部分隐藏
  overflow: hidden;
  // 隐藏的部分用 … 代替
  text-overflow: ellipsis;
  // 不换行
  white-space: nowrap;
}
  • 多行文字溢出并用 … 替代（兼容性不够好）
  • 使用多行溢出省略是文本容器的高度最好不要设置，由文字自己撑开
.text-ellipsis {
  // 超出部分隐藏
  overflow: hidden;
  // 隐藏的部分用 … 代替
  text-overflow: ellipsis;
  // 不换行
  white-space: normal !important;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  // 控制显示的行数
  -webkit-line-clamp: 2;
}

5、水平居中和垂直居中

（1）使用 flex 布局

  • 可设置容器和项目垂直水平居中
display: flex;
justity-content: center;
align-items: center;

（2）容器垂直水平居中

  • 通用方式为
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// tansform: translate(-50%, -50%); 可替换为如下
margin-left: 负宽度一半;
margin-top: 负高度一半；
  • 如果容器设置有宽高，可将 tansform: translate(-50%, -50%); 替换为容器宽和高的各一半
position: absolute;
left: 50%;
top: 50%;
// transform: translate(-50%, -50%);
// tansform: translate(-50%, -50%); 可替换为如下
margin-left: 负宽度一半;
margin-top: 负高度一半；

（3）文字垂直水平居中

不指定宽高，由内容撑开：
- 内联元素（display: inline;）：自动垂直水平居中

// 内联元素的形式：不能设置padding-top 和 padding-bottom
display: inline;
  • 内联块元素（display: inline-block;）：自动垂直水平居中，可以设置 padding-top 和 padding-bottom
display: inline-block;
// 内联块元素形式相对于内联元素，可以设置 padding-top 和 padding-bottom
padding: 20px 20px;
  • 块元素（display: block;）:
display: block;
text-align: center;

指定宽高：
- 内联元素（display: inline;）：内联元素不能设置宽高
- 内联块元素（display: inline-block;）：单行文字时设置行高等于容器高度就可垂直居中，多行文字时使用 flex 布局

display: inline-block;
width: 200px;
height: 100px;
// 每一行都水平居中
text-align: center;
// 设置行高等于容器高度就可垂直居中
line-height: 100px;
  • 块元素（display: block;）:单行文字时设置行高等于容器高度就可垂直居中，多行文字时使用 flex 布局
display: block;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;

更多垂直水平居中方式见 附录3

六、移动端性能优化

七、Swipe 快速切换插件

附录1：float 实现栅格系统

/* 移动优先 */

/* Extra small */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
/* Small，sm */
@media (min-width: 576px) {
  .container {
    width: 540px;
  }
}
/* Medium，md */
@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}
/* Large，lg */
@media (min-width: 992px) {
  .container {
    width: 960px;
  }
}
/* Extra large，xl */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,col-12,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,col-sm-12,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,col-md-12,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,col-lg-12,
.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,col-xl-12 {
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,col-12 {
  float: left;
}
.col-1 {
  width: 8.33333333%;
}
.col-2 {
  width: 16.66666666%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33333333%;
}
.col-5 {
  width: 41.66666666%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33333333%;
}
.col-8 {
  width: 66.66666666%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33333333%;
}
.col-11 {
  width: 91.66666666%;
}
.col-12 {
  width: 100%;
}
.col-offset-0 {
  margin-left: 0;
}
.col-offset-1 {
  margin-left: 8.33333333%;
}
.col-offset-2 {
  margin-left: 16.66666666%;
}
.col-offset-3 {
  margin-left: 25%;
}
.col-offset-4 {
  margin-left: 33.33333333%;
}
.col-offset-5 {
  margin-left: 41.66666666%;
}
.col-offset-6 {
  margin-left: 50%;
}
.col-offset-7 {
  margin-left: 58.33333333%;
}
.col-offset-8 {
  margin-left: 66.66666666%;
}
.col-offset-9 {
  margin-left: 75%;
}
.col-offset-10 {
  margin-left: 83.33333333%;
}
.col-offset-11 {
  margin-left: 91.66666666%;
}
.col-offset-12 {
  margin-left: 100%;
}
.col-push-0 {
  left: auto;
}
.col-push-1 {
  left: 8.33333333%;
}
.col-push-2 {
  left: 16.66666666%;
}
.col-push-3 {
  left: 25%;
}
.col-push-4 {
  left: 33.33333333%;
}
.col-push-5 {
  left: 41.66666666%;
}
.col-push-6 {
  left: 50%;
}
.col-push-7 {
  left: 58.33333333%;
}
.col-push-8 {
  left: 66.66666666%;
}
.col-push-9 {
  left: 75%;
}
.col-push-10 {
  left: 83.33333333%;
}
.col-push-11 {
  left: 91.66666666%;
}
.col-push-12 {
  left: 100%;
}
.col-pull-0 {
  right: auto;
}
.col-pull-1 {
  right: 8.33333333%;
}
.col-pull-2 {
  right: 16.66666666%;
}
.col-pull-3 {
  right: 25%;
}
.col-pull-4 {
  right: 33.33333333%;
}
.col-pull-5 {
  right: 41.66666666%;
}
.col-pull-6 {
  right: 50%;
}
.col-pull-7 {
  right: 58.33333333%;
}
.col-pull-8 {
  right: 66.66666666%;
}
.col-pull-9 {
  right: 75%;
}
.col-pull-10 {
  right: 83.33333333%;
}
.col-pull-11 {
  right: 91.66666666%;
}
.col-pull-12 {
  right: 100%;
}

/* sm */
@media (min-width: 576px) {
  .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,col-sm-12 {
    float: left;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-2 {
    width: 16.66666666%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-5 {
    width: 41.66666666%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-8 {
    width: 66.66666666%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-11 {
    width: 91.66666666%;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-offset-0 {
    margin-left: 0;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666666%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666666%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666666%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666666%;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }

  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-2 {
    left: 16.66666666%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-5 {
    left: 41.66666666%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-8 {
    left: 66.66666666%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-11 {
    left: 91.66666666%;
  }
  .col-sm-push-12 {
    left: 100%;
  }

  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-2 {
    right: 16.66666666%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-5 {
    right: 41.66666666%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-8 {
    right: 66.66666666%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-11 {
    right: 91.66666666%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
}

/* md */
@media (min-width: 768px) {
  .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-2 {
    width: 16.66666666%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-5 {
    width: 41.66666666%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-8 {
    width: 66.66666666%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-11 {
    width: 91.66666666%;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666666%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666666%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666666%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666666%;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }

  .col-md-push-0 {
    left: auto;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-2 {
    left: 16.66666666%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-5 {
    left: 41.66666666%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-8 {
    left: 66.66666666%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-11 {
    left: 91.66666666%;
  }
  .col-md-push-12 {
    left: 100%;
  }

  .col-md-pull-0 {
    right: auto;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-2 {
    right: 16.66666666%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-5 {
    right: 41.66666666%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-8 {
    right: 66.66666666%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-11 {
    right: 91.66666666%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
}

/* lg */
@media (min-width: 992px) {
  .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
  .col-lg-2 {
    width: 16.66666666%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-5 {
    width: 41.66666666%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-8 {
    width: 66.66666666%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-11 {
    width: 91.66666666%;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-offset-0 {
    margin-left: 0;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666666%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666666%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666666%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666666%;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }

  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-push-1 {
    left: 8.33333333%;
  }
  .col-lg-push-2 {
    left: 16.66666666%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-4 {
    left: 33.33333333%;
  }
  .col-lg-push-5 {
    left: 41.66666666%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-7 {
    left: 58.33333333%;
  }
  .col-lg-push-8 {
    left: 66.66666666%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-10 {
    left: 83.33333333%;
  }
  .col-lg-push-11 {
    left: 91.66666666%;
  }
  .col-lg-push-12 {
    left: 100%;
  }

  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-pull-1 {
    right: 8.33333333%;
  }
  .col-lg-pull-2 {
    right: 16.66666666%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-4 {
    right: 33.33333333%;
  }
  .col-lg-pull-5 {
    right: 41.66666666%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-7 {
    right: 58.33333333%;
  }
  .col-lg-pull-8 {
    right: 66.66666666%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-10 {
    right: 83.33333333%;
  }
  .col-lg-pull-11 {
    right: 91.66666666%;
  }
  .col-lg-pull-12 {
    right: 100%;
  }
}

/* xl */
@media (min-width: 1200px) {
  .col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,col-xl-12 {
    float: left;
  }
  .col-xl-1 {
    width: 8.33333333%;
  }
  .col-xl-2 {
    width: 16.66666666%;
  }
  .col-xl-3 {
    width: 25%;
  }
  .col-xl-4 {
    width: 33.33333333%;
  }
  .col-xl-5 {
    width: 41.66666666%;
  }
  .col-xl-6 {
    width: 50%;
  }
  .col-xl-7 {
    width: 58.33333333%;
  }
  .col-xl-8 {
    width: 66.66666666%;
  }
  .col-xl-9 {
    width: 75%;
  }
  .col-xl-10 {
    width: 83.33333333%;
  }
  .col-xl-11 {
    width: 91.66666666%;
  }
  .col-xl-12 {
    width: 100%;
  }

  .col-xl-offset-0 {
    margin-left: 0;
  }
  .col-xl-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xl-offset-2 {
    margin-left: 16.66666666%;
  }
  .col-xl-offset-3 {
    margin-left: 25%;
  }
  .col-xl-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xl-offset-5 {
    margin-left: 41.66666666%;
  }
  .col-xl-offset-6 {
    margin-left: 50%;
  }
  .col-xl-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xl-offset-8 {
    margin-left: 66.66666666%;
  }
  .col-xl-offset-9 {
    margin-left: 75%;
  }
  .col-xl-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xl-offset-11 {
    margin-left: 91.66666666%;
  }
  .col-xl-offset-12 {
    margin-left: 100%;
  }

  .col-xl-push-0 {
    left: auto;
  }
  .col-xl-push-1 {
    left: 8.33333333%;
  }
  .col-xl-push-2 {
    left: 16.66666666%;
  }
  .col-xl-push-3 {
    left: 25%;
  }
  .col-xl-push-4 {
    left: 33.33333333%;
  }
  .col-xl-push-5 {
    left: 41.66666666%;
  }
  .col-xl-push-6 {
    left: 50%;
  }
  .col-xl-push-7 {
    left: 58.33333333%;
  }
  .col-xl-push-8 {
    left: 66.66666666%;
  }
  .col-xl-push-9 {
    left: 75%;
  }
  .col-xl-push-10 {
    left: 83.33333333%;
  }
  .col-xl-push-11 {
    left: 91.66666666%;
  }
  .col-xl-push-12 {
    left: 100%;
  }

  .col-xl-pull-0 {
    right: auto;
  }
  .col-xl-pull-1 {
    right: 8.33333333%;
  }
  .col-xl-pull-2 {
    right: 16.66666666%;
  }
  .col-xl-pull-3 {
    right: 25%;
  }
  .col-xl-pull-4 {
    right: 33.33333333%;
  }
  .col-xl-pull-5 {
    right: 41.66666666%;
  }
  .col-xl-pull-6 {
    right: 50%;
  }
  .col-xl-pull-7 {
    right: 58.33333333%;
  }
  .col-xl-pull-8 {
    right: 66.66666666%;
  }
  .col-xl-pull-9 {
    right: 75%;
  }
  .col-xl-pull-10 {
    right: 83.33333333%;
  }
  .col-xl-pull-11 {
    right: 91.66666666%;
  }
  .col-xl-pull-12 {
    right: 100%;
  }
}

/* 显示/隐藏 */
.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
}
/* Small，sm */
@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-block {
    display: block !important;
  }
}
/* Medium，md */
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
}
/* Large，lg */
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
}
/* Extra large，xl */
@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-block {
    display: block !important;
  }
}

/* 清除浮动 */
.clearfix::after,
.clearfix::before
.container::after,
.container::before,
.row::after,
.row::before {
  content: '';
  display: table;
}

.clearfix::after,
.container::after,
.row::after {
  clear: both;
}

附录2：flex 布局实现栅格系统

/* 移动优先 */

/* Extra small */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
/* Small，sm */
@media (min-width: 576px) {
  .container {
    width: 540px;
  }
}
/* Medium，md */
@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}
/* Large，lg */
@media (min-width: 992px) {
  .container {
    width: 960px;
  }
}
/* Extra large，xl */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col,.col-sm,.col-md,.col-lg,.col-xl,
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,col-12,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,col-sm-12,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,col-md-12,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,col-lg-12,
.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,col-xl-12 {
  padding-left: 15px;
  padding-right: 15px;
}

.col {
  flex-basis: 0;
  flex-grow: 1; 
}
.col-1 {
  flex: 0 0 8.33333333%;
}
.col-2 {
  flex: 0 0 16.66666666%;
}
.col-3 {
  flex: 0 0 25%;
}
.col-4 {
  flex: 0 0 33.33333333%;
}
.col-5 {
  flex: 0 0 41.66666666%;
}
.col-6 {
  flex: 0 0 50%;
}
.col-7 {
  flex: 0 0 58.33333333%;
}
.col-8 {
  flex: 0 0 66.66666666%;
}
.col-9 {
  flex: 0 0 75%;
}
.col-10 {
  flex: 0 0 83.33333333%;
}
.col-11 {
  flex: 0 0 91.66666666%;
}
.col-12 {
  flex: 0 0 100%;
}
.col-offset-0 {
  margin-left: 0;
}
.col-offset-1 {
  margin-left: 8.33333333%;
}
.col-offset-2 {
  margin-left: 16.66666666%;
}
.col-offset-3 {
  margin-left: 25%;
}
.col-offset-4 {
  margin-left: 33.33333333%;
}
.col-offset-5 {
  margin-left: 41.66666666%;
}
.col-offset-6 {
  margin-left: 50%;
}
.col-offset-7 {
  margin-left: 58.33333333%;
}
.col-offset-8 {
  margin-left: 66.66666666%;
}
.col-offset-9 {
  margin-left: 75%;
}
.col-offset-10 {
  margin-left: 83.33333333%;
}
.col-offset-11 {
  margin-left: 91.66666666%;
}
.col-offset-12 {
  margin-left: 100%;
}

.col-order-first {
    order: -1;
}
.col-order-0 {
  order: 0;
}
.col-order-1 {
  order: 1;
}
.col-order-2 {
  order: 2;
}
.col-order-3 {
  order: 3;
}
.col-order-4 {
  order: 4;
}
.col-order-5 {
  order: 5;
}
.col-order-6 {
  order: 6;
}
.col-order-7 {
  order: 7;
}
.col-order-8 {
  order: 8;
}
.col-order-9 {
  order: 9;
}
.col-order-10 {
  order: 10;
}
.col-order-11 {
  order: 11;
}
.col-order-12 {
  order: 12;
}
.col-order-last {
    order: 13;
}

/* sm */
@media (min-width: 576px) {

  .col-sm-1 {
    flex: 0 0 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 16.66666666%;
  }
  .col-sm-3 {
    flex: 0 0 25%;
  }
  .col-sm-4 {
    flex: 0 0 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 41.66666666%;
  }
  .col-sm-6 {
    flex: 0 0 50%;
  }
  .col-sm-7 {
    flex: 0 0 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 66.66666666%;
  }
  .col-sm-9 {
    flex: 0 0 75%;
  }
  .col-sm-10 {
    flex: 0 0 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 91.66666666%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
  }
  .col-sm-offset-0 {
    margin-left: 0;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666666%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666666%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666666%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666666%;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }

  .col-sm-order-first {
    order: -1;
  }
  .col-sm-order-0 {
    order: 0;
  }
  .col-sm-order-1 {
    order: 1;
  }
  .col-sm-order-2 {
    order: 2;
  }
  .col-sm-order-3 {
    order: 3;
  }
  .col-sm-order-4 {
    order: 4;
  }
  .col-sm-order-5 {
    order: 5;
  }
  .col-sm-order-6 {
    order: 6;
  }
  .col-sm-order-7 {
    order: 7;
  }
  .col-sm-order-8 {
    order: 8;
  }
  .col-sm-order-9 {
    order: 9;
  }
  .col-sm-order-10 {
    order: 10;
  }
  .col-sm-order-11 {
    order: 11;
  }
  .col-sm-order-12 {
    order: 12;
  }
  .col-sm-order-last {
    order: 13;
  }

}

/* md */
@media (min-width: 768px) {

  .col-md-1 {
    flex: 0 0 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 16.66666666%;
  }
  .col-md-3 {
    flex: 0 0 25%;
  }
  .col-md-4 {
    flex: 0 0 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 41.66666666%;
  }
  .col-md-6 {
    flex: 0 0 50%;
  }
  .col-md-7 {
    flex: 0 0 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 66.66666666%;
  }
  .col-md-9 {
    flex: 0 0 75%;
  }
  .col-md-10 {
    flex: 0 0 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 91.66666666%;
  }
  .col-md-12 {
    flex: 0 0 100%;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666666%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666666%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666666%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666666%;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }

  .col-md-order-first {
    order: -1;
  }
  .col-md-order-0 {
    order: 0;
  }
  .col-md-order-1 {
    order: 1;
  }
  .col-md-order-2 {
    order: 2;
  }
  .col-md-order-3 {
    order: 3;
  }
  .col-md-order-4 {
    order: 4;
  }
  .col-md-order-5 {
    order: 5;
  }
  .col-md-order-6 {
    order: 6;
  }
  .col-md-order-7 {
    order: 7;
  }
  .col-md-order-8 {
    order: 8;
  }
  .col-md-order-9 {
    order: 9;
  }
  .col-md-order-10 {
    order: 10;
  }
  .col-md-order-11 {
    order: 11;
  }
  .col-md-order-12 {
    order: 12;
  }
  .col-md-order-last {
    order: 13;
  }
}

/* lg */
@media (min-width: 992px) {

  .col-lg-1 {
    flex: 0 0 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 16.66666666%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 41.66666666%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 66.66666666%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 91.66666666%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
  }
  .col-lg-offset-0 {
    margin-left: 0;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666666%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666666%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666666%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666666%;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }

  .col-lg-order-first {
    order: -1;
  }
  .col-lg-order-0 {
    order: 0;
  }
  .col-lg-order-1 {
    order: 1;
  }
  .col-lg-order-2 {
    order: 2;
  }
  .col-lg-order-3 {
    order: 3;
  }
  .col-lg-order-4 {
    order: 4;
  }
  .col-lg-order-5 {
    order: 5;
  }
  .col-lg-order-6 {
    order: 6;
  }
  .col-lg-order-7 {
    order: 7;
  }
  .col-lg-order-8 {
    order: 8;
  }
  .col-lg-order-9 {
    order: 9;
  }
  .col-lg-order-10 {
    order: 10;
  }
  .col-lg-order-11 {
    order: 11;
  }
  .col-lg-order-12 {
    order: 12;
  }
  .col-lg-order-last {
    order: 13;
  }
}

/* xl */
@media (min-width: 1200px) {

  .col-xl-1 {
    flex: 0 0 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 16.66666666%;
  }
  .col-xl-3 {
    flex: 0 0 25%;
  }
  .col-xl-4 {
    flex: 0 0 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 41.66666666%;
  }
  .col-xl-6 {
    flex: 0 0 50%;
  }
  .col-xl-7 {
    flex: 0 0 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 66.66666666%;
  }
  .col-xl-9 {
    flex: 0 0 75%;
  }
  .col-xl-10 {
    flex: 0 0 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 91.66666666%;
  }
  .col-xl-12 {
    flex: 0 0 100%;
  }

  .col-xl-offset-0 {
    margin-left: 0;
  }
  .col-xl-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xl-offset-2 {
    margin-left: 16.66666666%;
  }
  .col-xl-offset-3 {
    margin-left: 25%;
  }
  .col-xl-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xl-offset-5 {
    margin-left: 41.66666666%;
  }
  .col-xl-offset-6 {
    margin-left: 50%;
  }
  .col-xl-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xl-offset-8 {
    margin-left: 66.66666666%;
  }
  .col-xl-offset-9 {
    margin-left: 75%;
  }
  .col-xl-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xl-offset-11 {
    margin-left: 91.66666666%;
  }
  .col-xl-offset-12 {
    margin-left: 100%;
  }

  .col-xl-order-first {
    order: -1;
  }
  .col-xl-order-0 {
    order: 0;
  }
  .col-xl-order-1 {
    order: 1;
  }
  .col-xl-order-2 {
    order: 2;
  }
  .col-xl-order-3 {
    order: 3;
  }
  .col-xl-order-4 {
    order: 4;
  }
  .col-xl-order-5 {
    order: 5;
  }
  .col-xl-order-6 {
    order: 6;
  }
  .col-xl-order-7 {
    order: 7;
  }
  .col-xl-order-8 {
    order: 8;
  }
  .col-xl-order-9 {
    order: 9;
  }
  .col-xl-order-10 {
    order: 10;
  }
  .col-xl-order-11 {
    order: 11;
  }
  .col-xl-order-12 {
    order: 12;
  }
  .col-xl-order-last {
    order: 13;
  }
}

/* 显示/隐藏 */
.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
}
/* Small，sm */
@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-block {
    display: block !important;
  }
}
/* Medium，md */
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
}
/* Large，lg */
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-block {
    display: block !important;
  }
}
/* Extra large，xl */
@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-block {
    display: block !important;
  }
}

附录3：垂直水平居中

（1）容器宽高自适应 没有指定宽高 内容撑开

内联元素（display: inline;）：
- 多行文字垂直水平居中

// 内联元素的形式：不能设置padding-top 和 padding-bottom
display: inline;
  • 容器垂直水平居中
// 相对父容器绝对定位
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

内联块元素（display: inline-block;）：
- 多行文字垂直水平居中

display: inline-block;
// 内联块元素形式相对于内联元素，可以设置 padding-top 和 padding-bottom
padding: 20px 20px;

块元素（display: block;）:
- 多行文字垂直水平居中

display: block;
text-align: center;

（2）指定容器宽高

内联元素（display: inline;）：内联元素不能设置宽高

内联块元素（display: inline-block;）：
- 单行文字的垂直水平居中

display: inline-block;
width: 200px;
height: 100px;
// 每一行都水平居中
text-align: center;
// 设置行高等于容器高度就可垂直居中
line-height: 100px;
  • 多行文字垂直水平居中
display: flex;
justify-content: center;
align-items: center;
  • 容器垂直水平居中
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// tansform: translate(-50%, -50%); 可替换为如下
margin-left: 负宽度一半;
margin-top: 负高度一半；

块元素（display: block;）:
- 多行文字垂直水平居中

display: block;
text-align: center;
上一篇： Vue 基础入门与进阶
下一篇： Cookie 与 LocalStorage

搜索

最新文章

热门文章

文章归档