W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap 弹出框



弹出框插件

Popover插件类似于tooltips; 它是一个弹出框,当用户单击元素时显示。 区别是popover可以包含更多的内容。

Click To Toggle Popover
Note 提示: 插件可以单独包含(使用Bootstrap单独的“popover.js”文件),或者一次包含(使用“bootstrap.js”或“bootstrap.min.js”)。

如何创建Popover

要创建popover,请将 data-toggle="popover" 属性添加到元素。

使用 title 属性指定popover的头文本,并使用 data-content 属性指定应在popover的body中显示的文本:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

注: Popovers必须用jQuery初始化:选择指定的元素并调用popover()方法。

以下代码将启用文档中的所有popovers:

Example

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>
尝试一下 »

定位

默认情况下,弹出框将出现在元素的右侧。

使用 data-placement 属性在元素的顶部,底部,左侧或右侧设置popover的位置:

Example

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
尝试一下 »
Note 提示:你还可以使用值为"auto"的data-placement属性,这将允许浏览器确定popover的位置。 例如,如果值为"auto left",则popover将在可能时显示在左侧,否则在右侧。

关闭

默认情况下,当你再次单击元素时,将关闭popover。 但是,你可以使用 data-trigger="focus" 属性,它将在单击元素外部时关闭popover:

Example

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
尝试一下 »

提示:如果希望在将鼠标指针移动到元素上时显示popover,请使用值为"hover"的 data-trigger 属性:

Example

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
尝试一下 »

Complete Bootstrap Popover Reference

For a complete reference of all popover options, methods and events, go to our Bootstrap JS Popover Reference.