解决使用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 相关文章推荐
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
详解js中let与var声明变量的区别
Apr 05 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/02/04 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php图像处理类实例
2015/07/28 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
VsCode插件整理(小结)
2017/09/14 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python如何使用unittest测试接口
2018/04/04 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
女大学生个人求职信
2013/12/09 职场文书
先进集体事迹材料
2014/02/17 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