Bootstrap5 弹出框

简介: Bootstrap5 弹出框是一种增强型提示工具,支持更多内容展示。通过在元素上添加 `data-bs-toggle="popover"` 并设置 `title` 和 `data-bs-content` 属性来创建。弹出框需通过 JavaScript 初始化,可自定义显示位置(top、bottom、left、right)。

Bootstrap5 弹出框
弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。

如何创建弹出框
通过向元素添加 data-bs-toggle="popover" 来来创建弹出框。

title 属性的内容为弹出框的标题,data-bs-content 属性显示了弹出框的文本内容:


注意: 弹出框要写在 JavaScript 的初始化代码里。

以下实例可以在文档的任何地方使用弹出框:

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

尝试一下 »
指定弹出框的位置
默认情况下弹出框显示在元素右侧。

可以使用 data-bs-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right:

实例
点我
点我
点我
点我

相关文章
|
前端开发 JavaScript 容器
Bootstrap 下拉菜单
Bootstrap 下拉菜单
58 0
Bootstrap5 下拉菜单7
按钮组中可以嵌入下拉菜单,实现更多功能选项。示例展示了水平和垂直按钮组中添加下拉菜单的方法,通过 `dropdown-toggle` 类和 `data-bs-toggle="dropdown"` 属性实现下拉效果。
|
1月前
|
前端开发
Bootstrap5 下拉菜单5
此示例展示了如何使用 Bootstrap 的 `dropstart` 类创建一个向左弹出的下拉菜单。通过在 `div` 元素上添加 `dropstart` 类,可以实现下拉菜单从按钮左侧弹出的效果。菜单包含三个链接项。
Bootstrap5 下拉菜单6
使用 `.dropdown-item-text` 类可以在下拉菜单中添加纯文本项,
Bootstrap5 下拉菜单4
要使上拉菜单向上弹出,可在 div 元素中添加 "dropup" 类。示例代码包括一个按钮和一个包含三个链接的下拉菜单列表。当点击按钮时,菜单将向上弹出。
Bootstrap5 下拉菜单3
下拉菜单默认向下弹出,但可以通过添加类 `.dropdown-menu-end` 实现向右下方弹出。示例代码展示了如何创建一个向右下方弹出的下拉菜单按钮,包含三个链接项。
|
1月前
|
前端开发
Bootstrap5 按钮2
Bootstrap 5 提供了多种按钮样式和大小设置。通过 `btn-outline-*` 类可为按钮添加不同颜色的边框,并在鼠标悬停时产生突出效果。使用 `.btn-lg` 和 `.btn-sm` 类可以分别设置大号和小号按钮。
|
1月前
|
前端开发
Bootstrap5 按钮1
Bootstrap 5 提供了多种样式的按钮,包括基本、主要、次要、成功、信息、警告、危险、黑色、浅色和链接按钮。这些按钮样式可以通过添加不同的类应用于 `<a>`、`<button>` 或 `<input>` 元素。
Bootstrap5 下拉菜单1
Bootstrap5 下拉菜单是可切换的上下文菜单,以列表形式显示链接。通过 `.dropdown` 类指定下拉菜单,按钮或链接需添加 `.dropdown-toggle` 和 `data-bs-toggle="dropdown"` 属性。实际下拉菜单使用 `.dropdown-menu` 类,选项添加 `.dropdown-item` 类。`.dropdown-divider` 类用于创建水平分割线。
|
1月前
|
移动开发
Bootstrap5 下拉菜单2
`.dropdown-header` 类用于在下拉菜单中添加标题,例如:`<li><h5 class="dropdown-header">标题 1</h5></li>`。`.active` 类可使选项高亮显示,`.disabled` 类可禁用选项。下拉菜单可通过添加 `.dropend` 或 `.dropstart` 类实现右对齐或左对齐。示例代码展示了如何使用这些类。