Bootstrap 5学习教程，从入门到精通，Bootstrap 5 弹出框(Popovers) 语法知识点及案例（22）

Bootstrap 5 弹出框(Popovers) 语法知识点及案例

一、弹出框基本概念

弹出框(Popovers)是Bootstrap提供的一个小型覆盖层组件，用于显示额外的信息，当用户点击某个元素时出现，再次点击时消失。

二、弹出框基本语法知识点

1. 必需属性

  • data-bs-toggle="popover" - 标识元素为弹出框触发器
  • title - 弹出框的标题(可选)
  • data-bs-content - 弹出框的内容

2. 配置选项

可以通过data属性或JavaScript配置：

选项类型默认值描述
animationbooleantrue应用CSS淡入淡出过渡
containerstring, element, falsefalse将弹出框附加到特定元素
contentstring, element, function‘’弹出框内容
delaynumber, object0显示/隐藏的延迟(ms) {show: 500, hide: 100}
htmlbooleanfalse是否在弹出框中解析HTML
placementstring, function‘right’弹出框位置: auto, top, bottom, left, right
selectorstring, falsefalse如果提供选择器，弹出框对象将委托给指定的目标
templatestring基础HTML模板创建弹出框时使用的基本HTML
triggerstring‘click’触发方式: click, hover, focus, manual
fallbackPlacementsarray[‘top’, ‘right’, ‘bottom’, ‘left’]提供回退位置列表
boundarystring, element‘clippingParents’弹出框的溢出约束边界
customClassstring, function‘’向弹出框添加类
sanitizebooleantrue启用或禁用清理
allowListobject默认值包含允许的属性和标签的对象
sanitizeFnnull, functionnull允许您指定自己的清理函数
offsetarray, string, function[0, 8]弹出框相对于目标的偏移量

3. 方法

通过JavaScript控制弹出框：

方法描述
show()显示弹出框
hide()隐藏弹出框
toggle()切换弹出框
dispose()隐藏并销毁弹出框
enable()启用弹出框显示
disable()禁用弹出框显示
toggleEnabled()切换启用或禁用状态
update()更新弹出框位置
getInstance()静态方法，允许获取与DOM元素关联的弹出框实例
getOrCreateInstance()静态方法，获取与DOM元素关联的弹出框实例或创建新实例

4. 事件

弹出框提供了一系列事件：

事件描述
show.bs.popover当show方法被调用时立即触发
shown.bs.popover当弹出框对用户可见时触发(等待CSS过渡完成)
hide.bs.popover当hide方法被调用时立即触发
hidden.bs.popover当弹出框对用户隐藏时触发(等待CSS过渡完成)
inserted.bs.popover当弹出框模板已添加到DOM时触发

