vue项目引入本地bootstrap不生效问题

最新推荐文章于 2024-06-26 19:04:20 发布
最新推荐文章于 2024-06-26 19:04:20 发布
阅读量2.6k 收藏 3
点赞数 1
文章标签： bootstrap vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45660458/article/details/126029048
版权
博客作者在本地项目中引入Bootstrap时遇到了预期效果不符的情况。原本已下载的Bootstrap未在package.json中声明为依赖，导致预览的导航栏样式不正确。通过在项目文件夹内使用npm install bootstrap@3.4.1 --save添加指定版本的Bootstrap为依赖，并刷新页面，成功实现了导航栏的预期效果，文字居右显示。调整后的CSS也符合作者的需求。
摘要由CSDN通过智能技术生成

前提：本地下载安装了bootstrap并引入项目

<link rel="stylesheet" type="text/css" href="../bootstrap3.4.1/css/bootstrap.min.css"/>
<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我根据需要调整了一下
在这里插入图片描述

舒克舒克开飞机的舒克
关注
bootstrap.yml文件不生效的解决方案(SpringBoot 配置文件的加载顺序)
iOS逆向与安全
04-30 2378
SpringBoot默认支持properties和YAML两种格式的配置文件。前者格式简单，但是只支持键值对。SpringBoot支持自动加载约定名称的配置文件，例如application.yml。原因：bootstrap.yml文件是用于SpringCloud组件的，只有项目中存在该依赖，他才会变成绿色，生效的，而且他会比application.yml先加载。引入 Spring Cloud 中的某一组件即可，因为他们里面包含 spring-cloud-commons-dependencies 依赖。
vue-cli引入bootstrap时候图标不显示
qq_37672347的博客
11-12 563
问题描述： vue-cli项目引入bootstrap的css的时候，样式都正常，但是发现图标无法正常显示，有些特殊字体也无法正常显示，F12查看提示找不到对应的字体文件，再具体一看，发现路径不对，多了static/css。 解决办法： build->utils.js 文件中，找到 vue-style-loader，添加 publicPath:’…/…/’ 如下： // Extract C...
CSS样式不起作用？史上最全解决方法汇总
01-08
在我们写页面时，有时会发现自己写的css样式无法生效，导致这种现象的原因有很多，下面列举一些常见的原因希望可以帮到你，欢迎评论区补充。 目录浏览器缓存问题细节问题样式表关联问题选择器问题编码格式问题样式层叠问题 浏览器缓存问题 如果你反复检查认为代码没有问题，那么可能是浏览器缓存的问题。在排查前先试一下清除浏览器缓存，重启浏览器或者换个浏览器等手段，无效后再进行进一步排查。有可能自己什么都没有做错，就是因为缓存或者浏览器的问题导致，重置一下也许问题就解决了。 浏览器的‘F12’元素审核，看看哪些样式没有应用上。 看看自定义的CSS样式引入标签是否放在bootstrap框架样式引用之后，确保
引入Bootstrap样式后无效解决办法亲测有效
weixin_46486508的博客
01-04 8306
Bootstrap引入后样式无效，除了在头部引入以外，记得查看头文件中是否包含isELIgnored="false"字段！！！ <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <html> <head> <title>添加学生</title> <% pageContext.setAtt
vue项目下引入bootstrap没反应
你好_晴天
07-29 4270
问题描述：vue项目下用本地的bootstrap在index.html中用常规方法引入bootstrap.min.css和js文件失败，但是用bootstrap官网的cdn方式引入却可以 原因：在vue项目下使用bootstrap需要配置一下，如下所示 <div id="post_...
正确引入本地Bootstrap文件后，使用样式不生效
热门推荐
wsb_2526的博客
07-18 1万+
解决方法 正确的写法如下，script标签的type属性和link标签的rel属性必须要加上，这样Bootstrap样式才能生效，路径按照自己Bootstrap文件所在位置编写就可以了。 <script type="text/javascript" src="static/js/jquery-3.5.1.js"></script> <script type="text/javascript" src="static/bootstrap-3.3.7-dist/js
解决bootstrap引入进去HTML没有效果，情况之一
bxxjqs的博客
05-12 1536
用pycharm写HTML文件，引入bootstrap样式没有效果
Vue中引入bootstrap导致的CSS问题
aicu6922的博客
07-03 1137
最近在进行vue.js+webpack进行模块化开发的时候，遇到一个奇怪的问题。 问题是这样的： 1. 在main.js文件中引入bootstrap的js和css。 2. 自己写了一个Header.vue模块，其中的导航条使用的bootstrap的class和自己的class。 <ul class="navbar-nav my-navBar" id="my-navBar...
Vue引入本地文件无效
叹之
08-21 2699
无效的原因是，在webpack打包的设置(/config/index.js)中，指定将静态资源打包到static文件夹下，从而导致路径错误。 解决方法： 将静态资源放在static文件夹下再引入 – 打包之前 – 打包之后 或者在引入时默认静态资源在static文件夹下 我在根目录下建立了css文件夹用来装样式文件 但是在引入的时候，我认为他已经在static文件夹下了（因为运行时它会被安排在那里） 你看，它还在提示，找不到bootstrap.css，因为它现在确实不在static下，但是当运行
帮我写代码用来测试vue+bootstrap的项目中bootstrap是否生效
05-10
当我们在Vue项目中使用Bootstrap时，需要先安装Bootstrap和jQuery： ```bash npm install bootstrap jquery --save ``` 然后在`main.js`文件中引入： ```javascript import 'bootstrap/dist/css/bootstrap.css' ...
Bootstrap导航栏下拉菜单不生效的问题
qq_34639650的博客
07-04 5535
Bootstrap导航栏下拉菜单不生效的问题
（已解决）引入本地bootstrap无效，bootstrap和jquery的引入
m0_73560798的博客
04-07 935
首先我是跟着张天宇老师下载的bootstrap文件，新建了一个css文件夹，但是这样子<link rel="stylesheet" type="text/css" src="./css/bootstrap.css">在index.html引入没有用。（老师是在index.html引入<link rel="stylesheet" type="text/css" src="./css/bootstrap.css">,把这个删了不用在这里引入）
bootstrap引入的css样式不生效如何解决
weixin_74261569的博客
11-14 1306
bootstrap引入的css样式不生效如何解决： 修改href路径 删除顶上的
Bootstrap无法加载CSS样式，或者CSS样式不生效
漠上尘的博客
08-16 7310
可能的原因 1.路径写错了，如果没把握建议走CDN 2.文件路径有中文名，或者文件命名有中文名，这个情况有些时候可以有时候不可以 3.检查栅格系统的类前缀，有可能是小屏幕但是如果用lg可能导致看不出来效果，可以尝试换个小的试试 示例： <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" c
jsp中引入的bootstrap无效
最新发布
2305_76609659的博客
06-26 198
SSM框架中jsp引入bootstrap路径使用${pageContext.request.contextPath}或者<%=request.getContextPath()%>无效，浏览器控制台报错bootstrap404。搜索到在springmvc.xml中添加<mvc:default-servlet-handler/>，添加后仍不起作用。最后在web.xml中添加url-pattern解决。
Bootstrap样式不生效的解决方法
Meng_xuan_12345的博客
05-22 2739
Bootstrap样式不生效的解决方法
JSP页面中引入本地Bootstrap.min.css文件失效的问题
m0_63056205的博客
11-04 2098
<head> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css"> </head> 注意事项： 1.必须在<head>标签内 2.属性rel="stylesheet"必须添加 3.不能使用相对路径，需要通过${pageContext.request.contextPath}后面.
关于parcharm引入bootstrap，但是css样式不起作用的解决
qq_74059706的博客
01-06 848
刚开始在引入bootstrap完全正常，但是在我采用css格式时没有起作用 于是我发现创建html在static目录下面是没有用的。 必须得在day2这个大目录下面 然后就可以启用了
vue2中引入bootstrap样式文件报错问题
weixin_44754312的博客
05-09 263
vue2中引入bootstrap样式文件报错问题
vue-cli 引入bootstrap
08-15
在Vue项目中使用Vue CLI来引入Bootstrap，可以按照以下步骤进行： 1. 首先，确保你已经安装了Vue CLI。如果没有安装，可以使用下面的命令进行安装： ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目。在命令行中执行以下命令： ``` vue create my-project ``` 这里的`my-project`是你想要创建的项目名称，可以根据实际情况进行修改。 3. 进入到项目目录。在命令行中执行以下命令： ``` cd my-project ``` 4. 安装Bootstrap的npm包。在命令行中执行以下命令： ``` npm install bootstrap ``` 5. 在Vue项目中引入Bootstrap的样式和脚本。打开`src/main.js`文件，在文件的顶部添加以下代码： ```javascript import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/js/bootstrap.js' ``` 6. 在Vue组件中使用Bootstrap的样式和组件即可。 现在，你已经成功地将Bootstrap引入到Vue项目中了，并可以在Vue组件中使用Bootstrap提供的样式和组件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值