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

前言:前端小白一枚,刚注册博客,先发个学习过程中新碰到小问题试试水吧~

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

问题描述:使用bootstrap的dropdown部件,打开网页后点击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="#" role="button" aria-haspopup="true" aria-expanded="false">Animation</a><div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">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

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=ha0ii1j&title=使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370939.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#中的三层

三层架构(3-tier architecture) 通常意义上的三层架构就是将整个业务应用划分为&#xff1a;界面层&#xff08;User Interface layer&#xff09;、业务逻辑层&#xff08;Business Logic Layer&#xff09;、数据访问层&#xff08;Data access layer&#xff09;。区分层次的…

研究僵局–第3部分

在本系列的前两个博客&#xff08; 第1部分和第2部分&#xff09;中 &#xff0c;我演示了如何创建一段死锁的不良代码&#xff0c;然后使用该代码展示了进行线程转储的三种方式。 在这个博客中&#xff0c;我将分析线程转储以找出错误的原因。 下面的讨论同时涉及本系列第1部…

qq2009显ip版怎么用_毛孔粗大怎么破?用对方法,轻松改善显皮肤嫩滑

脸上毛孔粗大怎么破&#xff1f;超级烦恼尤其是一到秋季脸上经常油腻腻的为什么会毛孔粗大呢&#xff1f;毛孔粗大怎么破&#xff1f;用对方法&#xff0c;轻松改善显皮肤嫩滑 当皮肤老旧角质积聚越多&#xff0c;会使肌肤变厚、变粗糙&#xff0c;毛孔变粗大&#xff0c;肌肤也…

linux 账号密码 字段,详解Linux中的用户密码管理命令passwd和change

passwd修改用户密码参数-k 保持未过期身份验证令牌-l 关闭账号密码。效果相当于usermod -L&#xff0c;只有root才有权使用此项。-u 恢复账号密码。效果相当于usermod -U&#xff0c;同样只有root才有权使用。-g 修改组密码。gpasswd的等效命令。-f 更改由finger命令访问的用户…

hello程序的运行过程-从计算机系统角度

hello程序的运行过程-从计算机系统角度 1、gcc编译器驱动程序读取源程序文件hello.c&#xff0c;并将它翻译成一个可执行目标文件hello。翻译过程分为四个阶段&#xff1a;预处理阶段&#xff0c;编译阶段&#xff0c;汇编阶段&#xff0c;链接阶段。 2、初始时&#xff0c;she…

靠谱的div引入任何外链内容

靠谱的div引入任何外链内容 开发中经常要在div中引入一个页面,该页面可能是内部页面,可能是一个外部页面,也可能只是一个域名获取的请求. 对于内部页面的加载,建议使用jquery的load函数,如: 1 $("#targetId").load("someUrl/templatePage.html"); 对于外…

Eclipse对类固醇的重构

在上一篇有关常见Java违规的文章中 &#xff0c;我列出了Java开发人员容易犯的一系列错误。 在重构Java项目以解决这些违规问题的同时&#xff0c;我广泛使用了Eclipse的重构功能来快速更改代码。 下面是这种重构技术的汇编。 1.在块级语句周围添加花括号 用{curly braces}包装…

微服务发展的历史_“美丽新羌 光照未来” 新羌社区开展微视频宣传片拍摄活动...

见圳客户端、深圳新闻网讯(记者 王志明 通讯员 甘力宇)为记录新羌社区的历史变迁&#xff0c;弘扬新羌人与时俱进、开拓进取的创新精神&#xff0c;宣传社区党委、社区一线工作者及社区居民的感人事迹和精神&#xff0c;展现深圳社区发展新风貌&#xff0c;2020年10月&#xff…

linux中扫描仪驱动程序,VueScan For Linux通用扫描仪驱动下载_VueScan For Linux通用扫描仪驱动官方下载-太平洋下载中心...

VueScan For Linux通用扫描仪驱动是一款提供 Linux 使用的图片扫描工具&#xff0c;它具有各种高级硬件能力使用非常广泛的的扫描仪软件&#xff0c;支持EPSon、HP、Nikon 和Canon 品牌的扫描仪设备&#xff0c;具有优良的色彩保真度和色彩平衡&#xff0c;可以让用户比平板扫描…

