Bootstrap 5 弹出框功能

当用户点击控制按钮或进入特定区域时，弹出框（Popover）会在内容屏幕上显示。Popover 函数类似于在单个标签中使用标题和内容的 Popover 函数。

Bootstrap 5 的 Popover 规则

对于弹出框的放置，Bootstrap 5 使用了第三方库。除非网页包含“bootstrap.bundle.js”或“bootstrap.bundle.min.js”库，否则弹出框将无法工作。bootstrap.js 链接和 JavaScript 捆绑库都包含在内。

出于性能原因，弹出框是选择加入的，因此我们必须自己初始化它们。弹出框标题“Zero-length”永远不会显示在网站上。

当由跨越多行的超链接激活时，弹出框会居中。无法在隐藏的元素上触发弹出框。需要一个包装元素来激活以显示禁用元素的弹出框。

在从 DOM（文档对象模型）中删除关联元素之前，必须停用弹出框。要启动弹出框，请从影子文档对象模型中选择一个元素。

带有锚标记的基本弹出框

Popover 函数通过使用不同的标签和元素单击事件作为 Popover 工作。在使用脚本标记单击 href 标签后，Popover 变量会初始化该函数。

示例

以下示例显示了单击锚标记后的弹出框数据。

输出

下图显示了带有锚 <a> 标签的基本弹出框。

带有按钮函数的基本弹出框

Popover 函数通过使用按钮函数单击事件作为弹出框工作。在使用脚本标记单击按钮值或函数后，Popover 变量会初始化该函数。

示例

以下示例显示了悬停按钮函数后的弹出框数据。

输出

下图显示了带有按钮函数的基本弹出框。

具有位置的基本弹出框

Popover 函数描述了每个用户要求和应用程序格式的位置。使用 Bootstrap 5 元素，我们可以将弹出框添加到内容的顶部、底部、左侧和右侧。锚点或按钮函数与 data-bs-placement = "position(top)" 元素一起使用。

语法

以下语法使用按钮函数在不同位置显示弹出框信息。

示例

以下示例显示了使用按钮函数在不同位置的弹出框数据。

输出

下图显示了具有按钮功能的不同位置弹出框。

关闭弹出框

类似 Html 元素的按钮在网页上包含 data-bs-trigger = "focus" 元素。单击按钮或锚点函数后，焦点元素将关闭弹出框函数。

语法

以下语法使用按钮函数来显示关闭弹出框信息。

示例

以下示例显示了带有标题和文本的关闭弹出框函数。

输出

下图显示了带有内容的关闭弹出框函数。

悬停弹出框

类似 Html 元素的按钮在网页上包含 data-bs-trigger = "hover" 元素。悬停元素会在鼠标箭头触摸按钮或锚点函数后显示弹出框函数。

语法

以下语法使用按钮函数来显示关闭弹出框信息。

示例

以下示例显示了带有标题和文本的悬停弹出框函数。

输出

下图显示了带有内容的悬停弹出框函数。

具有偏移的基本弹出框

data-bs-offset = "10,15" 元素在用户交互函数中使用。此元素根据按钮或锚点元素上的所需位置在页面上显示弹出框。

语法

以下语法显示了来自 html 元素的具有偏移值的弹出框函数。

示例

以下示例显示了来自 html 元素的弹出框函数所需的偏移值。

输出

下图显示了具有按钮偏移的弹出框函数。

带有禁用按钮的基本弹出框

应用程序的禁用按钮不显示弹出框函数及其数据。带有 <button> 标签的 html <span> 用于显示弹出框数据。 tabindex = "0" 元素放置在 span 标签中以显示工具提示。

语法

以下语法显示了具有禁用元素的弹出框函数。

示例

以下示例显示了带有禁用按钮的弹出框函数。

输出

下图显示了带有禁用按钮的弹出框函数。

结论

Popover 函数帮助用户和开发人员获取详细信息。它用于为应用程序创建用户友好、详细和信息丰富的函数。bootstrap 5 popover 函数使用交互式弹出框显示额外信息。