如何让 Twitter Bootstrap jQuery 元素(工具提示、弹出窗口等)正常工作?
我一直在 Dreamweaver 中使用 Twitter Bootstrap 测试页面,但我绝对无法让任何类型的弹出窗口、工具提示或其他 Bootstrap jQuery 好东西工作。我已经从演示页面复制了代码,倒入源代码,直接链接到所有正确的 JavaScript 文件,但仍然一无所获。 CSS 工作正常,只是没有动画。
演示页面提到了这段代码:
$('#example').popover(options)
但我不知道如何处理类似的东西,因为我在任何工作站点中都没有看到类似的东西。
如果有人能为我缺少的(可能)微小链接提供任何建议,我将不胜感激。
编辑
我在发布此内容后发现了以下代码片段:
$(document).ready(function() {
$("a[rel=popover]")
.popover({
offset: 10
})
.click(function(e) {
e.preventDefault()
})
});
它触发了弹出窗口!不过,我从未在我看到的任何工作网站的源代码中看到过类似的内容。真的希望 Bootstrap 文档能让像我这样的 jQuery 新用户更清楚地了解这个微小的细节。
I've been playing with the Twitter Bootstrap test page in Dreamweaver and I absolutely can not get any sort of popover, tooltip, or other Bootstrap jQuery goodie to work. I've copied code from the demo page, poured over the source code, have direct links to all the correct JavaScript files, and still nothing. The CSS works fine though, just none of the animation.
The demo page mentions this code for something:
$('#example').popover(options)
But I have no idea what to do with something like that because I didn't see anything like that in any working site.
If anyone could give me any suggestions for the (probably) tiny link I'm missing, I'd greatly appreciate it.
EDIT
I found the following code snippet after posting this:
$(document).ready(function() {
$("a[rel=popover]")
.popover({
offset: 10
})
.click(function(e) {
e.preventDefault()
})
});
And it got the popovers triggering! I never saw anything like that in the source code of any of the working sites I saw though. Really wish the Bootstrap documentation could have made that tiny detail a bit clearer for new jQuery users like me.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
对于来自 Google 的人:
您可以使用以下代码让工具提示和弹出框像其他 Bootstrap 插件一样自动工作:
然后您可以像平常一样使用数据属性:
这就是 Bootstrap 文档所说的 data-api 的含义。这些插件是“选择加入”的。
For people coming here from Google:
You can get tooltip and popover to work automatically like the other Bootstrap plugins with the following code:
You can then use data attributes like normal:
This is what the Bootstrap docs mean when it says that the data-api for these plugins are "opt in".
您需要为要在鼠标悬停时显示弹出框的元素指定一个 id 或类。这是一个例子:
You need to specify an id or class for the element you want to display a popover when it's hovered over. Here's an example:
如果您想要引导工具提示,那么:
如果您想要 Jquery 工具提示,那么:
HTML 在这两种情况下将保持相同:
If you want bootstrap tooltip then:
If you want Jquery tooltip then:
HTML will remain same in both the case: