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.js中的Vuex状态管理模式
Vuex是Vue.js的官方状态管理模式，它为Vue.js应用程序提供了一个集中式的状态管理解决方案，Vuex可以帮助我们管理应用程序中所有组件的状态，使得状态管理变得更加简单和可靠，需要详细了解可以参考下文
2023-05-05
如何使用vue3+uni-app封装音乐播放插件
UniApp是一个基于Vue.js开发的跨平台应用开发框架,它可以使用一套代码同时构建iOS、Android和Web应用,这篇文章主要给大家介绍了关于如何使用vue3+uni-app封装音乐播放插件的相关资料,需要的朋友可以参考下
2023-11-11
Vue3.0结合bootstrap创建多页面应用
这篇文章主要介绍了Vue3.0结合bootstrap创建多页面应用,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
Element Plus组件Form表单Table表格二次封装的完整过程
一般在后台管理系统的开发中,都会遇到很多table,但每一次都去引入el-table就会导致代码十分冗余,所以基于组件做一下二次封装成自己需要的组件就十分nice,下面这篇文章主要给大家介绍了关于Element Plus组件Form表单Table表格二次封装的相关资料,需要的朋友可以参考下
2022-09-09
vue3应用elementPlus table并滚动显示问题
这篇文章主要介绍了vue3应用elementPlus table并滚动显示问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue中刷新子组件重新加载子组件三种方法
组件是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,这篇文章主要给大家介绍了关于vue中刷新子组件重新加载子组件三种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
从零开始搭建vue移动端项目到上线的步骤
这篇文章主要介绍了从零开始搭建vue移动端项目到上线的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
Vue3如何获取proxy对象的值而不是引用的方式
这篇文章主要介绍了Vue3如何获取proxy对象的值而不是引用的方式,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-10-10
前端实现简单的sse封装方式(React hook Vue3)
这篇文章主要介绍了前端实现简单的sse封装方式(React hook Vue3),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
vue-cli3.0 环境变量与模式配置方法
vue-cli3.0移除了配置文件目录： config和build文件夹。可以说是非常的精简了，那移除了配置文件目录后如何自定义配置环境变量和模式呢?这篇文章主要介绍了vue-cli3.0 环境变量与模式 ,需要的朋友可以参考下
2018-11-11