三、完整案例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap 5 弹出框示例</title><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container py-5"><h1 class="text-center mb-5">Bootstrap 5 弹出框示例</h1><!-- 基本示例 --><div class="row mb-5"><div class="col-md-6"><h3>基本弹出框</h3><button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="弹出框标题" data-bs-content="这是一个基本的弹出框内容">点击显示弹出框</button></div><div class="col-md-6"><h3>不同位置</h3><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="顶部弹出框">顶部</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="右侧弹出框">右侧</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="底部弹出框">底部</button><button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="左侧弹出框">左侧</button></div></div><!-- 触发方式示例 --><div class="row mb-5"><div class="col-12"><h3>不同触发方式</h3><button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-trigger="focus" title="Focus触发" data-bs-content="通过focus事件触发弹出框">Focus触发</button><button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-trigger="hover" title="Hover触发" data-bs-content="通过hover事件触发弹出框">Hover触发</button><button type="button" class="btn btn-warning" id="manualTrigger" title="手动触发" data-bs-content="通过JavaScript手动触发弹出框">手动触发</button></div></div><!-- HTML内容示例 --><div class="row mb-5"><div class="col-12"><h3>HTML内容</h3><button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-html="true" title="<em>HTML内容</em>" data-bs-content="<b>加粗文本</b>和<a href='#'>链接</a>">包含HTML的弹出框</button></div></div><!-- 延迟示例 --><div class="row mb-5"><div class="col-12"><h3>延迟显示/隐藏</h3><button type="button" class="btn btn-dark" data-bs-toggle="popover" data-bs-delay='{"show":500,"hide":100}' title="延迟示例" data-bs-content="显示延迟500ms，隐藏延迟100ms">延迟效果</button></div></div><!-- 自定义模板 --><div class="row"><div class="col-12"><h3>自定义模板</h3><button type="button" class="btn btn-outline-primary" id="customPopover" title="自定义标题" data-bs-content="自定义内容">自定义模板弹出框</button></div></div></div><!-- Bootstrap 5 JS 包（包含Popper） --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script><script>// 文档加载完成后初始化所有弹出框document.addEventListener('DOMContentLoaded', function() {// 初始化页面中所有带有data-bs-toggle="popover"的元素const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {return new bootstrap.Popover(popoverTriggerEl);});// 手动触发示例const manualTriggerBtn = document.getElementById('manualTrigger');const manualPopover = new bootstrap.Popover(manualTriggerBtn);manualTriggerBtn.addEventListener('click', function() {manualPopover.toggle();});// 自定义模板示例const customPopoverBtn = document.getElementById('customPopover');const customPopover = new bootstrap.Popover(customPopoverBtn, {template: '<div class="popover" role="tooltip">' +'<div class="popover-arrow"></div>' +'<h3 class="popover-header bg-primary text-white"></h3>' +'<div class="popover-body bg-light"></div>' +'</div>'});// 事件监听示例customPopoverBtn.addEventListener('show.bs.popover', function () {console.log('弹出框即将显示');});customPopoverBtn.addEventListener('shown.bs.popover', function () {console.log('弹出框已完全显示');});customPopoverBtn.addEventListener('hide.bs.popover', function () {console.log('弹出框即将隐藏');});customPopoverBtn.addEventListener('hidden.bs.popover', function () {console.log('弹出框已完全隐藏');});// 动态内容示例const dynamicContentBtn = document.createElement('button');dynamicContentBtn.className = 'btn btn-outline-secondary ms-2';dynamicContentBtn.textContent = '动态内容';document.querySelector('.row:last-child .col-12').appendChild(dynamicContentBtn);const dynamicPopover = new bootstrap.Popover(dynamicContentBtn, {title: '动态内容',content: '初始内容'});dynamicContentBtn.addEventListener('click', function() {// 更新内容dynamicPopover.setContent({'.popover-body': '当前时间: ' + new Date().toLocaleTimeString()});});});</script>
</body>
</html>

四、代码说明

  1. 基本结构：

    • 引入了Bootstrap 5的CSS和JS文件
    • 使用data-bs-toggle="popover"属性标识弹出框触发器

  2. 基本示例：

    • 展示了最简单的弹出框实现
    • 演示了不同位置的弹出框(top, right, bottom, left)

  3. 触发方式：

    • focus: 元素获得焦点时显示
    • hover: 鼠标悬停时显示
    • 手动触发: 通过JavaScript控制

  4. HTML内容：

    • 设置data-bs-html="true"允许在弹出框中解析HTML

  5. 延迟效果：

    • 使用data-bs-delay属性设置显示和隐藏的延迟时间

  6. 自定义模板：

    • 通过JavaScript配置自定义的弹出框HTML结构

  7. 事件处理：

    • 监听弹出框的各种事件(show, shown, hide, hidden)

  8. 动态内容：

    • 演示如何通过JavaScript动态更新弹出框内容

五、注意事项

  1. 弹出框依赖于Popper.js，确保使用bootstrap.bundle.min.js(包含Popper)或单独引入Popper
  2. 弹出框需要手动初始化(通过data属性或JavaScript)
  3. 在移动设备上，建议使用点击触发而非悬停触发
  4. 包含HTML内容时要注意XSS安全问题
  5. 对于复杂的交互，考虑使用模态框(Modal)而非弹出框

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.tpcf.cn/diannao/88412.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

轻巧灵动，智启未来 ——Kinova Gen3 Lite 机器人轻松解锁各行业自动化新姿势

轻巧灵动，智启未来 ——Kinova Gen3 Lite 机器人轻松解锁各行业自动化新姿势

