Bootstrap弹出窗口无法正常工作 [英] Bootstrap popover is not working
本文介绍了Bootstrap弹出窗口无法正常工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
bootstrap popover没有显示我的页面
The bootstrap popover is not showing up my page
这是我的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文件:
Here are all the js and css files I've added:
@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")
有人能告诉我问题出在哪里吗?
Can someone tell me where is the problem?
PS:有没有办法让popover工作而不必编写任何脚本代码?
PS: Is there a way to get the popover to work without having to write any script code?
推荐答案
来自关于弹出窗口的文件:
选择加入功能
出于性能原因,t他选择使用Tooltip和Popover data-apis,这意味着你必须自己初始化。
所以你必须在JavaScript中手动调用 .popover()
,如下所示:
So you must call .popover()
manually in JavaScript like this:
$("[data-toggle=popover]").popover();
或者你可以使用你想要的任何选择器
Or you can use whatever selector you want
$("[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 工具提示未显示的答案
Note: This is similar to the answer to Bootstrap Tooltip Not Showing Up
这篇关于Bootstrap弹出窗口无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文