在vue中引入的bootstrap.min.css出现的font问题

于 2020-03-29 15:53:34 发布
阅读量644 收藏
点赞数 1
分类专栏： vscode 文章标签： vue html vue.js node.js bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LS_subway/article/details/105179994
版权

我们在成功引入bootstrap后，运行项目还会出现问题，比如font问题，在vue中，路径不能像html文件中…/这样
出现的错误如下图
在这里插入图片描述
按照图中说的，我找到了相对应的代码
在这里插入图片描述
去掉font前面的两个点就ok了，如下图：
在这里插入图片描述

LS_subway
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中如何引入jQuery和Bootstrap
11-27
在Vue.js项目中引入jQuery和Bootstrap是开发过程中常见的需求，特别是在需要使用Bootstrap的UI组件或者jQuery的DOM操作功能时。以下是如何在Vue项目中完成这一过程的详细步骤： ### 一、引入jQuery 1. **安装...
bootstrap.min.css文件错误
Var-al 的博客
05-03 2419
今天在学习bootstrap调用bootstrap.min.css的时候突然显示bootstrap.min.css文件错误，晚上查找了很多解决方法都没用，从新下载过bootstrap-3.4.1，也下载了4.几的版本，bootstrap中文官网，原官网下载了都是一样的代码错误。 后来突然想到，虽然我不知道怎么修改，之前没注意看，然后看到了是一个样式，然后就想，我把他删了怎么样，虽然不知道这个样...
Vue中引入bootstrap.min.css的正确姿势
zhangvalue的博客
02-19 5162
步骤1: 通过npm安装bootstrap依赖包 npm install bootstrap -S 步骤2: 在Main.js中引入bootstrap.css import "bootstrap/dist/css/bootstrap.min.css"
Bootstrap—解决引入本地Bootstrap文件字体图标无法显示问题
热门推荐
生如夏花 炫至茶靡
12-13 6万+
你在使用bootstrap字体图标的时候，是否遇到引用本地Bootstrap文件无法显示字体图标，而使用CDN服务器上bootstrap却能正常显示的问题。 在不能正常显示的时候，比如我要在一个按钮中使用一个√的字体图标，我的代码是这样子的： bootstrap字体图标 但是他的显示却是这个样子的： 网上查找
Bootstrap样式引入失败问题
wilber0501的博客
12-21 1万+
  bootstrap引入失败问题   通过cdn文件引入： <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">   <!-- jQuery (Bootstrap 的所有 JavaScript 插...
使用vue-cli 引入bootstrap.min.css文件报错
weixin_30734435的博客
04-23 337
可以在index.html 里面引入boostrap.min.css文件 将bootstrap.min.css文件放置于static/css/文件夹中 然后再index.html文件中引入便可 <link rel="stylesheet" href="./static/css/bootstrap.min.css"> 转载于:https://www.cnblogs.com/Main...
vue-cli如何引入bootstrap工具的方法
08-29
最后，需要在 `assets` 文件目录中拷贝 Bootstrap 的各种文件，例如 `bootstrap.min.css` 和 `bootstrap.min.js`。 总结 以上就是 Vue-cli 引入 Bootstrap 工具的方法。通过按照以上步骤进行操作，您可以轻松地在 ...
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
10-19
在Vue CLI中引用jQuery、Bootstrap以及使用Sass和Less编写CSS是常见的前端开发需求，本文将详细介绍这些步骤。 首先，让我们来看看如何在Vue CLI项目中引入Bootstrap。Bootstrap是一款流行的前端框架，提供了丰富的...
【前端】 在 Vue.js 中集成 CSS 框架.pdf
11-24
本文将详细介绍如何在Vue项目中集成Bootstrap 4、Bulma和Foundation这三个流行的CSS框架，并提供最佳实践和注意事项。 首先，确保你已经安装了Vue CLI，可以通过运行`npm install vue-cli`和`vue init webpack ...
利用vue.js把静态json绑定bootstrap的table方法
10-18
在本文中，我们将探讨如何使用Vue.js将静态JSON数据绑定到Bootstrap的表格中，从而创建一个动态且交互式的数据展示界面。Vue.js是一个轻量级的前端JavaScript框架，它提供了数据绑定和组件化的能力，使得构建用户...
Vue中引入bootstrap导致的CSS问题
aicu6922的博客
07-03 1101
最近在进行vue.js+webpack进行模块化开发的时候，遇到一个奇怪的问题。 问题是这样的： 1. 在main.js文件中引入bootstrap的js和css。 2. 自己写了一个Header.vue模块，其中的导航条使用的bootstrap的class和自己的class。 <ul class="navbar-nav my-navBar" id="my-navBar...
bootstrap--font-face问题
weixin_30583563的博客
04-01 205
在做仿天猫项目时，预期 已经用cdn加载bootstrap，但是不显示文字图标；实际情况： 发现是引用bootstrap的版本导致的。4.0.0版本及以后的css源码中找不到@font-face。可以改成用3.3.7版本之前的http://www.bootcdn.cn/bootstrap/ 里面去找。或是，因为服务器上没有添加woff字体的MIME类型，导致发送HTTP请...
Vue中引入Bootstrap的样式文件，Table没有样式+（表格循环的结构）
任重道远
05-20 2028
我在一个demo中，引入了Bootstrap.min.css 样式文件， 在写表格组件的时候，其他的都有效，唯独table 无效； 解决办法： 添加上<thead>和<tbody>标签
vue中 怎么引入bootstrap的字体图标，不影响到Elemrnt UI的布局
诗水人间
08-10 1183
使用ElementUI和bootstrap导致样式发生了改变 解决方式，使用阿里云字体图标，不仅多而且不会影响到布局 参照我另外的一篇花生鼠的日常建站日志-003 使用阿里巴巴矢量图标库 ...
bootstarp分页插件 bootstrapv3.css 与 bootstrap.min.css 样式冲突
999青峰
08-06 4083
bootstarp css 样式 冲突
通过css引入外部字体来使用第三方字体
weixin_38728902的博客
04-07 1423
第一步：声明字体名称 @font-face{ font-family: 'weiyang'; src : url('../static/weiyangjianti.ttf'); } 第二步：引用字体 div{ font-family: 'weiyang'; font-size: 16px; } ...
vue引入bootstrap.min.css报错：Cannot find module "./assets/css/bootstrap.min.css"
weixin_30682127的博客
01-22 1057
问题如下图： 明明文件就在那里，就是报错说找不到模板，然后我就用了网上的方法，重新建立了一个项目，请参考如下： http://blog.csdn.net/ansu2009/article/details/53305134 https://m.th7.cn/show/20/201609/188921.html 转载于:https://www.cnblogs.com/learnings/p/...
Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in 'D:\vuecli-demo\src'
最新发布
05-18
这个错误通常是由于缺少相应的依赖包导致的。你需要安装 `bootstrap` 包，可以使用以下命令来安装： ``` npm install bootstrap ``` 或者 ``` yarn add bootstrap ``` 如果已经安装了 `bootstrap`，则可能是路径不正确导致的。请确保在引入 `bootstrap.min.css` 文件时，路径是正确的。 你可以检查一下 `node_modules` 目录下是否存在 `bootstrap` 包以及 `bootstrap/dist/css/bootstrap.min.css` 文件是否存在。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值