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我根据需要调整了一下

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3 ts组合式API异常onMounted is called when there is no active component解决

    vue3 ts组合式API异常onMounted is called when&

    这篇文章主要为大家介绍了vue3 ts组合式API异常onMounted is called when there is no active component问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • Vue基础语法知识梳理下篇

    Vue基础语法知识梳理下篇

    这篇文章主要介绍了Vue基础语法知识梳理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-12-12
  • Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    这篇文章主要介绍了Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)的方法,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-08-08
  • vite5+vue3+ import.meta.glob动态导入vue组件图文教程

    vite5+vue3+ import.meta.glob动态导入vue组件图文教程

    import.meta.glob是Vite提供的一个特殊功能,它允许你在模块范围内动态地导入多个模块,这篇文章主要给大家介绍了关于vite5+vue3+ import.meta.glob动态导入vue组件的相关资料,需要的朋友可以参考下
    2024-07-07
  • Vue的路由及路由钩子函数的实现

    Vue的路由及路由钩子函数的实现

    这篇文章主要介绍了Vue的路由及路由钩子函数的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Vue2 SSR渲染根据不同页面修改 meta

    Vue2 SSR渲染根据不同页面修改 meta

    本篇文章主要介绍了Vue2 SSR渲染根据不同页面修改 meta,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 通过vue如何设置header

    通过vue如何设置header

    这篇文章主要介绍了通过vue如何设置header,每个项目都有头部但是内容不一样;这种情况我们可以考虑在app.vue中创建公共头部,那么怎么配置公共头部header,下面小编通过实例代码详细讲解,需要的朋友可以参考下
    2023-02-02
  • Vue中父子组件如何实现传值

    Vue中父子组件如何实现传值

    这篇文章主要介绍了Vue中父子组件如何实现传值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 一文搞懂Vue中watch侦听器的用法

    一文搞懂Vue中watch侦听器的用法

    在Vue.js中,您可以使用watch选项来创建侦听器,以侦听特定属性的变化,侦听器可以在属性发生变化时执行相关的逻辑,本文给大家详细讲讲Vue中watch侦听器的用法,需要的朋友可以参考下
    2023-11-11
  • vue中实现页面刷新以及局部刷新的方法

    vue中实现页面刷新以及局部刷新的方法

    这篇文章主要给大家介绍了关于vue中实现页面刷新以及局部刷新的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01

最新评论