vue項(xiàng)目引入本地bootstrap不生效問題及解決
更新時(shí)間：2023年10月26日 09:49:12 作者：舒克舒克開飛機(jī)的舒克
這篇文章主要介紹了vue項(xiàng)目引入本地bootstrap不生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
前提
本地下載安裝了bootstrap并引入項(xiàng)目
<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>
寫了個(gè)導(dǎo)航欄
預(yù)覽的時(shí)候沒有達(dá)到預(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到項(xiàng)目文件夾，我試過在父文件夾，也就是這里的HbuilderXProjects下載
但是lastTest的package.json總是自動(dòng)下載最新的bootstrap，所以我直接在項(xiàng)目文件夾下載了
npm install bootstrap@3.4.1 --save
刷新頁(yè)面
出來(lái)的效果是這樣的，css我根據(jù)需要調(diào)整了一下
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vuex是Vue.js的官方狀態(tài)管理模式，它為Vue.js應(yīng)用程序提供了一個(gè)集中式的狀態(tài)管理解決方案，Vuex可以幫助我們管理應(yīng)用程序中所有組件的狀態(tài)，使得狀態(tài)管理變得更加簡(jiǎn)單和可靠，需要詳細(xì)了解可以參考下文2023-05-05
UniApp是一個(gè)基于Vue.js開發(fā)的跨平臺(tái)應(yīng)用開發(fā)框架,它可以使用一套代碼同時(shí)構(gòu)建iOS、Android和Web應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何使用vue3+uni-app封裝音樂播放插件的相關(guān)資料,需要的朋友可以參考下2023-11-11
Vue3.0結(jié)合bootstrap創(chuàng)建多頁(yè)面應(yīng)用
這篇文章主要介紹了Vue3.0結(jié)合bootstrap創(chuàng)建多頁(yè)面應(yīng)用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Element?Plus組件Form表單Table表格二次封裝的完整過程
一般在后臺(tái)管理系統(tǒng)的開發(fā)中,都會(huì)遇到很多table,但每一次都去引入el-table就會(huì)導(dǎo)致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關(guān)于Element?Plus組件Form表單Table表格二次封裝的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue3應(yīng)用elementPlus table并滾動(dòng)顯示問題
這篇文章主要介紹了vue3應(yīng)用elementPlus table并滾動(dòng)顯示問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
組件是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于vue中刷新子組件重新加載子組件三種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
從零開始搭建vue移動(dòng)端項(xiàng)目到上線的步驟
這篇文章主要介紹了從零開始搭建vue移動(dòng)端項(xiàng)目到上線的步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-10-10
Vue3如何獲取proxy對(duì)象的值而不是引用的方式
這篇文章主要介紹了Vue3如何獲取proxy對(duì)象的值而不是引用的方式,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
前端實(shí)現(xiàn)簡(jiǎn)單的sse封裝方式(React hook Vue3)
這篇文章主要介紹了前端實(shí)現(xiàn)簡(jiǎn)單的sse封裝方式(React hook Vue3),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue-cli3.0移除了配置文件目錄： config和build文件夾?？梢哉f是非常的精簡(jiǎn)了，那移除了配置文件目錄后如何自定義配置環(huán)境變量和模式呢?這篇文章主要介紹了vue-cli3.0 環(huán)境變量與模式 ,需要的朋友可以參考下2018-11-11