使用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

本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=ha0ii1j&title=使用bootstrap的dropdown部件時報錯:error:Bootstrap dropdown require Popper.js

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370939.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370939.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370939.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

C#中的三層

三層架構(3-tier architecture) 通常意義上的三層架構就是將整個業務應用劃分為&#xff1a;界面層&#xff08;User Interface layer&#xff09;、業務邏輯層&#xff08;Business Logic Layer&#xff09;、數據訪問層&#xff08;Data access layer&#xff09;。區分層次的…

研究僵局–第3部分

在本系列的前兩個博客&#xff08; 第1部分和第2部分&#xff09;中 &#xff0c;我演示了如何創建一段死鎖的不良代碼&#xff0c;然后使用該代碼展示了進行線程轉儲的三種方式。 在這個博客中&#xff0c;我將分析線程轉儲以找出錯誤的原因。 下面的討論同時涉及本系列第1部…

qq2009顯ip版怎么用_毛孔粗大怎么破?用對方法,輕松改善顯皮膚嫩滑

臉上毛孔粗大怎么破&#xff1f;超級煩惱尤其是一到秋季臉上經常油膩膩的為什么會毛孔粗大呢&#xff1f;毛孔粗大怎么破&#xff1f;用對方法&#xff0c;輕松改善顯皮膚嫩滑 當皮膚老舊角質積聚越多&#xff0c;會使肌膚變厚、變粗糙&#xff0c;毛孔變粗大&#xff0c;肌膚也…

linux 賬號密碼 字段,詳解Linux中的用戶密碼管理命令passwd和change

passwd修改用戶密碼參數-k 保持未過期身份驗證令牌-l 關閉賬號密碼。效果相當于usermod -L&#xff0c;只有root才有權使用此項。-u 恢復賬號密碼。效果相當于usermod -U&#xff0c;同樣只有root才有權使用。-g 修改組密碼。gpasswd的等效命令。-f 更改由finger命令訪問的用戶…

hello程序的運行過程-從計算機系統角度

hello程序的運行過程-從計算機系統角度 1、gcc編譯器驅動程序讀取源程序文件hello.c&#xff0c;并將它翻譯成一個可執行目標文件hello。翻譯過程分為四個階段&#xff1a;預處理階段&#xff0c;編譯階段&#xff0c;匯編階段&#xff0c;鏈接階段。 2、初始時&#xff0c;she…

靠譜的div引入任何外鏈內容

靠譜的div引入任何外鏈內容 開發中經常要在div中引入一個頁面,該頁面可能是內部頁面,可能是一個外部頁面,也可能只是一個域名獲取的請求. 對于內部頁面的加載,建議使用jquery的load函數,如: 1 $("#targetId").load("someUrl/templatePage.html"); 對于外…

Eclipse對類固醇的重構

在上一篇有關常見Java違規的文章中 &#xff0c;我列出了Java開發人員容易犯的一系列錯誤。 在重構Java項目以解決這些違規問題的同時&#xff0c;我廣泛使用了Eclipse的重構功能來快速更改代碼。 下面是這種重構技術的匯編。 1.在塊級語句周圍添加花括號 用{curly braces}包裝…

微服務發展的歷史_“美麗新羌 光照未來” 新羌社區開展微視頻宣傳片拍攝活動...

見圳客戶端、深圳新聞網訊(記者 王志明 通訊員 甘力宇)為記錄新羌社區的歷史變遷&#xff0c;弘揚新羌人與時俱進、開拓進取的創新精神&#xff0c;宣傳社區黨委、社區一線工作者及社區居民的感人事跡和精神&#xff0c;展現深圳社區發展新風貌&#xff0c;2020年10月&#xff…

linux中掃描儀驅動程序,VueScan For Linux通用掃描儀驅動下載_VueScan For Linux通用掃描儀驅動官方下載-太平洋下載中心...

VueScan For Linux通用掃描儀驅動是一款提供 Linux 使用的圖片掃描工具&#xff0c;它具有各種高級硬件能力使用非常廣泛的的掃描儀軟件&#xff0c;支持EPSon、HP、Nikon 和Canon 品牌的掃描儀設備&#xff0c;具有優良的色彩保真度和色彩平衡&#xff0c;可以讓用戶比平板掃描…

HTML head 頭部中的各類標簽

