为什么bootstrap的jquery脚本不能在我的网页上运行？ [英] Why won't bootstrap's jquery scripts work on my webpage?
问题描述
我正在尝试添加一个由按钮触发的弹出窗口，使用bootstrap 4.按钮代码直接从bootstrap复制，并且通过单击（也来自bootstrap）使弹出窗口被解除的javascript元素是粘贴在bootstrap的启动器模板的三个强制性jQuery脚本下 - 在正文结束标记之前。下面的代码不是我的网站，而是另一个我尝试隔离问题的html文件。它只包含来自bootstrap的popover按钮和javascript代码，没有别的。我完全按照指示，所以我不确定它出了什么问题。 popover dismiss脚本定位一个名为popover-dismiss的类，所以我将该类添加到上面的按钮。单击按钮时应该会出现一个小窗口。相反，单击按钮时没有任何反应。如果熟悉Bootstrap的人（我是新手）可以看看并告诉我他们是否能发现问题，我将非常感激！
我尝试过：
<！doctype html>
< html>
< body>
< button type =buttonclass =popover-dismissdata-container =bodydata-toggle =popoverdata-placement =rightdata-content =这是一个弹出窗口。 >
popover test
< / button>
<！ - 首先是jQuery，然后是Popper.js，然后是Bootstrap JS - >
< script src =https://code.jquery.com/jquery-3.3.1.slim.min.jsintegrity =sha384-q8i / X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizocrossorigin = 匿名 >< /脚本>
< script src =https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.jsintegrity =sha384-ZMP7rVo3mIykV + 2 + 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK / l8WvCWPIPm49crossorigin =anonymous>< / script>
< script src =https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.jsintegrity =sha384-ChfqqxuZUCnJSK3 + MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW / JmZQ5stwEULTycrossorigin =anonymous >< /脚本>
< script> jQuery（'。popover-dismiss'）。popover（{
trigger：'focus'}）
< / script>
< / body>
< / html>
根据此处提供的内容，看起来代码缺少样式表
< link rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css >
使用Bootstrap样式表更新 [ ^ ]
I'm trying to add a popover that gets triggered by a button, using bootstrap 4. The button code is copied straight from bootstrap, and the javascript element that makes the popover get dismissed by clicking, (also from bootstrap) is pasted right under the three mandatory jQuery scripts from bootstrap's starter template--before the body closing tag. The code below is not my site, but another html file where I tried isolating the problem. It only contains the popover button and javascript code from bootstrap, nothing else. I followed directions exactly, so I'm not sure where it went wrong. The popover dismiss script target a class called "popover-dismiss," so I added that class to the button above. A little window is supposed to appear when you click the button. Instead, nothing happens when you click the button. If someone who is familiar with Bootstrap (I'm new to it) can take a look and tell me if they can spot the problem, I'd be very grateful!
What I have tried:
<!doctype html>
<html>
<body>
<button type="button" class="popover-dismiss" data-container="body" data-toggle="popover" data-placement="right" data-content="This is a popover.">
popover test
</button>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>jQuery('.popover-dismiss').popover({
trigger: 'focus'})
</script>
</body>
</html>Based on what provided here, look like the code is missing a stylesheet
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
这篇关于为什么bootstrap的jquery脚本不能在我的网页上运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