HTML head 头部中的各类标签

HTML <head> 头部 <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本&#xff08;scripts&#xff09;, 样式文件&#xff08;CSS&#xff09;&#xff0c;及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <style&g…

CSS变量(自定义属性)实践指南

本文翻译自&#xff1a;https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 Sass和Less这样的预处理器&#xff0c;让…

避免使用FOR –反假战役

您是否想知道FOR如何影响您的代码&#xff1f; 他们如何限制您的设计&#xff0c;更重要的是如何将您的代码转换为无人为含义的多行代码&#xff1f; 在这篇文章中&#xff0c;我们将看到如何将for的简单示例&#xff08;由Francesco Cirillio提供- 反if活动&#xff09;转换为…

ffmpeg-win32-v3.2.4 下载_MVBOX下载|MVBOX 7.1.0.4官方版

还是要强调一句&#xff0c;现在市面上很多盗版或者免费的软件&#xff0c;都给一些黑客留下了暗门&#xff0c;所以大家还是支持正版比较好&#xff0c;不要贪图便宜使用盗版软件造成不好的后果。MVBOX播放器功能介绍1、在线卡拉OK2、虚拟摄像头3、画面调色板4、摄像头抠像5、…

linux重启鼠标键盘服务,Linux 关闭服务后 鼠标 键盘用不了

大部分情况下我们做实验都是使用虚拟机&#xff0c;但是个人比较本实在太老了&#xff0c;性能有限&#xff0c;所以虚拟机里面的系统启动神慢&#xff0c;怎么办&#xff1f;把系统中自己用不到的服务全部关闭掉呗&#xff0c;如下for i in chkconfig --list | awk {print $1}…

拖拽功能-jquery

<!DOCTYPE html><html lang"en"><head> <meta charset"UTF-8"> <title>拖拽</title> <style> .nav { width: 200px; height: 200px; border: 1px solid blac…

PNG,GIF,JPG的区别及如何选

GIF&#xff1a; 1&#xff1a;256色 2&#xff1a; 无损&#xff0c;编辑 保存时候&#xff0c;不会损失。 3&#xff1a;支持简单动画。 4&#xff1a;支持boolean透明&#xff0c;也就是要么完全透明&#xff0c;要么不透明 JPEG&#xff1a; 1&#xff1a;millions o…

饿了么商家电脑版_饿了么企业版荣膺“2020中国十大影响力人力资源品牌”大奖...

11月6日&#xff0c;由MeetHR GROUP主办的2020大中华地区HRVP高峰论坛在上海落幕。饿了么企业版凭借自身产品在人力资源管理与服务方面的创新实践&#xff0c;荣获“2020 中国十大影响力人力资源品牌(薪酬福利类)”殊荣。本次评选&#xff0c;据主办方介绍&#xff0c;旨在激励…

用信号量锁定:一个例子

并发是带来有趣挑战的一个方面。 如果处理不当&#xff0c;会导致种族状况&#xff0c;这会使人们感到困惑&#xff0c;因为这些问题有时会突然出现&#xff0c;并且有时会完美无缺地发挥作用。 当处理访问公共资源的并发线程时&#xff0c;Java语言提供了许多处理竞争条件的方…

navicat连接linux远程数据库,使用Navicat forMySql远程连接Linux 系统上的数据库

使用Navicat for MySql远程连接Linux 系统上的数据库解决mysql"Access denied for userrootIP地址"问题1.问题说明&#xff1a;在MYSQL 中&#xff0c;用远程软件登陆服务器&#xff0c;有时出现&#xff1a;Access denied for user rootlocalhost出现这种问题&#…

HTTPS 通俗简介

为什么需要HTTPS 9个问题搞懂 https 来源 HTTP是明文传输的&#xff0c;也就意味着&#xff0c;介于发送端、接收端中间的任意节点都可以知道你们传输的内容是什么。这些节点可能是路由器、代理 等。 举个最常见的例子&#xff0c;用户登陆。用户输入账号&#xff0c;密码&am…