弹出框（Popover），玩转Bootstrap（JS插件篇）教程-慕课网

弹出框（Popover）

插件源文件：popover.js

（引用地址：<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-popover.js"></script>）

样式文件：

☑ LESS版本：对应的源文件是 popovers.less

☑ Sass版本：对应的源文件是 _popovers.scss

☑ 编译后的Bootstrap：对应bootstrap.css文件第5595行～第5714行

弹出框(Popover)仅从外表上看，和前面介绍的提示框（Tooltip）长得差不多，如下所示：

不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。而对于两者有何区别呢？稍后我们会介绍，先来了解如何制作Bootstrap框架中的弹出框。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>弹出框(Popover)</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body{
padding: 5%;
}
</style>
</head>
<body>
<button type="button" class="btn btn-default" id="myPopover">猛击我吧</button>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#myPopover').popover({
title:"我是弹出框的标题",
content:"我是弹出框的内容",
placement:"right"
});
});
</script>
</body>
</html>

弹出框（Popover）