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我根据需要调整了一下
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
对于中小型企业,vue应用越来越多,学习vue相对于react的成本要低点,入门相对简单。这篇文章主要给大家介绍了关于Vue接口封装的相关资料,需要的朋友可以参考下2021-05-05
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI，下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料，需要的朋友可以参考下。2017-12-12
因为项目中需要根据后端返回的权限进行功能的显示隐藏，所以就加了个权限指令。不用写if else进行判断，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-09-09
这篇文章主要介绍了解决vux 中popup 组件Mask 遮罩在最上层的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本文介绍了vue中el-select 和el-tree二次封装实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
这篇文章主要为大家详细介绍了vue中mint-ui的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
vue3中定义全局指令时,往往会碰到一个问题：事件无法解绑,为什么会这样,因为通常在指令的mounted钩子中绑定事件,事件处理函数也定义在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一样,也是用来实现响应式数据的方法,下面这篇文章主要给大家介绍了关于vue3给动态渲染的组件添加ref的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vertx基于EventBus发送接受自定义对象,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
最新评论