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/ jquery/1.7.1/jquery.min.js"></script>	引用 Jquery。
<script src="../bootstrap/twitter-bootstrap-v2/ js/bootstrap-tooltip.js"></script>	引用 Bootstrap Tooltip（工具提示插件）的 JS 文件。
<script src="../bootstrap/twitter-bootstrap-v2/js/ bootstrap-popover.js"></script>	引用 Bootstrap Popover（弹出框）的 JS 文件。
$(function ()	准备文档。Jquery 命令。
$("#example").popover();	访问 id example，并在上面实现 popover()。

这里我们没有在 box 外创建 popover（弹出框），不通过任何的定制，即没有通过 popover() 使用任何的选项。

用法

所以，我们可以总结出 Bootstrap Popover（弹出框）的用法是：

$(function ()  
{ $("identifier").popover(options);  
});

其中 identifier 是一个 Jquery 选择器，用于标识相关的容器元素。接下来，我们来看看 options 都有哪些。

选项

下面是一些通过 popover() 定制 Popover（弹出框）外观和感观时可能使用到的选项。

animation

animation 值的类型是 boolean，默认值是 true。用于给 tooltip（工具提示插件）带来 css 渐变过渡效果。

placement

placement 值的类型可以是 string 或者 function，默认值是 'right'，top、bottom 和 left 是其他几个可以使用的值。这个选项用于决定环绕锚文本周围的 Popover（弹出框）是位置。下面是一个使用 placement 选项的实例。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap 弹出框位置选择的实例</title>
    <meta name="description" content="Creating Modal Window with Twitter Bootstrap">
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
    <style>
        a {
            margin-left : 400px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>使用Bootstrap plcement 选项创建弹出框</h2>
    <div class="well">
        <a href="#" id="example" class="btn btn-success" rel="popover" data-content="为我的网站创建一个提示框如此简单！" data-original-title="Twitter Bootstrap 弹出框">悬停弹出</a>
    </div>
    <div class="well">
        <a href="#" id="example_left" class="btn btn-success" rel="popover" data-content="为我的网站创建一个提示框如此简单！" data-original-title="Twitter Bootstrap 弹出框">悬停弹出</a>
    </div>
    <div class="well">
        <a href="#" id="example_top" class="btn btn-success" rel="popover" data-content="为我的网站创建一个提示框如此简单！" data-original-title="Twitter Bootstrap 弹出框">悬停弹出</a>
    </div>
    <div class="well">
        <a href="#" id="example_bottom" class="btn btn-success" rel="popover" data-content="为我的网站创建一个提示框如此简单！" data-original-title="Twitter Bootstrap 弹出框">悬停弹出</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();
        $("#example_left").popover({placement:'left'});
        $("#example_top").popover({placement:'top'});
        $("#example_bottom").popover({placement:'bottom'});
    });
</script>
</body>
</html>

在线查看实例

selector

selector 值的类型是 string，默认值是 false。通过使用该选项可以把 Tooltip 对象授权给定的目标。

trigger

trigger 值的类型可以是 string，默认值是 'hover'，focus 和 manual 是其他可以使用的值。这个选项用于决定 tooltip（工具提示插件）如何开始。下面的实例演示了如何使用 focus 选项触发 Popover（弹出框）。

实例

<div class="container">
    <h2>使用Bootstrap trigger 选项创建弹出框</h2>
    <div class="well">
        <a href="#" id="example" class="btn btn-success" rel="popover" data-content="为我的网站创建一个提示框如此简单！" data-original-title="Twitter Bootstrap 弹出框">悬停弹出</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({trigger: 'focus'});
    });
</script>

在线查看实例

title

title 值的类型可以是 string 或 function，默认值是 ''。即默认不显示 title 属性的值。

content

content 值的类型可以是 string 或 function，默认值是 ''。即默认不显示 data-content 属性的值。下面是一个使用 title 和 data-content 选项的实例。该实例也演示了如何把多个选项一起使用。

实例

<div class="container">
    <h2>Bootstrap弹出框使用title和content选项</h2>
    <div class="well">
        <a href="#" id="example" class="btn btn-success" rel="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({title: 'Twitter Bootstrap Popover', content: "为我的网站创建一个提示框如此简单！"});
    });
</script>

在线查看实例

delay

delay 值的类型可以是 number 或 object，默认值是 0。这决定了显示和隐藏 popover（弹出框）的等待时间，以毫秒为单位。如果值设置为一个数字，则等待时间会应用于显示和隐藏。如果值设置为一个对象，则结构为 delay: { show: 500, hide: 100}，其中 500 和 100 是以毫秒为单位的。

改变 popover（弹出框）的默认标记和样式

Popover 弹出窗口的默认标记是位于 bootstrap-popover.js 文件的行号 92。如下所示：

template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

您可以更改它，放上您自己的标记。

Popover 弹出窗口的默认样式位于行号 3027 到 3118。您可以修改它，放上您自己的样式。

点击这里，下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。

Bootstrap v2 教程

Bootstrap CSS

Bootstrap 其他

Bootstrap Popover（弹出框）

描述

什么是必需的

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

实例

解释

用法

选项

animation

placement

实例

selector

trigger

实例

title

content

实例

delay

改变 popover（弹出框）的默认标记和样式

分类导航

关注微信下载离线手册