使用bootstrap的dropdown部件時報錯：error：Bootstrap dropdown

Scorpion 發布于2019-04-23 13:26 / 900人閱讀

摘要：前言前端小白一枚，剛注冊博客，先發個學習過程中新碰到小問題試試水吧摘要最近在學習，偶然碰到了一個小問題，網站也沒有做過多的解釋，今天分享給大家。保存好刷新網頁再試了一下，發現還是不行，仍報了剛才的錯誤。最后貼上一個參考資料路徑

前言：前端小白一枚，剛注冊博客，先發個學習過程中新碰到小問題試試水吧~

摘要：最近在學習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啟動時報錯

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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