Bootstrap框架--1.6其他常用组件

模态框

用法

1.通过data属性：在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal",同时设置data-target="#identifier"来指定要切换的特定的模态框(带有id="identifier")。

2.通过JavaScript：使用这种技术，可以通过JavaScript来调用带有id="identifier"的模态框：

$('identifier').modal(options);
$('identifier').modal('show');//打开模态框
$('identifier').modal('hide');//关闭模态框

参考：Bootstrap 模态框 | 菜鸟教程

警告框（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()//显示提示框