为什么我的Bootstrap弹出窗口不起作用？

我正在尝试使用Bootstrap popover。所以我将示例中的确切代码复制到了我的网站中，但遗憾的是这些代码无效。我粘贴下面的完整代码并创建了a jsfiddle here。为什么我的Bootstrap弹出窗口不起作用？

我试图把它放在一个引导容器和行和列，但似乎没有工作。

有没有人如何让那小提琴奏效？欢迎所有提示！

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
</head> 
<body> 
<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> 
</body> 
</html>

来源

2015-05-05 kramer65

@Gunaseelan你不需要，如果你包括'bootstrap.min.js'就像OP是。 –

我已经更新了您的JSFiddle演示以包含jQuery，否则它会提供有关jQuery丢失的错误（尽管存在于您的代码段中）。 –

LOL，6在10分钟内回答同样的事情：'$（'[data-toggle =“popover”]'）。popover（）' –

你忘了这一点： http://getbootstrap.com/javascript/#opt-in-functionality

出于性能考虑，工具提示和酥料饼的数据API是选择加入，这意味着你必须自己初始化它们。初始化页面上的所有提示

的一种方法是通过它们的数据切换属性来选择它们：

$(function() { 
    $('[data-toggle="popover"]').popover() 
})

来源

2015-05-05 11:15:42 Seblor

由于这是链接并引用源的唯一答案， 1给你。 –

您需要在<head>

$(function() { 
$('[data-toggle="popover"]').popover() 
})

来源

2015-05-05 11:11:05 khurram

添加此code你可以在button添加id或class属性，不是调用该按钮的酥料饼的方法。这是工作小提琴。 http://jsfiddle.net/uqLor9ze/。

这里是fiddle

$('#pop').popover();

来源

2015-05-05 11:11:52 Kamran

示例代码应该添加

$(function() { 
    $('[data-toggle="popover"]').popover() 
});

工作示例here

来源

2015-05-05 11:12:00 vamsikrishnamannem

出于性能方面的原因，你应该自己用来初始化酥料饼：

<script> 
$(function() { 
    $('[data-toggle="popover"]').popover() 
}) 
</script>

Reference

一定要在引导之前添加jQuery库。

jsFiddle

来源

2015-05-05 11:12:45 jmgross

你失踪函数调用到您的小提琴和jQuery库还缺少

我已经添加缺少的依赖到你的例子

检查小提琴：https://jsfiddle.net/L41g98qx/9/

这里是一个酥料饼函数调用

$(function() { 
    $('[data-toggle="popover"]').popover() 
})

下面的文字是从getbootstrap复制。COM，这里是他们想要说的酥料饼的插件什么

选择加入功能

出于性能考虑，工具提示和酥料饼的数据API是选择加入，这意味着你必须初始化它们你自己。初始化页面上的所有popovers

一种方法是选择他们通过他们的数据切换属性：复制

$(function() { $('[data-toggle="popover"]').popover() })

来源

2015-05-05 11:16:04

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?" id="example">Dismissible popover</a>

此方法需要

$('#example').popover('show');

DEMO

来源

2015-05-05 11:20:21 sheshadri

为什么我的Bootstrap弹出窗口不起作用？

回答

相关问题