Bootstrap4 模态框
模态框（ Modal ）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗 体可提供信息交互等。 可以通过添加 .modal-sm 类来创建一个小模态框， .modal-lg 类可以创建一个大模态框。 尺寸类放在 <div> 元素的 .modal-dialog 类后
Bootstrap4 提示框
提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。 通过向元素添加 data-toggle="tooltip" 来来创建提示框。 title 属性的内容为提示框显示的内容 注意 : 提示框要写在 jQuery 的初始化代码里 : 然后在指定的元素上调用 tooltip() 方法
使用 data-placement 属性来设定提示框显示的方向 : top, bottom, left 或 right
Bootstrap4 弹出框
弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。 通过向元素添加 data-toggle="popover" 来来创建弹出框。 title 属性的内容为弹出框的标题， data-content 属性显示了弹出框的文本内容 注意 : 弹出框要写在 jQuery 的初始化代码里 : 然后在指定的元素上调用 popover() 方法
使用 data-placement 属性来设定提示框显示的方向 : top, bottom, left 或 right
使用 data-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框 如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 "hover"
Bootstrap4 滚动监听(Scrollspy)
滚动监听（ Scrollspy ）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。 想要监听的元素（通常是 body ）添加 data-spy="scroll" 然后添加 data-target 属性，它的值为导航栏的 id 或 class ( .navbar ) 。这样就可以联系上可滚动区域 注意可滚动项元素上的 id （ <div id="section1"> ） 必须匹配导航栏上的链接选项 （ <a href="#section1" target="_blank" rel="external nofollow" >) 。 可选项 data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px 。 设置相对定位 : 使用 data-spy="scroll" 的元素需要将其 CSS position 属性设置为 "relative" 才能起作用。
Bootstrap4 小工具
Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果
边框 1.添加或移除边框
2.边框颜色
3.边框圆角设置
浮动 1.float-right 类用于设置元素右浮动 2.float-left 设置元素左浮动 3.clearfix 类用于清除浮动
响应式浮动 可以设置浮动 ( .float-*-left|right - * 为 sm, md, lg 或 xl) 的方向依赖于屏幕的大小
居中对齐 使用 .mx-auto 类来设置居中对齐
宽度 元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度
高度 元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度
Bootstrap4 Flex（弹性）布局
Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局 以下实例使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素
创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类
水平方向 1.flex-row 可以设置弹性子元素水平显示，这是默认的。 2.使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反
垂直方向 1.flex-column 类用于设置弹性子元素垂直方向显示 , 2.flex-column-reverse 用于翻转子元素
内容排列 .justify-content-* 类用于修改弹性子元素的排列方式， * 号允许的值有： start ( 默认 ), end, center, between 或 around
等宽 .flex-fill 类强制设置各个弹性子元素的宽度是一样的
扩展 .flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取 剩余空间
排序 .order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12 ，数字越低权重越高 ( .order-1 排在 .order-2 之前 )
外边距 1.mr-auto 类可以设置子元素右外边距为 auto ，即 margin-right: auto!important; ， 2.ml-auto 类可以设置子元素左外边距为 auto ，即 margin-left: auto!important;:
包裹 弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap ( 默认 ), .flex-wrap 或 .flex-wrap-reverse 。设置 flex 容器是单行或 者多行
内容对齐 .align-content-* 控制在垂直方向上如何去堆叠子元素，包含的值有： .align-content-start ( 默认 ), .align-content end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch 。 这些类在只有一行的弹性子元素中是无效的。
子元素对齐 要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有： .align-items-start, .align-items-end, .align items-center, .align-items-baseline, 和 .align-items-stretch ( 默认 )
指定子元素对齐 设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有： .align-self-start, .align-self-end, .align-self center, .align-self-baseline, 和 .align-self-stretch ( 默认 )
Bootstrap4 多媒体对象
Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等 基础多媒体对象 要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media body 类，然后添加外边距，内边距等效果 想将头像图片显示在右侧，可以在 .media-body 容器后添加图片
多媒体对象嵌套 多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象） 要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中
可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置