使用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 ...
随机推荐
- Android 9.0适配遇到的问题1
文章同步自javaexception 本周在适配Android 9.0,过程中碰到了小问题 问题1: SSL handshake timed out 解决办法: Android 9.0 开始,默认不允 ...
- IIS网站部署后,程序常见错误记录
1.网站部署步骤 开启IIS服务.打开IIS管理器.添加网站.修改程序池(4.0).部署完成. 2.常见问题记录(问题记录比较模糊,仅做参考) (1).对于web.config连接数据库的配置为win ...
- Apache Flink 介绍
原文地址:https://mp.weixin.qq.com/s?__biz=MzU2Njg5Nzk0NQ==&mid=2247483660&idx=1&sn=ecf01cfc8 ...
- SQL 高效运行注意事项(一)
设计SQL后,应使用explain命令检查SQL,看是否使用到索引,是否存在filesort,重点检查检索的行数(rows)是否太大. 一般来说. 1.rows<1000,是在可接受的范围内的. ...
- MySQL 数据库死锁
数据库死锁 死锁的解决办法(1) 执行下面SQL,先查看哪些表被锁住了: select b.owner,b.object_name,a.session_id,a.locked_mode from v$ ...
- 5. VIM 系列 - 文件管理
目录 目录树 文件检索 ctrlp.vim fzf.vim 目录树 安装 nerdtree.vim 插件 Plug 'scrooloose/nerdtree', { 'on': 'NERDTreeTo ...
- 【Netty】(6) ---源码ServerBootstrap
[Netty]6 ---源码ServerBootstrap 之前写了两篇与Bootstrap相关的文章,一篇是ServerBootstrap的父类,一篇是客户端Bootstrap类,博客地址: [Ne ...
- Sublime Text 3下载安装以及安装HTML-CSS-JS Prettify代码格式化插件
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Sublime Text的安装以及安装插件步骤. 下载Sublime Text 官网地址:http://www.sublimetex ...
- RabbitMQ消息队列(一)-RabbitMQ的优劣势及产生背景
本篇并没有直接讲到技术,例如没有先写个Helloword.我想在选择了解或者学习一门技术之前先要明白为什么要现在这个技术而不是其他的,以免到最后发现自己学错了.同时如果已经确定就是他,最好先要了解下技 ...
- Asp.Net Core 轻松学-项目目录和文件作用介绍
前言 上一章介绍了 Asp.Net Core 的前世今生,并创建了一个控制台项目编译并运行成功,本章的内容介绍 .NETCore 的各种常用命令.Asp.Net Core MVC 项目文件目录 ...