使用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 ...
随机推荐
- vue 使用 supermap iclient-classic
1. 2.在组件中: import "@supermap/iclient-classic/libs/SuperMap-8.1.1-16520"; import { MapVLaye ...
- 【死磕 Spring】----- IOC 之 加载 Bean
原文出自:http://cmsblogs.com 先看一段熟悉的代码: ClassPathResource resource = new ClassPathResource("bean.xm ...
- php实现中文字符串无乱码截取
在PHP开发中会经常用到字符串截取,有的时候字符串截取会出现乱码的情况,那么怎么解决这个问题呢,其实也很容易 首先我们要了解关于中英文占多少字节的问题. ASCII码:一个中文汉字占两个字节的空间. ...
- Pytorch实战1:线性回归(Linear Regresion)
GitHub代码练习地址:https://github.com/Neo-ML/MachineLearningPractice/blob/master/Pytorch01_LinearRegressio ...
- 我的第一个MyBatis
(1)步骤:1.新建实体类对象---根据数据库字段来设计,有多少字段设多少变量,变量名要字段名一致. 2.新建配置文件config.xml---主要用来获取数据源,里面内容大致需要填写:数据库驱动 ...
- c语言-自己写的库
一.俗话说算法是程序的灵魂,这下面本人写了一部分常用算法,欢迎大家使用,并提出批评和指正,当然也可以改进或者添加. 1.这是自己实现的算法库头文件 #ifndef _INC_ALGORITHM #de ...
- 巡风源码阅读与分析---Aider.py
之前写过一遍Aider.py,但只是跟着代码一顿阅读没有灵魂,所以重新对它阅读并重新写一遍. 描述 文件位置:aider/aider.py 是用来辅助验证的脚本 官方描述就一句话 代码阅读分析 这个脚 ...
- 《深入理解Java虚拟机》-----第7章 虚拟机类加载机制——Java高级开发必须懂的
代码编译的结果从本地机器码转变为字节码,是存储格式发展的一小步,却是编程语言发展的一大步. 7.1 概述 上一章我们了解了Class文件存储格式的具体细节,在Class文件中描述的各种信息,最终都需要 ...
- ACache【轻量级的开源缓存框架】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 官方介绍 ASimpleCache 是一个为android制定的 轻量级的 开源缓存框架.轻量到只有一个java文件(由十几个类精简 ...
- Linux自定义分隔符IFS引发的文本处理问题
需求是检查指定应用的某些配置所以就写了个脚本,数据文件的内容是这样的:应用名称|IP|端口 多个IP用空格,这样可以生成数组.这个文件的数据是通过部署平台的API获取后自己组装的. #!/bin ...