近年来&#xff0c;Kinova Gen3 Lite 机器人凭借其卓越的性能、灵活的应用能力以及出色的性价比&#xff0c;在全球范围内掀起了一股热销狂潮。无论是科研机构、高校实验室&#xff0c;还是工业制造企业&#xff0c;都对它青睐有加。其销量持续攀升&#xff0c;市场占有率不断扩…
阅读更多...
STM32 实现PID

STM32 实现PID

&#x1f9f1; 一、PID核心模块&#xff08;模块化设计&#xff09; 头文件 pid_controller.h #pragma once #include <stdint.h>typedef struct {// 可调参数float Kp, Ki, Kd; // PID系数float output_min; // 输出下限float output_max; // 输出上…
阅读更多...
基于MATLAB的BP神经网络回归模型在空气质量预测中的应用

基于MATLAB的BP神经网络回归模型在空气质量预测中的应用

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 随着城市化进程的加快和工业化的不断发展&#xff0c;空气质量问题日益受到广泛关注。空气中污染物如PM2.5、PM10、…
阅读更多...
Linux docker拉取镜像报错解决

Linux docker拉取镜像报错解决

1、错误提示&#xff1a; Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection 主要原因就是docker源不正确&#xff0c;需要配置一下。 2、报错如下&#xff1a; 3、解决办法&#x…
阅读更多...
stm32week17+18+19+20

stm32week17+18+19+20

stm32学习 十二.串口 5.USART的HAL库用法 USART/UART异步通信配置步骤&#xff1a; 配置串口工作参数&#xff1a;HAL_UART_Init();串口底层初始化&#xff1a;HAL_UART_MspInit();开启串口异步接收中断&#xff1a;HAL_UART_Receive_IT();设置优先级&#xff0c;使能中断&…
阅读更多...
14.Linux Docker

14.Linux Docker

## Linux系统优化一般情况&#xff0c;我们都会使用Linux来进行MySQL的安装和部署&#xff0c;Linux系统在使用的时候&#xff0c;也需要进行相关的配置&#xff0c;以提高MySQL的使用性能&#xff0c;这里列举以下几点&#xff1a;避免使用Swap交换分区&#xff0c;因为交换时…
阅读更多...
智能体平台的商业前景与竞争格局分析：金融与企业市场的机遇与挑战

智能体平台的商业前景与竞争格局分析：金融与企业市场的机遇与挑战

一、金融机构与企业部署第三方智能体平台&#xff0c;这条路靠谱吗&#xff1f; 1. 需求背景 金融机构和大中小企业普遍面临数字化转型、降本增效、智能服务升级等需求。智能体&#xff08;Agent/AI Agent&#xff09;平台能帮助企业快速构建客服、风控、营销、数据分析等多种…
阅读更多...
数据结构篇-二分图

数据结构篇-二分图

定义示例应用 定义 一个图是二分图&#xff1b;一个图具有二着色性&#xff1b;一个图不包含任何奇数长度的环&#xff1b; 实现 /*** Program 18.6 Two-colorability* ------------------------------------------------------------------------------------------------…
阅读更多...
50. Pow(x, n)快速幂算法

50. Pow(x, n)快速幂算法

实现 pow(x, n) &#xff0c;即计算 x 的整数 n 次幂函数&#xff08;即&#xff0c;xn &#xff09;。此函数应将 x 作为浮点数&#xff08;意味着它可以是十进制数&#xff09;和 n 作为整数&#xff08;可以是正数、负数或零&#xff09;一起使用。 快速幂&#xff08;Expo…
阅读更多...
打造丝滑的Android应用：LiveData完全教程

打造丝滑的Android应用：LiveData完全教程

为什么你需要LiveData&#xff1f; 在Android开发中&#xff0c;数据的动态更新一直是个让人头疼的问题。想象一下&#xff1a;你的界面需要实时显示用户的余额变化&#xff0c;或者一个聊天应用的未读消息数得随时刷新。过去&#xff0c;我们可能会用Handler、手动监听器&…
阅读更多...
vue3 el-table 根据字段值 改变整行字体颜色

vue3 el-table 根据字段值 改变整行字体颜色

在 Vue 3 中使用 Element Plus 的 el-table 组件时&#xff0c;如果你想根据某一列的字段值来改变整行的字体颜色&#xff0c;你可以通过使用自定义的 row-class-name 属性或者通过插槽&#xff08;slot&#xff09;的方式来达到目的。以下是两种常见的方法&#xff1a; 方法一…
阅读更多...
Linux的全新网络管理命令行工具——nmcli

