Bootstrap4

• http://bs4.ntp.org.cn/
• https://www.runoob.com/bootstrap4/bootstrap4-flex.html

• Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。
• 需要 jQuery, Popper.js, 以及 Bootstrap 自带的JS来实现功能
• popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含。

移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

• width=device-width 宽度设置为设备屏幕宽度
• initial-scale=1 初始缩放比例设置为1
• shrink-to-fit=no 自动适应手机屏幕宽度

容器

• .container 用于固定宽度并支持响应式布局的容器
• .container-fluid 用于100%宽度占据全部viewport的容器

网格布局

• 响应式、移动设备优先的流式网格系统
• 随着屏幕或viewport尺寸的增加系统会自动分为最多 12 列
• 列会根据屏幕大小自动重新排列
• 使用弹性盒子 Flexbox 而不是浮动
• Flexbox 的一大优势是没有指定宽度的网格列将自动设置为等宽与等高列

类名	设备屏幕	屏幕宽度
col	所有	自动处理布局
col-sm	平板	>= 576px
col-md	桌面	>= 768px
col-lg	大桌面	>= 992px
col-xl	超大桌面	>= 1200px

偏移列

偏移列通过 offset-*-* 类来设置，会把一个列的左外边距margin增加*列，其中*范围是从 1 到 11。

• 第1个星号*表示屏幕设备类型是 sm、md、lg、xl
• 第2个星号*表示列数是 1 到 11 的数字

弹性布局

• IE9 及其以下版本不支持弹性盒子

弹性容器

• . d-flex 创建弹性盒子容器
• .d-inline-flex 创建行内弹性盒子容器

元素方向

• .flex-row 水平方向显示弹性子元素 默认
• .flex-row-reverse 水平方向右对齐显示弹性子元素
• .flex-column 设置弹性子元素垂直方向显示
• .flex-column-reverse 翻转子元素

排版

默认

• 默认font-size 为 16px, line-height 为 1.5
• 默认font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif
• 所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)

标题

标签	REM	PX
h1	2.5rem	40px
h2	2rem	32px
h3	1.75rem	28px
h4	1.5rem	24px
h5	1.25rem	20px
h6	1rem	16px

标题类

• .display-1
• .display-2
• .display-3
• .display-4

字体类

• .font-weight-normal 普通
• .font-weight-light 更细
• .font-weight-bold 加粗

文本类

• .text-left 左对齐
• .text-center 居中
• .text-right 右对齐
• .text-justify 段落中超出屏幕部分文字自动换行
• .text-nowrap 段落中超出屏幕部分不换行
• .text-lowercase 文本小写
• .text-uppercase 文本大写
• .text-capitalize 单词首字母大写

颜色

• 文本颜色text-*
• 背景颜色bg-*
• 单元格颜色 table-*
• 提示背景 alert-*
• 按钮颜色 btn-*

指定意义的颜色

• muted 柔和
• primary 蓝色 主要 重要
• secondary 灰色 次要 副标题 不太重要
• success 绿色 成功 允许执行
• info 浅蓝色 提示 内容已变更
• warning 橘色 警告 注意
• danger 红色 危险
• dark 深灰
• light 浅灰
• white 白色

图像

• .rounded 圆角
• .rounded-circle 椭圆
• .img-thumbnail 缩略图 有边框

图片对齐

• .float-left 图左对齐
• .float-right 图片右对齐

响应式图片

• .img-fluid 根据屏幕的大小图像自动适应
• .img-fluid 设置了 max-width: 100%; 、 height: auto;