bootstrap popover 没有显示我的页面
这是我的 HTML:
<button type="button" class="btn btn-lg btn-danger"
data-toggle="popover" title="Popover title"
data-content="And here's some amazing content. It's very engaging. Right?">
Click to toggle popover
</button>
这是我添加的所有 js 和 css 文件:
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/bootstrap.min.css")
@Styles.Render("~/Content/bootstrap.css")
@Styles.Render("~/Content/bootstrap-theme.css")
@Styles.Render("~/Content/css/default.css")
@Scripts.Render("~/Scripts/jquery-2.1.1.js")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/bootstrap.js")
谁能告诉我问题出在哪里?
PS:有没有办法不用写任何脚本代码就可以让弹出窗口工作?
最佳答案
来自Docs on Popovers :
Opt-in functionality:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
所以你必须像这样在 JavaScript 中手动调用 .popover()
:
$("[data-toggle=popover]").popover();
或者你可以使用任何你想要的选择器
这是一个使用 StackSnippets 的例子。
$("[data-toggle=popover]").popover();
body {
padding: 50px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-lg btn-danger"
data-toggle="popover" title="Popover title"
data-content="And here's some amazing content. It's very engaging. Right?">
Click to toggle popover
</button>
注意:这类似于Bootstrap Tooltip Not Showing Up的答案。
关于javascript - Bootstrap 弹出窗口不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26562366/