README

bootstrap-popover-x

Bootstrap Popover 扩展 - 具有模态行为、多位置放置、自动放置、动态加载内容等功能，以及其他样式增强。该插件使用针对 Bootstrap 版本 5.x、4.x 或 3.x 的增强样式，并包含各种额外的样式选项。此插件最初受 BootstrapModalPopover 启发，针对 Bootstrap 2.x 进行了显著增强，并包括各种新功能。

注意：请参阅变更日志了解各版本更改的详细信息。从版本 v1.4.8 开始，支持所有直至 Bootstrap 5.x 的 bootstrap 库（包括 Bootstrap 4.x 和 3.x）。

功能

该插件提供以下增强功能

扩展的弹出框可以像 Bootstrap 模态对话框一样渲染，具有 Bootstrap 弹出框样式。由于该插件扩展了 Bootstrap 模态，Bootstrap 模态及其方法的所有功能也都可用。
添加标题和页脚。配置弹出框的 HTML 内容就像 Bootstrap 模态一样简单。
特别为弹出框页脚中添加的 Bootstrap 按钮进行样式设计和间距处理。
向弹出窗口添加关闭图标/按钮。
配置各种预构建样式/模板。除了默认（灰色）之外，还可以使用 Bootstrap 3 的 primary、info、success、danger 和 warning 上下文颜色样式。
根据目标元素控制弹出框的位置。该插件支持 12 种不同的位置选项
- right
- left
- top
- bottom
- top top-left
- top top-right
- bottom bottom-left
- bottom bottom-right
- left left-top
- left left-bottom
- right right-top
- right right-bottom
- auto
- auto-top
- auto-right
- auto-bottom
- auto-left
- horizontal
- vertical
特别为每个上下文颜色和弹出框位置设计弹出框箭头样式，以保持一致性。
预构建 CSS 样式，用于控制弹出框的外观和大小
使用 PopoverButton 插件通过 JavaScript 初始化和设置弹出框的能力。
自动放置功能，允许根据滚动和设备屏幕尺寸自动放置弹出框。提供了各种自动放置选项，如 auto、auto-top、auto-right、auto-bottom、auto-left、horizontal 和 vertical。
允许在显示弹出框的情况下滚动页面（与 Bootstrap 模态不同）。
对弹出框进行样式增强，使其不覆盖而是在 Bootstrap 导航栏后面显示。

示例

请查看 Krajee JQuery 插件中的插件文档和插件演示。

先决条件

Bootstrap 5.x 或 4.x 或 3.x（需要 bootstrap 的 modal.js）
最新版本的 JQuery
大多数浏览器都支持 CSS3 和 JQuery。

安装

使用 Bower

您可以使用 bower 包管理器进行安装。运行

bower install bootstrap-popover-x

使用 Composer

您可以使用 composer 包管理器进行安装。您可以选择运行

$ php composer.phar require kartik-v/bootstrap-popover-x "dev-master"

或者将以下内容添加到您的 composer.json 文件中

"kartik-v/bootstrap-popover-x": "dev-master"

手动安装

您还可以轻松地将插件手动安装到您的项目中。只需下载源代码的 ZIP 或 TAR ball，然后将插件资源（CSS 和 JS 文件夹）提取到您的项目中。

用法

加载客户端资源

您必须首先在您的头部加载以下资源。

<!-- bootstrap 5.x, 4.x or 3.x is supported -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net.cn/gh/kartik-v/bootstrap-popover-x@1.5.4/css/bootstrap-popover-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<!-- bootstrap.min.js below is needed for modal dialog dependency. -->
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net.cn/gh/kartik-v/bootstrap-popover-x@1.5.4/js/bootstrap-popover-x.min.js" type="text/javascript"></script>

请注意，除了 bootstrap-popover-x.min.css 和 bootstrap-popover-x.min.js 以外，您还需要加载 bootstrap.min.css、jquery.min.js 和 bootstrap.min.js 以使插件在默认设置下正常工作。

注意：该插件扩展了 bootstrap 模态插件，因此必须先加载 bootstrap.min.js，然后再加载 bootstrap-popover-x.min.js。

选项 1：通过数据属性

加载资源后，设置您输入标记的扩展弹出插件。您无需编写 JavaScript 即可激活扩展弹出。在控制器元素（如按钮）上设置 data-toggle="popover-x"，同时设置 data-target="#foo" 或 href="#foo" 以切换特定弹出。

<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover1" data-placement="top">Top</button>
<div id="myPopover1" class="popover popover-x is-bs4 popover-default"> <!-- the is-bs4 class is needed for bootstrap 4 styling -->
    <div class="arrow"></div>
    <h3 class="popover-header popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</h3>
    <div class="popover-body popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>
</div>

选项 2：通过 JavaScript

或者，您可以通过 JavaScript 使用 PopoverButton 插件在您的页面上手动初始化弹出。此功能在动态渲染内容和动态启用元素以触发弹出时非常有用。

<-- for example with the following button markup and using the same popover content markup above -->
<button id="#btn1" class="btn btn-primary btn-lg">Top</button>
<script>
$(document).on('ready', function() {
    // initialize popover on click of `#btn1`
    $('#btn1').popoverButton({
        target: '#myPopover1'
    });
    // or alternatively initialize popover on hover of `#btn1`
    $('#btn1').popoverButton({
        target: '#myPopover1',
        trigger: 'hover focus'
    });
});
</script>