HTML <head> 頭部 <head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本&#xff08;scripts&#xff09;, 樣式文件&#xff08;CSS&#xff09;&#xff0c;及各種meta信息。 可以添加在頭部區域的元素標簽為: <title>, <style&g…

CSS變量(自定義屬性)實踐指南

本文翻譯自&#xff1a;https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 轉載請注明出處&#xff1a;葡萄城官網&#xff0c;葡萄城為開發者提供專業的開發工具、解決方案和服務&#xff0c;賦能開發者。 Sass和Less這樣的預處理器&#xff0c;讓…

避免使用FOR –反假戰役

您是否想知道FOR如何影響您的代碼&#xff1f; 他們如何限制您的設計&#xff0c;更重要的是如何將您的代碼轉換為無人為含義的多行代碼&#xff1f; 在這篇文章中&#xff0c;我們將看到如何將for的簡單示例&#xff08;由Francesco Cirillio提供- 反if活動&#xff09;轉換為…

ffmpeg-win32-v3.2.4 下載_MVBOX下載|MVBOX 7.1.0.4官方版

還是要強調一句&#xff0c;現在市面上很多盜版或者免費的軟件&#xff0c;都給一些黑客留下了暗門&#xff0c;所以大家還是支持正版比較好&#xff0c;不要貪圖便宜使用盜版軟件造成不好的后果。MVBOX播放器功能介紹1、在線卡拉OK2、虛擬攝像頭3、畫面調色板4、攝像頭摳像5、…

linux重啟鼠標鍵盤服務,Linux 關閉服務后 鼠標 鍵盤用不了

大部分情況下我們做實驗都是使用虛擬機&#xff0c;但是個人比較本實在太老了&#xff0c;性能有限&#xff0c;所以虛擬機里面的系統啟動神慢&#xff0c;怎么辦&#xff1f;把系統中自己用不到的服務全部關閉掉唄&#xff0c;如下for i in chkconfig --list | awk {print $1}…

拖拽功能-jquery

<!DOCTYPE html><html lang"en"><head> <meta charset"UTF-8"> <title>拖拽</title> <style> .nav { width: 200px; height: 200px; border: 1px solid blac…

PNG,GIF,JPG的區別及如何選

GIF&#xff1a; 1&#xff1a;256色 2&#xff1a; 無損&#xff0c;編輯 保存時候&#xff0c;不會損失。 3&#xff1a;支持簡單動畫。 4&#xff1a;支持boolean透明&#xff0c;也就是要么完全透明&#xff0c;要么不透明 JPEG&#xff1a; 1&#xff1a;millions o…

餓了么商家電腦版_餓了么企業版榮膺“2020中國十大影響力人力資源品牌”大獎...

11月6日&#xff0c;由MeetHR GROUP主辦的2020大中華地區HRVP高峰論壇在上海落幕。餓了么企業版憑借自身產品在人力資源管理與服務方面的創新實踐&#xff0c;榮獲“2020 中國十大影響力人力資源品牌(薪酬福利類)”殊榮。本次評選&#xff0c;據主辦方介紹&#xff0c;旨在激勵…

用信號量鎖定:一個例子

并發是帶來有趣挑戰的一個方面。 如果處理不當&#xff0c;會導致種族狀況&#xff0c;這會使人們感到困惑&#xff0c;因為這些問題有時會突然出現&#xff0c;并且有時會完美無缺地發揮作用。 當處理訪問公共資源的并發線程時&#xff0c;Java語言提供了許多處理競爭條件的方…

navicat連接linux遠程數據庫,使用Navicat forMySql遠程連接Linux 系統上的數據庫

使用Navicat for MySql遠程連接Linux 系統上的數據庫解決mysql"Access denied for userrootIP地址"問題1.問題說明&#xff1a;在MYSQL 中&#xff0c;用遠程軟件登陸服務器&#xff0c;有時出現&#xff1a;Access denied for user rootlocalhost出現這種問題&#…

HTTPS 通俗簡介

為什么需要HTTPS 9個問題搞懂 https 來源 HTTP是明文傳輸的&#xff0c;也就意味著&#xff0c;介于發送端、接收端中間的任意節點都可以知道你們傳輸的內容是什么。這些節點可能是路由器、代理 等。 舉個最常見的例子&#xff0c;用戶登陸。用戶輸入賬號&#xff0c;密碼&am…