使用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
使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js的更多相关文章
- 打包新版本上传到AppStore时报错 ERROR ITMS-90034:
今天打包新版本上传到AppStore时报错 ERROR ITMS-90034:"Missing or invalid signature.The bundle'com.xxx.xxx' at ...
- 运行项目npm run dev时报错: ~Error: Cannot find module 'webpack-cli/bin/config-yargs', 原因是
webpack@3.X运行项目npm run dev时报错: ~Error: Cannot find module 'webpack-cli/bin/config-yargs' 我的原因是: web ...
- MySQL 从 5.5 升级到 5.6,启动时报错 [ERROR] Plugin 'InnoDB' init function returned error
MySQL 从 5.5 升级到 5.6,启动时报错: [ERROR] Plugin 'InnoDB' init function returned error. [ERROR] Plugin 'Inn ...
- 安装模块时报错“error: Microsoft Visual C++ 14.0 is required…”
安装pymssql时报错:在安装的过程中遇到了“error: Microsoft Visual C++ 14.0 is required…” 解决办法: 进入https://www.lfd.uci.e ...
- 执行automake时报错 error while making link: Operation not supported
执行automake时报错: [root@localhost project]# automake --add-missingconfigure.in: installing `./install-s ...
- javah生成jni头文件时报错 Error: cannot access android.support...
javah生成jni头文件时报错: Error: cannot access android.support.v7.app.AppCompatActivity class file for andro ...
- 使用cocoapods install友盟时报错Error installing UMengAnalytics
报错: [!] /usr/bin/unzip /Users/soindy/Documents/SmartThermo/ios/SmartThermo/Pods/UMengAnalytics/file. ...
- Uncaught Error: Bootstrap dropdown require Popper.js
Bootstrap 要求Popper.js 如果安装了Popper.js还报错,肯定就是Popper的问题 https://cdn.bootcss.com/popper.js/1.12.5/umd/p ...
- Bootstraps 4 引入报错 Error: Bootstrap tooltips require Tether
问题: 解决办法 (http://github.hubspot.com/tether/) Bootstrap 4 needs Tether, so you need to include tether ...
随机推荐
- Git常用简介
Git是什么 git是目前最先进的分布式版本控制系统,它的核心架构如下图所示,分为四个核心区域.git的常用命令主要是关于这四个区域. 本地工作区-work 本地工作区就是我们实际电脑中的文件夹以及文 ...
- NSTimer循环引用的几种解决方案
前言 在iOS中,NSTimer的使用是非常频繁的,但是NSTimer在使用中需要注意,避免循环引用的问题.之前经常这样写: - (void)setupTimer { self.timer = [NS ...
- Linux 使用 top 命令查看系统的运行情况
top命令显示界面 top命令默认在一个特定间隔(3秒)后刷新显示.要手动刷新,用户可以输入回车或者空格. top - 18:32:45 up 230 days, 2:01, 1 user, load ...
- #Java学习之路——基础阶段二(第一篇)
我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...
- ASP.NET Core Web API 集成测试中使用 Bearer Token
在 ASP.NET Core Web API 集成测试一文中, 我介绍了ASP.NET Core Web API的集成测试. 在那里我使用了测试专用的Startup类, 里面的配置和开发时有一些区别, ...
- 【机器学习】--鲁棒性调优之L1正则,L2正则
一.前述 鲁棒性调优就是让模型有更好的泛化能力和推广力. 二.具体原理 1.背景 第一个更好,因为当把测试集带入到这个模型里去.如果测试集本来是100,带入的时候变成101,则第二个模型结果偏差很大, ...
- linux(centos)上安装mysql教程,为需要远程登录的用户赋予权限
最近把之前学生时代的win server换成了linux(centos)系统,因为win对于部署一些项目时候比较麻烦,直接入正题 1.准备阶段 我使用xshell工具管理服务器,相应下载和安装自行百度 ...
- Android上的Badge,快速实现给应用添加角标
应用角标是iOS的一个特色,原生Android并不支持.或许是因为当时iOS的通知栏比较鸡肋(当然现在已经改进了很多),而Android的通知栏功能强大?所以才出现了一方依赖于数字角标,一方坚持强大的 ...
- 如果你也打算学习 Spring Cloud
说到 Spring Cloud,那肯定要少不了提一下微服务框架,所谓的微服务框架就是把负责的功能拆分成比较小.功能比较单一的服务独立处理,例如单点登录服务.支付服务.订单服务等,当然如果订单功能比较复 ...
- springMVC报404,没有显示地址
正常报404会显示你的错误地址信息,而针对本问题 如果你使用的是springMVC框架,这就代表你的请求被拦截了