使用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;肌肤也…

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

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

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;让…

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

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

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

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

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…

CSS Modules入门教程

为什么引入CSS Modules 或者可以这么说&#xff0c;CSS Modules为我们解决了什么痛点。针对以往我写网页样式的经验&#xff0c;具体来说可以归纳为以下几点&#xff1a; 全局样式冲突 过程是这样的&#xff1a;你现在有两个模块&#xff0c;分别为A、B,你可能会单独针对这两…

热电偶校验仪_热电偶校验方法_热电偶的使用方法及维修经验

一、遵照仪表接线图进行准确接线通电后&#xff0c;仪表先是显示仪表的热电偶分度号&#xff0c;接着显示仪表量程范围&#xff0c;再测仪表显示设定温度&#xff0c;数显仪表显示测量温度。若仪表数码管显示不是发热体的温度&#xff0c;而显示“OVER”、“0000”或“000”等状…

Java 7:满足Fork / Join框架

JSR-166&#xff08;y&#xff09;是Java 7中包含的此新功能的正式名称。如果您发现名称中有一个“ y”&#xff0c;这是因为自Java 5起就添加了JSR-166&#xff08;并发实用程序&#xff09; &#xff0c;但它不会就此停止&#xff0c;因为已经有计划在JSR-166&#xff08;e&a…

css3总结之居中

居中在前端布局上很常见&#xff0c;也很常用&#xff0c;也是最基本的技巧。居中效果在方向控制上基本可以分解成水平居中&#xff0c;垂直居中和水平垂直居中。 针对调整的元素不同&#xff0c;具体的处理方式上有些差异。这里我们先不讲绝对定位下的居中&#xff0c;绝对定位…

福州java培训哪里好_南通java培训哪家好

渡课IT教育成立于2006年&#xff0c;14年来&#xff0c;我们累计输送学员达 6000 &#xff0c;其中南通地区输送50%&#xff0c;上海 40%&#xff0c;其他地区 10%&#xff0c;学员1年后的平均薪水达 9860 元&#xff1b;受到1000用人单位的赞誉与支持。Java开发的需求量在北上…

研究僵局–第2部分

调查死锁时最重要的要求之一就是要研究死锁。 在我的上一个博客中&#xff0c;我编写了一个名为DeadlockDemo代码&#xff0c;该代码使用一堆线程在一系列银行帐户之间转移随机数&#xff0c;然后陷入僵局。 该博客运行该代码以演示获取线程转储的几种方法。 线程转储只是一个…

连锁便利店管理系统有什么用

连锁便利店管理系统对于连锁便利店的运营和管理非常有用。以下是一些常见的用途&#xff1a; 1. 库存管理&#xff1a;连锁便利店通常需要管理多个门店的库存&#xff0c;管理系统可以帮助实时掌握各个门店的库存情况&#xff0c;包括商品数量、进货记录、库存调拨等。这样可以…