Bootstrap Popover 弹出框插件的用法实例。
Bootstrap Popover 弹出框插件的用法实例。
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>Bootstrap 实例 - 弹出框（Popover）插件方法</title>6
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">7
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>8
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>9
</head>10
<body>11
12
<div class="container" style="padding: 100px 50px 10px;" >13
<button type="button" class="btn btn-default popover-show" 14
title="Popover title" data-container="body" 15
data-toggle="popover" data-placement="left" 16
data-content="左侧的 Popover 中的一些内容 —— show 方法">17
左侧的 Popover18
</button>19
<button type="button" class="btn btn-primary popover-hide" 20
title="Popover title" data-container="body" 21
data-toggle="popover" data-placement="top" 22
data-content="顶部的 Popover 中的一些内容 —— hide 方法">23
顶部的 Popover24
</button>25
<button type="button" class="btn btn-success popover-destroy" 26
title="Popover title" data-container="body" 27
data-toggle="popover" data-placement="bottom" 28
data-content="底部的 Popover 中的一些内容 —— destroy 方法">29
底部的 Popover30
</button>31
<button type="button" class="btn btn-warning popover-toggle" 32
title="Popover title" data-container="body" 33
data-toggle="popover" data-placement="right" 34
data-content="右侧的 Popover 中的一些内容 —— toggle 方法">35
右侧的 Popover36
</button><br><br><br><br><br><br>37
<p class="popover-options">38
<a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>" 39
data-container="body" data-toggle="popover" data-content="40
<h4>Popover 中的一些内容 —— options 方法</h4>">41
Popover42
</a>43
</p>44
<script>45
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java