什么是移动 Web 开发:
- 针对移动端的 Web 开发
- 移动端:手机、平板电脑
- PC端:台式机、笔记本电脑
- Web 开发就是 HTML、CSS、Javascript 代码在浏览器中运行
分辨率:
- 屏幕上的点,每一个点称为物理像素
- 分辨率 = 纵向的点数 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:每英寸的点
视口宽度设置:
// 一般这样写
<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);
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 项目
- 主轴默认是水平的;项目默认沿主轴排列
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,表示紧贴容器底部
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,表示紧贴容器底部
什么是媒体查询(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;
}
}
/*
断点
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) {}
font-size: 12px;
width: 5em; // 相当于宽为 5 x 12 = 60px
height: 6em; // 相当于高为 6 x 12 = 72px
html {
font-size: 12px;
}
.box {
width: 1rem; // 相当于宽为 1 x 12 = 12px
}
响应式布局的原理:
- 使用媒体查询设置断点
- 超小屏(Extra small):< 576px
- 小屏(Small,sm):>= 576px(540px)
- 中屏(Medium,md):>= 768px(720px)
- 大屏(Large,lg):>= 992px(960px)
- 超大屏(Extra large,xl):>= 1200px(1140px)
响应式布局的优缺点及适用性:
- 优点:一份代码兼容多种终端
- 缺点:需要兼容各种终端,工作量大,效率低下;代码累赘,在特定终端会出现无用代码;加载时间长
- 适用:结构比较简单的页面,一些展示性网站,例如企业网站等
- 不适用:结构复杂、交互多的页面,一些功能性的页面,例如淘宝等
什么是栅格系统:
- 响应式布局的一种实现方式
- 将页面栅格化
- 栅格的列一般有 12 列、16 列、24 列
实现栅格系统:
- 使用 float 实现栅格系统(代码见文章末尾附录“float 实现栅格系统”)
- 使用 flex 布局实现栅格系统(代码见文章末尾附录“flex 布局实现栅格系统”)
移动端屏幕适配是什么:
- 使页面在移动端各种大小屏幕上都能够正常显示的一种移动端开发方案
移动端屏幕适配与响应式布局的关系:
移动端适配 | 响应式布局 | |
---|---|---|
终端 | 仅移动端 | PC 端和移动端 |
常用单位 | 宽高:rem \/ %;字体:px | 宽:%;高、字体:px |
宽和高 | 宽和高都随着屏幕大小等比例变化 | 宽度变化,高度不变,非等比例 |
<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';
}
})();
<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)事件 |
onXXX(DOM0 级) | addEventListener(DOM2 级) | 说明 |
---|---|---|
ontouchstart | touchstart | 触摸开始时触发事件 |
ontouchmove | touchmove | 触摸移动时触发事件 |
ontouchend | touchend | 触摸结束时触发事件 |
ontouchcancel | touchcancel | 触摸中断时触发事件(一般是系统级事件,平常我们使用不到),例如触摸屏幕时来电话 |
touches、targetTouches和changedTouches的区别:
- 当屏幕上出现4个手指,其中2个在目标区域内,2个在目标区域外,在目标区域内、外分别有一个手指发生移动
touches | targetTouches | changedTouches | |
---|---|---|---|
区别 | touches 包含屏幕上所有触摸点的信息 | targetTouches 包含目标区域所有触摸点的信息 | changedTouches 包含所有发生改变的点的信息 |
- 一般单指时使用 e.changedTouches[0] 得到该触摸点的信息 | |||
- clientX 和 clientY 指的是在屏幕可视区域内的坐标 | |||
- pageX 和 pageY 指的是考虑滚动条时页面的坐标 |
// 第二个参数是参数列表,如果没有参数可以不写
var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
console.log(ev);
});
hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });
if (window.requestAnimationFrame) {
} else {
}
// 示例
var requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame;
// window.msRequestAnimationFrame ||
// function(fn) {
// setTimeout(fn, 16)
// }
// 示例
// 高版本支持
.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;
}
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);
}
}
.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;
}
display: flex;
justity-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
// tansform: translate(-50%, -50%); 可替换为如下
margin-left: 负宽度一半;
margin-top: 负高度一半;
position: absolute;
left: 50%;
top: 50%;
// transform: translate(-50%, -50%);
// tansform: translate(-50%, -50%); 可替换为如下
margin-left: 负宽度一半;
margin-top: 负高度一半;
不指定宽高,由内容撑开:
- 内联元素(display: inline;):自动垂直水平居中
// 内联元素的形式:不能设置padding-top 和 padding-bottom
display: inline;
display: inline-block;
// 内联块元素形式相对于内联元素,可以设置 padding-top 和 padding-bottom
padding: 20px 20px;
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;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
/* 移动优先 */
/* 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;
}
/* 移动优先 */
/* 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;
}
}
内联元素(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;
内联元素(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;