Heim >Web-Frontend >Front-End-Fragen und Antworten >So implementieren Sie eine schwebende Box auf der rechten Seite im Bootstrap
在bootstrap中，可利用popover插件实现右侧悬浮框，该插件用于提供一个扩展视图，设置元素中的“data-placement”属性就可以设置悬浮框的显示方向，语法为“”。
本教程操作环境：Windows10系统、bootstrap3.3.7版、DELL G3电脑
Bootstrap 弹出框（Popover）插件
弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。
用法
弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。您可以有以下两种方式添加弹出框（popover）：
通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。
<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>通过 JavaScript：通过 JavaScript 启用弹出框（popover）：
$('#identifier').popover(options)
弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：
$(function () { $("[data-toggle='popover']").popover(); });下面的实例演示了通过 data 属性使用弹出框（Popover）插件的用法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 弹出框（Popover）插件</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-warning" title="Popover title"
data-container="body" data-toggle="popover" data-placement="right"
data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div>
<script>
$(function () {
$("[data-toggle='popover']").popover();
});
</script>
</body>
</html>输出结果：
相关推荐：bootstrap教程
Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine schwebende Box auf der rechten Seite im Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!