转自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的divflexbox可轻松实现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作为子级包裹容器。`<footer class="blockquote-footer">用于标识来源，.text-center、.text-right等做对齐处理.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引入轮播组件，并设置唯一IDdata-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=""