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>
写了个导航栏
预览的时候没有达到预想效果，应该是有导航，且文字居右显示
<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我根据需要调整了一下
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
我们使用nginx部署Vue项目,实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹,下面这篇文章主要给大家介绍了关于Vue项目打包部署的相关资料,需要的朋友可以参考下2021-09-09
下面小编就为大家带来一篇Vue2.0 axios前后端登陆拦截器(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了vue 使用eventBus实现同级组件的通讯,需要的朋友可以参考下2018-03-03
下面小编就为大家分享一篇浅谈vue.js导入css库(elementUi)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
解决element ui cascader 动态加载回显问题
这篇文章主要介绍了element ui cascader 动态加载回显问题解决方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章介绍了Vue中的生命周期，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了Vue 前端路由工作原理hash与history的区别，文章围绕主题展开vue-router的工作原理的简单介绍，感兴趣的朋友可以学习一下2022-07-07
这篇文章主要为大家详细介绍了vue移动端实现手机左右滑动入场动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
vue过滤器可以在不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理,下面这篇文章主要给大家介绍了关于Vue中过滤器必懂小知识的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue echarts实现改变canvas长和宽自适应问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论