转自https://onlyhy.github.io/bootstrap/2018/05/16/Bootstrap4.html
浏览器与设备调优
不支持IE9
移动设备的模态框和下拉组件
Overflow溢出和scroll滚动
iOS和安卓中，对于<body>元素中使用overflow: hidden;的支持很有限。因此在这两种设备中，当你滚动超过一个模态窗口的顶部或底部，<body>内容也会开始滚动
iOS文本字段和滚动
从IOS9.2开始，当一个模态启用，如果手势触模在一个<input>文本或<textarea>文本框内，则<body>中的内容将被滚动，而不是模态本身滚动
布局
栅格
-
不同于旧版
3.0，新版是完全基于flexbox流式布局构建的，完全支持响应式标准。 -
flexbox布局不需要指定列的宽度就能实现网页自动等宽排列。 -
指定一列进行宽度定义，其他列将自动调整大小。
-
使用
.col-{breakpoint}-auto断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。 -
等宽多行：创建跨多个行的等宽列，方法是插入
.w-100的div -
flexbox可轻松实现div空间布局的垂直(align)与水平(justify)对齐 -
使用
.order-*选择符，可对div进行排序 -
使用
.offset-*，.offset-md-*栅格偏移 -
使用
.ml-auto与.mr-auto来强制隔离两边的距离 -
使用
.no-gutters类来消除间隙沟槽 -
使用BootStrap v4内置的栅格系统之Sass变量和 maps文件，可以完全自定义自己的栅格环境、并可以更改DIV层次、媒体查询维度和container容器宽度，然后重新编译。
媒体对象
-
只需要两个Class选择器，分别引用
.media和.media-body来装载的内容 -
媒体对象可以无限嵌套，建议尽量减少嵌套
-
媒体对象中的媒体可以与flexbox流式布局一样，实现对齐到顶部、中间、底部
-
设置
order属性可以更改媒体对象中内容顺序 -
可以在ul，li中添加媒体对象
内容
Reboot
-
删除了默认的Web字体
（Helvetica Neue，Helvetica和Arial），并替换为“本地OS字体引用机制” -
所有标题和段落元素（列如
<h1>以及<p>）都被重置，系统移除它们的上外边距margin-top定义，标题添加外边距为margin-bottom: .5rem，段落元素<p>添加了外边距margin-bottom:1rem以形成简洁行距 -
移除所有的列表元素
（<ul>、<ol>、 <dl>）的外边距margin-top，并设置为margin-bottom: 1rem，被嵌套的子列表无margin-bottom值
排版
-
.display-*显式大标题 -
.lead定义一个中心段落，用于提示这是中心内容或重要内容 -
引用文档中另一个来源的内容块，请在一段HTML外面包裹
<blockquote class="blockquote">，作为引用， 推荐使用p作为子级包裹容器。`` -
.list-inline、.list-inline-item实现列表逐行显示（默认）、单行多列并排（从左到右）
代码
-
用
<code>包裹内联代码片段，转义HTML尖括号 -
使用
<pre>标签可以包裹代码块，转义HTML尖括号，.pre-scrollable可以实现垂直滚动的效果 -
<var>标签包裹表示变量 -
<kbd>表明是键盘输入操作 -
<samp>表示一个示例
图片
-
.img-fluid响应式图片 -
.img-thumbnail图片自动被加上一个带圆角且1px边界的外框缩略图样式 -
<picture>元素，它可以为<img>指定多个<source>定义，确保在<img>标签里使用.img-*进行定义绑定而不是<picture>标签。
表格
-
<table>添加.table是基本样式 -
.table-dark颜色反转对比效果，深色背景和浅色文本 -
.thead-light或.thead-dark，使<thead>区显示出浅黑或深灰 -
.table-striped定义<tbody>，条纹状表格（还可结合.table-dark等） -
.table-bordered类可以产生表格边框与间隙 -
.table-hover定义到<tbody>上，可以产生行悬停效果 -
.table-sm可以将表格的padding值缩减一半，使表格更加紧凑 -
.table-*样式对表格逐行或单个单元格着色，深色表格可用.bg-* -
<caption>标签如同一个表格的标题，默认是隐藏，帮助用户了解表格内容 -
.table-responsive选择器使表格支持水平响应 -
.table-responsive{-sm|-md|-lg|-xl}可以根据需要对不同屏幕尺寸断点表格进行响应式设计
图文框
-
.figure样式定义内容区包括一张图和一个可选的标题 -
将
.img-fluid添加到标签中才能实现与响应式的完美结合 -
.text-*可控制文字对齐方式
组件
- 警告提示框
- 徽章
- 面包屑
- 按钮
- 按钮组
- 卡片
- 轮播效果
- 折叠面板
- 下拉菜单
- 表单
- 输入框
- 大块屏
- 列表组
- 模态框
- 导航
- 导航栏
- 分页
- POP提示
- 进度条
- 滚动监听
- 提示冒泡
警告提示框Alerts
-
系统提供8个可用的正确的样式（如，
.alert-success） -
.alert-link可为带颜色的警告文本框中的链接加上合适的颜色 -
警报还可以包含其他HTML元素，如标、段落和分隔符
-
关闭警告： * 确保正确加载了
.alert警报组件或 编译后的 Bootstrap JavaScript代码组 * 自行编译JS组件要引入util.js *<button>元素添加.close关闭按钮效果，在容器中引用.alert-dismissible* 增加data-dismiss="alert"触发 JavaScript 动作，要使用<button>元素 * 添加.fade和.show样式（关闭警报时生成警报提示）
徽章Badge
-
.badge可以嵌在标题， 通过标题样式来适配其元素大小 -
可用作链接或按钮的一部分，提供统计数字样式
-
添加如
.badge-primary等可定义样式 -
.badge-pill更加圆润 -
可用在
[元素上， 实现悬停、焦点、状态]()
面包屑breadcrumb
-
.breadcrumb,.breadcrumb-item -
建议添加一个有意义的标签即
aria-label="breadcrumb"來描述<nav>元素，以及使用aria-current="page“到这组导航的最后一个项目，以标明当前页面名称（路径）
按钮Button
-
.btn-primary多个预定义按钮样式 -
.btn-outline-*设置边框颜色，没有大背景颜色 -
.btn-lg、.btn-sm设置大小，.btn-block块级按钮 -
.active，aria-pressed="true"属性使按钮固定为启用状态 -
disabled属性使按钮处于非活动的禁用状态，<a>标签不支持disabled属性，需要增加.disabled类
按钮组Button-group
-
一系列的
.btn包裹在.btn-group内 -
.btn-group-lg,.btn-group-sm控制大小尺寸 -
可嵌套实现按钮组与下拉菜单的组合
-
.btn-group-vertical垂直排列
卡片card
-
卡片代替了版本3中旧的 panel、 well和 thumbnail样式
-
.card-body是卡片的内容主体，.card-title和<h*>组合，可以添加卡片标题，.card-subtitle和<h*>结合，可以添加副标题，.card-link与<a>结合，添加平行的链接，.card-img-top定义一张图片在卡片的顶部，.card-text定义文字在卡片中 -
.card-header,.card-footer页眉页脚 -
使用文本对齐类来更改或特定部份的文本对齐
-
.card-img-overlay将图像转为卡片背景 -
.bg-primary等样式设置背景色 -
.border-primary等样式设置边框色 -
.bg-transparent删除其background-color背景颜色 -
.card-group多个卡片结为群组 -
当使用带页脚的卡片图时，他们的内容会自动水平对齐和栅格式布局。
-
使用卡片阵列
Card decks（.card-deck）：一套相互不相连，但宽度和高度相同的卡片，页脚也会自动排列 -
.card-columns：多列卡片浮动排版，不再基于 flexbox 而是使用 column 属性
轮播效果Carousel
-
.carousel引入轮播组件，并设置唯一ID -
data-ride="carousel"从页面加载开始动画 -
在
.carousel-inner中放入.carousel-item -
.carousel-control-prev,.carousel-control-next左右控制器 -
.carousel-indicators状态指示器 -
.carousel-caption添加字幕，.d-none使得在小屏幕隐藏文字,.d-md-block在中型屏幕则显示
折叠面板Collapse
-
使用带
href属性的链接,、或者带data-target属性的按钮来创建折叠效果，data-toggle="collapse"属性是必须的 -
可控制显示和隐藏多个元素
-
结合
card扩展折叠组件为手风琴效果 -
自定义手风琴样式，只需添加
data-children属性,指定一组元素来切换 -
如果折叠块元素默认是闭合的，它必须拥有一个
aria-expanded="false"值。如果用.show类设置则可以定义折叠控件为默认打开，在控制器上设置aria-expanded="true"即可
下拉菜单Dropdowns
-
使用时确保 popper.min.js 文件放在 Bootstrap JS之前
-
将下拉列表的切换（按钮或链接）和下拉菜单都包含在
.dropdown中，按钮或链接使用data-toggle="dropdown" -
.dropdown-divider在子菜单中添加分隔线 -
.dropdown-toggle-split分列式按钮下拉菜单 -
.dropup向上展开，.dropright向右展开.dropleft向左展开 -
Bootstrap v3中子菜单项必须是链接，而 Bootstrap v4中可选择
<button>，而不是仅仅<a>标签 -
默认情况下，一个下拉菜单自动从顶部和左侧的父级100％定位。添加
.dropdown-menu-right到.dropdown-menu右侧轻松对齐下拉菜单。 -
.dropdown-header在子菜单中添加标题 -
可将表单放在下拉菜单中
-
.active添加到子菜单中的项目以将其设置为活动状态，.disabled是禁用状态
表单Forms
-
文本控件（如
<input>、<select>、 <textarea>）统一采用.form-control样式进行处理优化 -
input文件选择控件，Bootstrap v4采用
.form-control-file取代了.form-control -
使用
.form-control-lg和.form-control-sm属性定控件大小高度 -
在input控件上增加
readonly（布尔值）标签定义，以防止修改input中的值 -
显示为纯文本（没有控件框），引用
.form-control-plaintext -
.form-check格式化复选框和单选框按钮，默认垂直堆叠 -
.form-check-inline使加到任何.form-check中的选取框平行排列 -
.form-group群组可以向为表单赋予一些结构样式，也可在其它元素中使用 -
可使用栅格系统， 可用
.form-row来取代.row，有更小的沟槽缝隙 -
添加
.col-form-label到<label>上，以便他们垂直居中与他们相关的表单控件 -
.col-form-label-sm、.col-form-label-lg控制label大小，.form-control-lg、.form-control-sm控制控件大小 -
.form-text表单下方帮助提示文本 -
novalidate添加到<form>，这将禁用浏览器默认的反馈工具提示
输入框input-group
-
.input-group-prepend,.input-group-append可在组件前后放组件或按钮（不仅仅是文本）， 不支持单个输入组合中有多个表单控制项，<label>必须在输入框组之外 -
如
.input-group-lg、.input-group-sm加到.input-group中，其内容会自动调整大小， 不需要在每个元素上重复使用样式控制其大小。 -
尽管可视化支持多个
<input>但验证样式仅适用于具有单个<input>的输入组 -
支持多种控件结合，比如 复选框和、文本、input框混合使用
大块屏Jumbotron
.jumbotron,.jumbotron -fluid扩展视口，展示关键信息
列表组list-group
-
.list-group,.list-group-item -
.active有效选择状态.disabled禁用状态（有些还需配合JS） -
使用
<a>或<button>来创建具有 hover、禁用、悬停和活动状态的列表组使用.list-group-item-action，不要用.btn样式! -
.list-group-flush， 移除部分边框以及圆角， 产生边缘贴齐的列表组，在如Card卡片等容器中很实用 -
.list-group-item-primary等样式设置背景色 -
可引入
badge徽章 -
列表组中几乎可以添加任意的HTML内容，包括标签、内容、链接
-
使用数据属性，可以指定
data-toggle="list"或在元素上编写任意的JavaScript事件来激活列表组导航
模态框Modal
-
控制元素上
data-toggle="modal"，data-target="#foo"或href="#foo"指定动态视窗 -
将
.modal-dialog-centered添加到.modal-dialog对话框以垂直居中模式 -
在
.modal-body中可加入.container-fluid栅格系统 -
触发的模态框相同，但内容不同， 使用
event.relatedTarget和HTML data-*属性， 依据所点按钮的定义来动态加载弹出窗口中的内容 -
$('#myModal').data('bs.modal').handleUpdate()或$('#myModal').modal('handleUpdate')可调整模态框的位置，以防滚动条出现
导航nav
-
.nav默认情况下，导航按左对齐，可.justify-content-center居中，.justify-content-end右对齐 -
.flex-column垂直排列导航 -
.nav-tabs选项卡标签 -
.nav-pills胶囊标签 -
.nav-fill会将.nav-item按照比例分配空间 -
当使用
<nav>基于导航时，请确保包含.nav-item在a链接上 -
.nav-justified等宽 -
role="tablist"、role="tab"、 role="tabpanel"、 aria-*动态选项卡
导航栏navbar
Navbar下的Toggler是切换触发器（即手机模式下的MENU下拉项），它们默认是左对齐的， 如果在它们中间定义一个同级的兄弟元素.navbar-brand，它们会自动对齐到窗口右边
分页Pagination
-
网页可能有不止一个这样的导航部分（存在多个导航组件），建议为
<nav>提供一个aria-label的描述，以反映其功能 -
使用
aria属性和.sr-only使用图标 -
.disabled禁用，再加上tabindex="-1"并自定义JS更保险 -
.pagination-lg或.pagination-sm样式定义可以获得大规格或小规格尺寸的分页组件 -
.justify-content-center，.justify-content-end可更改对齐方式
POP提示popover
-
data-toggle="popover" -
data-placement控制四个方向
进度条progress
-
.progress-bar中放置文字內容,可将标签添加到进度条中 -
改变
.progress的height值，.progress-bar高度会自动调整大小 -
.bg-success等可定义外观 -
可在进度组件中包含（嵌套）多个进度条
-
.progress-bar-striped添加到.progress-bar上，条纹效果 -
.progress-bar-animated加到.progress-bar上，即实现CSS3绘制的从右到左的动画效果
滚动监听Scrollspy
-
添加
data-spy="scroll"到要窥探的元素（通常是<body>）。然后添加data-target属性到任何Bootstrap.nav组件的父元素ID或类的Class属性 -
Scrollspy滚动监控也适用于嵌套的
.nav。如果是一个嵌套.nav是的.active状态，其父母也将是.active状态 -
Scrollspy 滚动监听也适用于
.list-group列表组
提示冒泡Tooltip
-
data-toggle="tooltip",data-placement=""设置4个方向 -
如果使用数据属性，将选项名称附加到data- ,如
data-animation=""