解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题


Posted in Javascript onAugust 30, 2018

最近小编在学习bootstrap,偶然碰到了一个小问题,bootstrap网站也没有做过多的解释,今天分享给大家。

问题描述:使用bootstrap的dropdown部件,打开网页后点击dropdown,报了如下错误:error:Bootstrap dropdown require Popper.js

解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题

bootstrap代码(只要是含dropdown部件的都可以啦)为:

<ul class="nav nav-tabs">
  <li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button" aria-haspopup="true" aria-expanded="false">Animation</a>
   <div class="dropdown-menu">
   <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a>
   <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a>
   <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a>
   <div class="dropdown-divider"></div>
   <a class="dropdown-item" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a>
   </div>
  </li>
</ul>

看错误提示,应该是要导入Popper.js文件,网上查了下方法,可以直接工程目录下使用npm安装:npm install --save popper.js

安装好后,我们可以在目录下找到node_modules文件夹,然后将popper.js文件引入html()。

保存好刷新网页再试了一下,发现还是不行,仍报了刚才的错误。于是我检查了一下node_modules->dist文件夹下的popper.js文件,发现有3个这样的文件(esm和umd文件夹下也各有一个popper.js文件)。再于是我把它们分别引入后再操作一下dropdown部件,最后在引入umd文件下的popper.js后^_^,bingo--终于是可以用了YY。虽然不知道为啥会这样,但也算是成功解决了问题。

最后贴上一个参考资料路径:https://github.com/twbs/bootstrap/issues/23381

总结

以上所述是小编给大家介绍的使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
jquery实现拖动效果
Aug 10 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
JS的深浅复制详细
Oct 16 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 #Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 #Javascript
详解React native fetch遇到的坑
Aug 30 #Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 #Javascript
原生JS实现简单的倒计时功能示例
Aug 30 #Javascript
JavaScript fetch接口案例解析
Aug 30 #Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 #Javascript
You might like
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
javascript实现日历效果
2019/06/17 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python join方法使用详解
2019/07/30 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
python IP地址转整数
2020/11/20 Python
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
护士自我鉴定总结
2014/03/24 职场文书
德育标兵事迹材料
2014/08/24 职场文书
场地使用证明模板
2014/10/25 职场文书
2014年物流工作总结
2014/11/25 职场文书
教师个人成长总结
2015/02/11 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书