vue項目引入本地bootstrap不生效問題及解決
更新時間：2023年10月26日 09:49:12 作者：舒克舒克開飛機的舒克
這篇文章主要介紹了vue項目引入本地bootstrap不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前提
本地下載安裝了bootstrap并引入項目
<link rel="stylesheet" type="text/css" href="../bootstrap3.4.1/css/bootstrap.min.css" rel="external nofollow" /> <script type="text/javascript" src="../bootstrap3.4.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="../bootstrap3.4.1/js/jquery-3.6.0.min.js"></script>
寫了個導(dǎo)航欄
預(yù)覽的時候沒有達到預(yù)想效果，應(yīng)該是有導(dǎo)航，且文字居右顯示
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div>
<p class="navbar-text navbar-right">歡迎！</p>
</div>
</div>
</nav>
原因是package.json中沒有添加bootstrap的依賴
用npm引入bootstrap就可以了，版本和本地下載的一致。
我的是3.4.1
這里不清楚需不需要cd到項目文件夾，我試過在父文件夾，也就是這里的HbuilderXProjects下載
但是lastTest的package.json總是自動下載最新的bootstrap，所以我直接在項目文件夾下載了
npm install bootstrap@3.4.1 --save
刷新頁面
出來的效果是這樣的，css我根據(jù)需要調(diào)整了一下
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
對于中小型企業(yè),vue應(yīng)用越來越多,學習vue相對于react的成本要低點,入門相對簡單。這篇文章主要給大家介紹了關(guān)于Vue接口封裝的相關(guān)資料,需要的朋友可以參考下2021-05-05
vue + element-ui實現(xiàn)簡潔的導(dǎo)入導(dǎo)出功能
Element-UI是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架,手機端有對應(yīng)框架是 Mint UI，下面這篇文章主要給大家介紹了關(guān)于利用vue + element-ui如何實現(xiàn)簡潔的導(dǎo)入導(dǎo)出功能的相關(guān)資料，需要的朋友可以參考下。2017-12-12
因為項目中需要根據(jù)后端返回的權(quán)限進行功能的顯示隱藏，所以就加了個權(quán)限指令。不用寫if else進行判斷，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-09-09
這篇文章主要介紹了解決vux 中popup 組件Mask 遮罩在最上層的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue中el-select 和el-tree二次封裝實現(xiàn)
本文介紹了vue中el-select 和el-tree二次封裝實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-11-11
這篇文章主要為大家詳細介紹了vue中mint-ui的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
vue3中定義全局指令時,往往會碰到一個問題：事件無法解綁,為什么會這樣,因為通常在指令的mounted鉤子中綁定事件,事件處理函數(shù)也定義在mounted中,本文講給大家講講vue3中addEventListener的妙用,需要的朋友可以參考下2023-08-08
vue2.0基于vue-cli+element-ui制作樹形treeTable
這篇文章主要介紹了vue2.0基于vue-cli+element-ui制作樹形treeTable，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
ref和reactive一樣,也是用來實現(xiàn)響應(yīng)式數(shù)據(jù)的方法,下面這篇文章主要給大家介紹了關(guān)于vue3給動態(tài)渲染的組件添加ref的解決方案,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vertx基于EventBus發(fā)送接受自定義對象,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11