模态框
用法
1.通过data属性:在控制器元素(比如按钮或者链接)上设置属性data-toggle="modal",同时设置data-target="#identifier"来指定要切换的特定的模态框(带有id="identifier")。
2.通过JavaScript:使用这种技术,可以通过JavaScript来调用带有id="identifier"的模态框:
$('identifier').modal(options);
$('identifier').modal('show');//打开模态框
$('identifier').modal('hide');//关闭模态框
警告框(Alert)
以v5为例:警告框(Alert) · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网
通过不同的类名来控制警告框的颜色
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
弹窗(Modal)
1.先引入css样式文件和JS文件
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
2.打开文档
Modal · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网
复制代码到html文件中,弹窗默认是隐藏的
通过属性控制弹框的显示或隐藏
添加如下代码,点击按钮后即可显示弹窗
<button data-bs-toggle="modal" data-bs-target="弹窗的class名">显示弹窗</button>
data-bs-dismiss="modal"控制弹框隐藏
通过JS控制弹框的显示或隐藏
//弹窗dom元素 = document.querySelector('类名')
const modal=new bootstrap.Modal(弹窗dom元素)
modal.show()//显示弹窗
modal.hide()//隐藏弹窗
提示框 (Toasts)
Toasts · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网
<div class="toast" data-bs-delay="1500">
提示框内容
</div>
提示框默认是隐藏的,data-bs-delay设置持续显示时间
通过JS控制提示框的显示或隐藏
//提示框dom元素 = document.querySelector('类名')
const toast=new bootstrap.Toast(提示框dom元素)
toast.show()//显示提示框