bootstrap5-学习笔记2-模态框+弹窗+tooltip+popover+信息提示框

参考：
Bootstrap5 教程 | 菜鸟教程
https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html

Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网
https://v5.bootcss.com/docs/getting-started/introduction/

之前用bootstrap2和3比较多，最近用到了5，发现好多地方不一样了，所以学习一下。主要写没用过的特性，随缘更新。

模态框

最明显的一个区别是跟模态框关联的<a>之类的元素，上面写data-toggle和data-targert变了：

<a class="text-warning" data-bs-toggle="modal" data-bs-target="#模态框名称">

标准模式

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">打开模态框
</button><!-- 模态框 -->
<div class="modal fade" id="myModal"><div class="modal-dialog"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><h4 class="modal-title">模态框标题</h4><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><!-- 模态框内容 --><div class="modal-body">模态框内容..</div><!-- 模态框底部 --><div class="modal-footer"><button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button></div></div></div>
</div>

变体

可以通过.fade设置模态框弹出效果，就是模态框本身的<div>。如果要有动画，写成class="modal fade"

<!-- 不使用动画效果 -->
<div class="modal"></div>

尺寸：在 moal-dialog 上使用 .modal-sm|.modal-lg|.modal-xl|.modal-fullscreen

居中显示：在 moal-dialog 上使用 .modal-dialog-centered

滚动条：如果内容太长，页面会自动生成滚动，如果需要模态框带一个滚动条，在 moal-dialog 上使用.modal-dialog-scrollable

消息弹窗toasts

  <div class="toast show"><div class="toast-header"><strong class="me-auto">弹窗标题</strong><button type="button" class="btn-close" data-bs-dismiss="toast"></button></div><div class="toast-body"><p>这是一个Bootstrap 5弹窗示例。</p></div></div>

效果：
在这里插入图片描述
如果要所有toast都显示，这样初始化：

document.getElementById("toastbtn").onclick = function() {var toastElList = [].slice.call(document.querySelectorAll('.toast'))var toastList = toastElList.map(function(toastEl) {return new bootstrap.Toast(toastEl)})toastList.forEach(toast => toast.show())
}

如果希望点击一个按钮，在页面右下角显示一个弹窗：

    <div class="container mt-5"><button class="btn btn-primary" onclick="showToast()">显示弹窗</button></div><div class="position-fixed bottom-0 end-0 p-3"><div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto">弹窗标题</strong><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">这是一个Bootstrap 5弹窗示例。</div></div></div><script>function showToast() {var toast = new bootstrap.Toast(document.getElementById('toast'));toast.show();}</script>

tooltip

在js要初始化哪个元素调用tooltip()
如果要任何地方都可以用tooltip，则需要写：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl)
})

向元素添加data-bs-toggle="tooltip"，title里写内容，data-bs-placement属性指定位置，写top/bottom/left/right

popover

弹出框是鼠标点击后呈现的。可以分为title和content，比tooltip展示的内容更多

需要在任何地方使用popover也需要写：

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {return new bootstrap.Popover(popoverTriggerEl)
})

其他使用方法与tooltip一致。

另外，一般是再次点击可以关闭弹出框，如果希望点击页面其他地方即可关闭，这样写：(加data-bs-trigger="focus")

<a href="#" title="取消弹出框" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="点击文档的其他地方关闭我">点我</a>

如果连点击都不想要，只要鼠标hover就显示，出去就消失，那么这样写：data-bs-trigger="hover"

信息提示框

标准：

<div class="alert alert-success"><strong>成功!</strong> 指定操作成功提示信息。
</div>

显示结果：
在这里插入图片描述

可以修改颜色：用.alert-info|warning|danger|primary|secondary|dark|light 等
需要关闭：

<div class="alert alert-success alert-dismissible"><button type="button" class="btn-close" data-bs-dismiss="alert"></button><strong>成功!</strong> 指定操作成功提示信息。</div>