- 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;