解决使用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 相关文章推荐
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
javascript自定义加载loading效果
Sep 15 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
解决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得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php防止sql注入的方法详解
2017/02/20 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
JS实现self的resend
2010/07/22 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
python中最小二乘法详细讲解
2021/02/19 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
四查四看剖析材料
2014/02/14 职场文书
领导失职检讨书
2014/02/24 职场文书
个人承诺书怎么写
2014/05/24 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
会计人员岗位职责
2015/02/03 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
演讲开场白和结束语
2015/05/29 职场文书
Python经常使用的一些内置函数
2022/04/11 Python
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python