- 引导布局
- Bootstrap - 断点
- Bootstrap - 容器
- Bootstrap - 网格系统
- Bootstrap - 列
- Bootstrap - 排水沟
- Bootstrap - 实用程序
- Bootstrap - Z 索引
- Bootstrap - CSS 网格
- 引导组件
- Bootstrap - 手风琴
- Bootstrap - 警报
- Bootstrap - 徽章
- Bootstrap - 面包屑导航
- Bootstrap - 按钮
- Bootstrap - 按钮组
- Bootstrap - 卡片
- Bootstrap - 轮播
- Bootstrap - 关闭按钮
- Bootstrap - 折叠
- Bootstrap - 下拉菜单
- Bootstrap - 列表组
- Bootstrap - 模态
- Bootstrap - 导航栏
- Bootstrap - 导航和选项卡
- Bootstrap - Offcanvas
- Bootstrap - 分页
- Bootstrap - 占位符
- Bootstrap - 弹出窗口
- Bootstrap - 进展
- Bootstrap-Scrollspy
- Bootstrap - 旋转器
- Bootstrap - 吐司
- Bootstrap - 工具提示
- 引导表单
- Bootstrap - 表单
- Bootstrap - 表单控制
- 引导程序 - 选择
- Bootstrap - 支票和收音机
- Bootstrap - 范围
- Bootstrap - 输入组
- Bootstrap - 浮动标签
- Bootstrap - 布局
- 引导程序 - 验证
- 引导助手
- Bootstrap-Clearfix
- Bootstrap - 颜色和背景
- Bootstrap - 彩色链接
- Bootstrap - 聚焦环
- Bootstrap - 图标链接
- Bootstrap - 位置
- Bootstrap - 比率
- Bootstrap - 堆栈
- Bootstrap - 拉伸链接
- Bootstrap - 文本截断
- Bootstrap - 垂直规则
- Bootstrap - 视觉隐藏
- 引导实用程序
- Bootstrap - 背景
- Bootstrap - 边框
- Bootstrap - 颜色
- Bootstrap - 显示
- Bootstrap-Flex
- Bootstrap - 浮动
- Bootstrap - 交互
- 引导程序 - 链接
- Bootstrap - 对象拟合
- Bootstrap - 不透明度
- Bootstrap - 溢出
- Bootstrap - 位置
- Bootstrap - 阴影
- Bootstrap - 尺寸调整
- Bootstrap - 间距
- Bootstrap - 文本
- Bootstrap - 垂直对齐
- Bootstrap - 可见性
- 引导演示
- Bootstrap - 网格演示
- Bootstrap - 按钮演示
- Bootstrap - 导航演示
- Bootstrap - 博客演示
- Bootstrap - 滑块演示
- Bootstrap - 轮播演示
- Bootstrap - 标头演示
- Bootstrap - 页脚演示
- Bootstrap - 英雄演示
- Bootstrap - 特色演示
- Bootstrap - 侧边栏演示
- Bootstrap - 下拉菜单演示
- Bootstrap - 列表组演示
- Bootstrap - 模态演示
- Bootstrap - 徽章演示
- Bootstrap - 面包屑演示
- Bootstrap - Jumbotrons 演示
- Bootstrap-粘性页脚演示
- Bootstrap-相册演示
- Bootstrap-登录演示
- Bootstrap 定价演示
- Bootstrap-Checkout 演示
- Bootstrap-产品演示
- Bootstrap-封面演示
- Bootstrap-仪表板演示
- Bootstrap-粘性页脚导航栏演示
- Bootstrap-Masonry 演示
- Bootstrap-Starter 模板演示
- Bootstrap-Album RTL 演示
- Bootstrap-Checkout RTL 演示
- Bootstrap-Carousel RTL 演示
- Bootstrap-博客 RTL 演示
- Bootstrap-仪表板 RTL 演示
- Bootstrap 有用资源
- Bootstrap - 问题与解答
- Bootstrap - 快速指南
- Bootstrap - 有用的资源
- Bootstrap - 讨论
Bootstrap - 弹出窗口
本章将讨论 Bootstrap 中的弹出窗口。弹出窗口通常包含与触发元素相关的附加信息、上下文或操作。
弹出窗口可能包含文本、图像、链接、按钮或其他内容,具体取决于其目的和上下文。Bootstrap 提供了内置的弹出窗口组件,可以轻松集成到 Web 应用程序中。
使用 popover 插件时要记住的事项:
- 由于弹出窗口依赖于第三方库Popper.js进行定位,因此您必须在bootstrap.js之前包含popper.min.js 。
- 作为依赖项,弹出窗口需要弹出窗口插件。
- 您必须首先初始化弹出窗口,因为出于性能原因选择加入弹出窗口。
- 对于零长度标题和内容值,永远不会显示弹出窗口。
- 触发弹出窗口不适用于隐藏元素。
- .disabled或禁用元素的弹出窗口必须使用包装元素触发。
- 为了避免弹出框在锚点的整体宽度之间居中,请使用white-space: nowrap; 在<a>上
- 从 DOM 中删除任何元素之前,必须隐藏与它们对应的弹出窗口。
启用弹出窗口
通过data-bs-toggle属性初始化页面上的所有弹出窗口
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
创建一个弹出窗口
将data-bs-toggle="popover"属性添加到元素,以创建弹出窗口。
data -bs-toggle属性定义弹出窗口。
title属性定义弹出窗口的标题
data -content属性定义要在相应弹出窗口中显示的内容。
例子
让我们看一个创建弹出窗口的示例:
您可以使用“编辑并运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Popover</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Bootstrap creation</h4><br><br> <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top" data-bs-title="Popover" data-bs-content="It is a new popover."> Click to view popover </button> <script> const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)) </script> </body> </html>
弹出框的定位
弹出框的定位有四个选项:左对齐、右对齐、顶部对齐和底部对齐。
默认情况下,弹出窗口将显示在元素的右侧。
data -bs-placement属性用于设置弹出框的位置。
例子
让我们看一个设置弹出框位置的示例:
您可以使用“编辑并运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Popovers</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Positioning of Popover</h4> <br><br><br> <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover"> Popover on top </button> <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover"> Popover on right </button> <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover"> Popover on bottom </button> <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover"> Popover on left </button> <script> const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)) </script> </body> </html>
定制弹出窗口
可以使用自定义类data-bs-custom-class="custom-popover" 自定义弹出窗口的外观。
例子
让我们看一个创建自定义弹出窗口的示例:
您可以使用“编辑并运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head&> <title>Bootstrap - Popovers</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Custom Popover</h4><br><br> <!-- Define custom container --> <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="custom-popover" data-bs-title="Custom popover" data-bs-content="It is a custom popover."> Custom popover </button> <script> const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)) </script> </body> </html>
可关闭的弹出窗口
默认情况下,再次单击同一元素时,弹出窗口将关闭。但是,可以使用属性data-bs-trigger="focus" ,这将在单击元素外部时关闭弹出窗口。
为了在下次单击时关闭弹出窗口,需要使用特定的 HTML 代码来确保不同浏览器和平台之间的Behave一致
例子
让我们看一个可关闭弹出窗口的示例:
您可以使用“编辑并运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Dismissible Popover</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h4>Dismissed on next click - Popover</h4><br> <a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a> </div> <script> const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)) </script> </body> </html>
悬停弹出框
当鼠标指针移到某个元素上并且您希望悬停时显示弹出窗口时,请使用data-bs-trigger="hover"属性。
例子
让我们看一个悬停弹出窗口的示例:
您可以使用“编辑并运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Popover on hover</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h4>Hoverable Popover</h4><br> <a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a> </div> <script> const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)) </script> </body> </html>
禁用元素上的弹出窗口
对于禁用元素上的弹出窗口,您可能更喜欢data-bs-trigger="hover focus",以便弹出窗口显示为用户的即时视觉反馈,因为他们可能不希望单击禁用元素。
例子
让我们看一个禁用元素上的弹出窗口的示例:
您可以使用“编辑并运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Popovers</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Popover on Disabled Element</h4><br> <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover"> <button class="btn btn-primary" type="button" disabled>Disabled button</button> </span> <script> const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)) </script> </body> </html>
选项
选项名称可以附加到类data-bs-并且该选项可以作为属性传递,例如data-bs-boundary="{value}"。
通过数据属性传递选项时,请确保将大小写类型从"camelCase"更改为"kebab-case",例如使用data-bs-fallback-placements="[array]"而不是data-bs-fallbackPlacements= “[数组]”。
例子
以下是作为属性添加到.data-bs- class的选项示例:
您可以使用“编辑并运行”选项编辑并尝试运行此代码。
<!DOCTYPE html> <html lang="en"> <head&> <title>Bootstrap Popovers - Options</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h4>Popover options</h4><br> <button type="button" class="btn btn-lg btn-success" data-bs-toggle="popover" data-bs-title ="Title added through options and that overrides the title provided" title="Popover description" data-content="Popover desc">Click Me to view</button> <br><br> <script> const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)) </script> </body> </html>
下表显示了 Bootstrap 提供的各种选项,这些选项将作为数据属性附加到.data-bs-类中。
姓名 | 类型 | 默认 | 描述 |
---|---|---|---|
允许列表 | 目的 | 默认值 | 包含允许的属性和标签的对象。 |
动画片 | 布尔值 | 真的 | CSS 淡入淡出过渡应用于弹出窗口。 |
边界 | 字符串、元素 | '剪辑父母' | 默认情况下,它是“clippingParents”并且可以接受 HTML 元素引用(仅通过 JavaScript)。 |
容器 | 字符串、元素、假 | 错误的 | 将弹出窗口附加到特定元素。 |
自定义类 | 字符串、函数 | ” | 除了模板中指定的任何类之外,还将添加这些类。要添加多个类,请用空格分隔它们:“class-1 class-2”。 |
延迟 | 数量、物体 | 0 | 延迟显示和隐藏弹出窗口(毫秒)。对象结构为:delay: { "show": 500, "hide": 100 }。 |
回退展示位置 | 大批 | [‘上’、‘右’、‘下’、‘左’] | 通过提供数组中的展示位置列表来定义后备展示位置。 |
html | 布尔值 | 错误的 | 允许弹出窗口中包含 HTML。 |
抵消 | 数组、字符串、函数 | [0, 0] | 弹出窗口相对于其目标的偏移。例如:data-bs-offset="10,20"。 |
放置 | 字符串、函数 | '顶部' | 决定弹出框的位置。 |
波普配置 | null、对象、函数 | 无效的 | 更改 Bootstrap 的默认 Popper 配置。 |
消毒 | 布尔值 | 真的 | 启用或禁用清理。 |
消毒Fn | 空,函数 | 无效的 | 您可以提供自己的清理功能。 |
选择器 | 字符串,假 | 错误的 | 使用选择器,弹出窗口对象将被委托给指定的目标。 |
模板 | 细绳 | ' ' |
创建弹出窗口时,请使用基本 HTML。 |
标题 | 字符串、元素、函数 | ” | 它指的是弹出窗口的标题。 |
扳机 | 细绳 | “悬停焦点” | 显示如何触发弹出窗口:单击、悬停、聚焦、手动。 |