Bootstrap 弹出框

[

Bootstrap Popover（弹出框）

描述

Bootstrap Popover（弹出框）是使用定制的 Jquery 插件创建的。它可以用来显示任何元素的一些信息。
在本教程中，您将看到如何使用 Bootstrap Popover，以及如何使用一些可用选项进行定制。

什么是必需的

您必须引用 Jquery、Bootstrap CSS 和两个 JavaScript files - 一个用于 Bootstrap Tooltip（工具提示插件），一个用于 Bootstrap Popover（弹出框）。
用于 Tooltip（工具提示插件）的 JS 文件位于您的 Bootstrap 文件夹中的 js 文件夹下，名为 bootstrap-tooltip.js。用于 Popover（弹出框）的 JS 文件位于您的 Bootstrap 主文件夹中的 js 文件夹下，名为 bootstrap-popover.js。Jquery 位于您的 Bootstrap 主文件夹中的 docs > assets > js 下，名为 jquery.js。或者您可以直接访问 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 下载 Jquery。
请确保您在下载 bootstrap-popover.js 之前先下载 bootstrap-tooltip.js。弹出框依赖工具提示插件，因此需要先加载工具提示插件。

在您的网站中使用 Bootstrap Popover（弹出框）

实例

<div class="container">

    <h2>使用Bootstrap创建弹出框</h2>

    <div class="well">

        <a href="#" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>

    </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>

<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>

<script>

    $(function ()

    { $("#example").popover();

    });

</script>

在线查看实例

解释

下面的表格解释了上面的代码。它将帮助您理解如何使用 Bootstrap Popover（弹出框）。

代码	解释
id="example"	分配给相关锚的 id，id 的值指向后边要实现 popover（弹出框）的 JavaScript。
class="btn btn-danger"	创建一个按钮。btn btn-danger 是实例中使用的 class。您可以使用 Bootstrap CSS 中任何其他的 class，或者使用您自己定义的 class。
data-content="It's so simple to create a tooltip for my website!"	data-content 的值显示在 popover（弹出框）的主体中。
data-original-title="Bootstrap Popover"	data-original-title 的值显示为 popover（弹出框）的标题。
hover for popover	锚文本。
<script src="https://ajax.googleapis.com/ajax/libs/

]

  本文标题：Bootstrap 弹出框 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/bootstrap/19281.html