今天想从Bootstrap中拷贝一段代码到自己的项目中,结果发现原封不动的官方代码,拷贝到自己本地就是不能用,记录下解决办法。
问题现象
官方的下拉框代码如下
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
将其拷贝到项目中如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<title>Bootstrap test</title>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</body>
</html>
注意这里我已经在<head>
中引入了事先下载到本地的Bootstrap官方的css和js,但是没有效果,点击下拉框按钮根本就没有内容弹出来。
问题原因
于是用Chrome自带的调试器来检查下。
在Event Listener Breakpoints
下找到Sources
,选择Mouse
下面的click
,这样只要页面中出发了鼠标点击事件就会触发断点,进而可以单步执行找到出问题的JS代码。
我在官网上进行了上面的操作,结果发现程序进入了一段jQuery脚本,我恍然大悟(其实是Google了很久被大神提醒才意识到的),Bootstrap是基于jQuery的,单单导入Bootstrap的JS是不够的,还得导入jQuery的JS,而且jQuery必须在Bootstrap之前导入。
解决办法
于是解决办法也很简单,修改下<head>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="./js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<title>Bootstrap test</title>
</head>
之后成功实现官网的效果。
其实所有Bootstrap的JS效果都是基于jQuery的,所以官方的代码没达到效果可以首先看看有没有成功导入两个JS。
我是T型人小付,一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我,如果有问题欢迎在底下的评论区交流,谢谢。