自强学堂
自强学堂:学习、分享、让你更强!
Bootstrap 教程HTMLCSSJAVASCRIPTJQUERYSQLPHPBOOTSTRAPANGULARXML
 

Bootstrap 弹出框

描述

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(弹出框)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Popover Example</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"> 
</head>
<body>
<div class="container">
<h2>Example of creating Modal with Twitter 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>
</body>
</html>
            

在线查看实例。

解释

下面的表格解释了上面的代码。它将帮助您理解如何使用 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>Twitter Bootstrap Popover with placement option Example</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>Example of creating Popover with Twitter Bootstrap with placement option</h2>
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltip for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="example_left" class="btn btn-success" 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 class="well">
<a href="#" id="example_top" class="btn btn-success" 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 class="well">
<a href="#" id="example_bottom" class="btn btn-success" 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();
  $("#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(弹出框)。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Popover Example with trigger option</title> 
<meta name="description" content="Creating Popover with Twitter Bootstrap with trigger option">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<h2>Example of creating Popover with Twitter Bootstrap with trigger options</h2>
<div class="well">
<a href="#" id="example" class="btn btn-success" 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({trigger: 'focus'});
});
</script>
</body>
</html>
            

在线查看实例。

title

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

content

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

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Popover Example with title and content option</title> 
<meta name="description" content="Creating Popover with Twitter Bootstrap with trigger option">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<h2>Example of creating Popover with Twitter Bootstrap with title and content options</h2>
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="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({title: 'Twitter Bootstrap Popover', content: "It's so simple to create a tooltop for my website!"});
});
</script>
</body>
</html>
            
            

在线查看实例。

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 和图片文件。