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>
写了个导航栏
预览的时候没有达到预想效果,应该是有导航,且文字居右显示
<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我根据需要调整了一下
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3 ts组合式API异常onMounted is called when&
这篇文章主要为大家介绍了vue3 ts组合式API异常onMounted is called when there is no active component问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-05-05Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
这篇文章主要介绍了Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)的方法,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下2020-08-08vite5+vue3+ import.meta.glob动态导入vue组件图文教程
import.meta.glob是Vite提供的一个特殊功能,它允许你在模块范围内动态地导入多个模块,这篇文章主要给大家介绍了关于vite5+vue3+ import.meta.glob动态导入vue组件的相关资料,需要的朋友可以参考下2024-07-07
最新评论