解决使用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常见注意事项
Jan 01 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 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 addslashes 函数详细分析说明
2009/06/23 PHP
php数组添加元素方法小结
2014/12/20 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
PHP中16个高危函数整理
2019/09/19 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
javascript基本算法汇总
2016/03/09 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
js实现计算器功能
2020/08/10 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
用Python编写简单的定时器的方法
2015/05/02 Python
python妹子图简单爬虫实例
2015/07/07 Python
简单实现python进度条脚本
2017/12/18 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
深入了解Django View(视图系统)
2019/07/23 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
为数据库创建索引都需要注意些什么
2012/07/17 面试题
保密工作实施方案
2014/02/24 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
2014年稽查工作总结
2014/12/20 职场文书
实习介绍信范文
2015/05/05 职场文书
雨中的树观后感
2015/06/03 职场文书
2016小学新学期寄语
2015/12/04 职场文书