Linux的全新网络管理命令行工具——nmcli

一、nmcli简介 1.1、NetworkManager简介 1.1.1、NetworkManager介绍 在红帽系的Linux中&#xff0c;默认的网络服务是由NetworkManager提供的&#xff08;其主要是一个可以进行动态网络配置和控制的守护进程&#xff09;。 使用NetworkManager的优点 序号使用NetworkManager的优…
阅读更多...
C++基础之智能指针

C++基础之智能指针

一、概念 堆内存对象需要手动使用delete销毁&#xff0c;如果没有使用delete销毁就会造成内存泄漏。 所以C在ISO98标准中引入了智能指针的概念&#xff0c;并在ISO11中趋于完善。 使用智能指针可以让堆内存对象具有栈内存对象的特点&#xff0c;原理是给需要手动回收的内内存对…
阅读更多...
python3虚拟机线程切换过程

python3虚拟机线程切换过程

python实现了自己的多线程&#xff0c;为了保证线程安全&#xff0c;引入了全局解释器锁GIL&#xff0c;只有拿到GIL的线程才能执行&#xff0c;所以在python中同一时刻只能有一个线程在运行&#xff0c;python多线程无法发挥多核处理器的威力&#xff0c;《python源码剖析》中…
阅读更多...
PYTHON从入门到实践5-列表操作

PYTHON从入门到实践5-列表操作

# 【1】列表是可变的&#xff0c;可以修改、追加、删除 import randomclass Friend(object):def __init__(self, name, age):self.name nameself.age ageif __name__ __main__:friendList []for i in range(0, 9):randomNumber random.randint(0, 100)friend Friend(f&qu…
阅读更多...
【linux】network服务启动网卡流程

【linux】network服务启动网卡流程

目录 1、介绍2、ifup流程【1】与NetworkManager兼容【2】ifup-eth设置ip【3】ifup-routes设置路由 1、介绍 network服务的核心由/etc/sysconfig/network-scripts/下一堆脚本配置来生效&#xff0c;其中启动网卡就是通过ifup脚本来实现的&#xff0c;下面就讲一下ifup如何恢复i…
阅读更多...
如何防止自己的电脑被控制？开启二次验证保护教程

如何防止自己的电脑被控制？开启二次验证保护教程

远程操作什么最重要&#xff1f;安全&#xff0c;安全&#xff0c;和安全&#xff01;答案永远是安全&#xff01;那么究竟如何能让远程连接安全性更上一层台阶呐&#xff1f;又是哪家远控安全策略方面最给力呐&#xff1f;这可不是王婆卖瓜&#xff0c;自卖自夸&#xff0c;确…
阅读更多...
微信小程序节点相关总结

微信小程序节点相关总结

微信小程序节点事件总结 bindtap、catchtap、bindclick的区别&#xff1f;bindclick 和 bindtap 的区别在于&#xff1a; e.target和e.currentTargete.typee.timeStamp触摸事件属性&#xff08;针对触摸类事件&#xff09;坐标信息事件绑定数据冒泡与捕获相关其他特殊属性**常见…
阅读更多...
XSD是什么，与XML关系

XSD是什么，与XML关系

XSD&#xff08;XML Schema Definition&#xff09;是用于描述XML文档结构和内容的一种规范。它定义了XML文档中元素、属性、数据类型、数据格式以及它们之间的关系和约束。XSD是W3C&#xff08;万维网联盟&#xff09;推荐的标准之一&#xff0c;它比早期的DTD&#xff08;Doc…
阅读更多...
Ubuntu服务器中MySQL如何进行主从复制

Ubuntu服务器中MySQL如何进行主从复制

一、MySQL 主从复制基本原理 MySQL 主从复制是指&#xff1a;一台数据库服务器负责写入操作&#xff0c;并将数据变更以二进制日志形式记录下来;一台或多台从库通过读取主库的二进制日志&#xff0c;实时或半实时地将主库的写入操作同步到自身数据库&#xff0c;实现数据一致性…
阅读更多...
最新文章

Copyright @ 2022~2023