Bootstrap4 模态框
模态框(
Modal
)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗
体可提供信息交互等。
可以通过添加
.modal-sm
类来创建一个小模态框,
.modal-lg
类可以创建一个大模态框。
尺寸类放在
<div>
元素的
.modal-dialog
类后
![](https://i-blog.csdnimg.cn/blog_migrate/c210feb3652e2716a6ccfcdd4dca6c03.png)
Bootstrap4 提示框
提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。
通过向元素添加
data-toggle="tooltip"
来来创建提示框。
title
属性的内容为提示框显示的内容
注意
:
提示框要写在
jQuery
的初始化代码里
:
然后在指定的元素上调用
tooltip()
方法
![](https://i-blog.csdnimg.cn/blog_migrate/d6a2398f7f290a4f3a87027d1c1adefb.png)
使用
data-placement
属性来设定提示框显示的方向
: top, bottom, left
或
right
![](https://i-blog.csdnimg.cn/blog_migrate/2818c124a687a05f59fe56e05f9bdae9.png)
Bootstrap4 弹出框
弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。
通过向元素添加
data-toggle="popover"
来来创建弹出框。
title
属性的内容为弹出框的标题,
data-content
属性显示了弹出框的文本内容
注意
:
弹出框要写在
jQuery
的初始化代码里
:
然后在指定的元素上调用
popover()
方法
![](https://i-blog.csdnimg.cn/blog_migrate/9bb71ef90a030d50c1d49fffb158efd9.png)
使用
data-placement
属性来设定提示框显示的方向
: top, bottom, left
或
right
![](https://i-blog.csdnimg.cn/blog_migrate/282723335a5fee49957e5dcbdf510f1f.png)
使用
data-trigger="focus"