使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown

Scorpion 发布于2019-04-23 13:26 / 701人阅读

摘要：前言前端小白一枚，刚注册博客，先发个学习过程中新碰到小问题试试水吧摘要最近在学习，偶然碰到了一个小问题，网站也没有做过多的解释，今天分享给大家。保存好刷新网页再试了一下，发现还是不行，仍报了刚才的错误。最后贴上一个参考资料路径

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

摘要：最近在学习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">Animationa>
     <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Actiona>
     <a class="dropdown-item" href="#">Another actiona>
     <a class="dropdown-item" href="#">Something else herea>
     <div class="dropdown-divider">div>
     <a class="dropdown-item" href="#">Separated linka>
     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

云服务器 GPU云服务器 Dropdown Bootstrap使用手册 bootstrap的 tomcat启动时报错

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1870.html

Bootstrap Mega Menu

摘要：完整的代码放在。鼠标事件组件通过点击打开菜单，不符合大菜单场景，需要修改成，鼠标移入时打开菜单，鼠标移出时关闭菜单。鼠标移入时，显示菜单。自适应屏幕宽度当屏幕尺寸小于像素时，菜单会自动折叠，恢复默认行为，通过点击来打开菜单。完整的代码放在 jsFiddle Bootstrap Mega Menu 。我们管 Mega Menu 叫做大菜单吧，巨、超级啥的，不足以彰显我们的草根贵气。 ...

booster 2019-08-21 17:19 评论0 收藏0
下拉多选框

摘要：基于来制作的一个下拉多选控件使用前需加载库样式和还有。由于我觉得有趣一点，把项目迁移到了，地址如下 Bootstrap Selection 基于Bootstrap.dropdown来制作的一个下拉多选控件使用前需加载JQuery、Bootstrap库（样式和JS）还有underscore js。如果不需要动态加载下拉项可不加载underscore js 例子简单使用 ...

Lyux 2019-08-21 10:20 评论0 收藏0
Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分

摘要：修复后得到合法的后在由布局引擎建立相应的对象。在标签放置于标签之后时，源码被所有浏览器泛指上常见的修复为正常形式，即。上一篇之模板的学习之路源码分析之部分下一篇之模板的学习之路主题布局配置上篇我们将 body 标签主体部分进行了简单总览，下面看看最后的脚本部门。页面结尾部分（Javascripts 脚本文件）我们来看看代码最后的代码，摘取如下： ...

piglei 2019-08-20 10:30 评论0 收藏0
webpack多页应用架构系列（十）：如何打造一个自定义的bootstrap

摘要：我个人惯用的是，因此本文以为例来介绍如何打造一个自定义的。引入全局的方法请看我之前的这篇文章多页应用架构系列四老式插件还不能丢，怎么兼容，我的脚手架项目也是使用的这套方案。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000007043716如果您对本系列文章感兴趣，欢迎关注订阅...

jindong 2019-08-20 11:24 评论0 收藏0
bootstrap4.0 css架构

摘要：原子性的默认变量一般是用来设置默认值，然后根据需求来覆盖的。语义化的变量名，值为直接的属性值。组件文件互不引用。组合有几个入口文件对组件进行按顺序的引入，形成不同的专用，形成完整可用的样式，注意引用顺序。原子性 sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的。覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可存放变量的文件。语义化的变量名，值为直接的属性值。 ...

solocoder 2019-08-30 15:53 评论0 收藏0