- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我不确定这是否是我在安装 Bootstrap 5 时做错的,但是我的很多按钮都使用黑色字体而不是 Bootstrap 5 Documentation 上看到的白色字体
例如,Bootstrap 文档中的 .btn-primary
如下所示:
但是,当我使用相同的 HTML 时,结果是这样的:
作为引用,他们的示例和我的示例中的 HTML 是:
<button type="button" class="btn btn-primary">Primary</button>
不仅文字颜色不同,背景颜色也不同。事实上,通过我编译的 .css 文件,整个代码中使用的大部分 Bootstrap 颜色都有这种“褪色”外观,类似于按钮中的蓝色。从 Chrome 开发工具来看,样式似乎来自 Bootstrap 文件本身,而不是我无意中应用的任何样式。 SCSS 正在通过正常的 Laravel 设置(webpack mix)编译为 CSS 文件。我只是将 NPM 包用于 bootstrap 5。
window.bootstrap = require('bootstrap');
和 NPM 包 "bootstrap": "^5.1.3",
我的 app.scss 文件里面没有太多内容:
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import "~bootstrap-icons/font/bootstrap-icons";
// "Lobster" Font for H1's
@import "https://fonts.googleapis.com/css2?family=Cuprum&family=Lobster&display=swap";
// Flatpickr Styles
@import "~flatpickr/dist/flatpickr.min.css";
// Font Awesome Free
@import "~@fortawesome/fontawesome-free/css/all.min.css";
// DataTables Styles
@import "~datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "~datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css";
h1 {
font-family: 'Lobster', cursive;
}
a.torn-link {
color: $orange;
}
.ttt-title {
font-family: 'Lobster', cursive;
}
.card-title {
font-family: 'Cuprum', sans-serif;
}
html {
background-color: #fff;
color: #636b6f;
}
body {
background-color: #fff;
color: #636b6f;
}
.links {
>a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
}
#settings-button {
&:hover {
fill: rgba(189, 189, 189, 0.25);
}
}
.ui-dialog-title {
font-family: 'Cuprum', sans-serif;
}
thead, th {
text-align: center;
}
编辑:甚至所有 Bootstrap 彩色链接似乎都被冲掉了。例如 .link-warning
黄色是不可能使用的,因为颜色太褪色以至于无法阅读。而他们页面上的黄色是完全可读的。所以这甚至不是我不小心将样式应用于按钮或其他东西。
编辑2:
这是我的按钮在开发工具中的样子(注意颜色与 Bootstrap 5 文档颜色不同
按钮 CSS 只是来自通过 webpack 生成的编译后的 app.css 文件:
编辑 3:我的 _variables.scss
文件:
// Body
$body-bg: #f8fafc;
// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
最佳答案
在 _variables.scss
文件中,在将 Bootstrap 5 添加到 Laravel 8 的某个时刻,看起来其中一个脚本添加了颜色,或者我在某个时刻搞砸了,并在其中添加了一个颜色托盘变量文件。
变量文件中的所有颜色都与 Bootstrap 默认颜色相似,但是是更褪色的版本。这就是导致 Bootstrap 中使用这些变量的任何东西都被淘汰的原因。
只需删除我在 _variables.scss
文件中定义的所有颜色即可解决问题。
关于javascript - Bootstrap 5 的按钮文本是黑色而不是像他们的演示那样的白色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69783190/
我刚刚创建了一个带有几个表 Controller 和一个 View Controller 的 Storyboard。 一切正常,直到我的应用程序推送 View Controller :它显示为全黑。
我尝试通过添加一个名为“铀”的新元素来修改我的世界。因此,我在主包中创建了“Trauma.java”类以及下面列出的其他一些类。所有包和类: Package Explorer Trauma.java
我一直在学习如何使用 UICollection View 。我制作了一个新的 UICollectionView Controller ,并将 collectionview 单元格标识为 main.st
我想加一个超细的黑边 在这个环的边界上方和下方。 http://jsfiddle.net/PUBqA/5/ 目标是让这个戒指容易看 在白色背景上。 唯一的方法就是添加一些薄的 环外环内黑色边框。 这是
假设我有以下 python 文件 exclude_from_black.py在我的项目的根目录中: print('I want single quotes') 我试图从黑色重新格式化中排除此文件,但以
我的 Canvas 有问题。比方说,1/10 的时候我在 chrome 上有黑色方 block 而不是我的图像。我的代码如下,我该如何修改它以避免这种黑色显示? var canvas = docu
我正在尝试使用图案作为 SKScene 的背景颜色: override func didMoveToView(view: SKView) { let backgroundImage:
我正在尝试浏览一些 Collection View Swift 教程,但它们总是显示为空白/黑色页面,就好像我没有设置初始 View Controller 一样。不过,我只使用了 1 个 UIColl
我有一个标签栏应用程序。 标签栏中只有 2 个选项卡。第一个选项卡是 NavigationController,第二个选项卡是 TableViewController。第二个工作完美,但第一个则不然。
我正在通过串行端口(ttyO2)连接 BBB 和一组 arduino。我有一个数组要从 BBB 发送到一组 arduino。我需要让 BBB 发送请求并等待其中一个 arduino 的回复,但如果在一
附上图片。我能够摆脱边界上的背景区域,但图像中的背景区域仍然存在。有没有什么方法可以消除图像中的小背景区域。谢谢。 最佳答案 这个问题有一个简单的解决方法,基本思想是在 RGB 颜色空间中分割图像以过
我以前从未做过图像处理。 我现在需要检查来自相机的许多 jpeg 图像,以丢弃那些非常暗(几乎是黑色)的图像。 是否有我可以使用的免费库 (.NET)?谢谢。 最佳答案 Aforge是一个很棒的图像处
这个问题在这里已经有了答案: Background ListView becomes black when scrolling (12 个答案) 关闭 9 年前。 这是我第一次访问这个网站。我会请你
我在 iOS 上更改启动屏幕的背景颜色时遇到问题。当我第一次打开应用程序时,它会在黑色 viewcontroller 出现之前加载一个白页。如何将白色启动屏幕更改为黑色? 下面是我的应用程序的一般启动
我想检测字体的样式(粗体、粗体、黑色)。但我只能检测字体是否为粗体。 BOOL isBold = (font.fontDescriptor.symbolicTraits & UIFontDescrip
我正在尝试解决一个软件错误,在该错误中,我们认为某个应用可能不会在每次调用时都启动。为了对此进行测试,我创建了一系列计划任务来启动应用程序、截取屏幕截图,然后关闭应用程序。这些任务都是通过 .bat
完全被难住了。我已经遍地查看并实现了我能找到的每一个解决方案。我似乎无法让导航栏变得透明。 当尝试设置背景颜色时,我只在顶部看到一个黑条。就像我尝试设置背景图像一样。我已经尝试了所有这些以及所有这些变
我创建了一个 TextView ,如果文本太长,它将使其可滚动。但是,如果您单击它或将手指放在上面,它会像被单击一样变成黑色。有谁知道使它不能点击但仍然能够滚动的代码?谢谢! 在我的 xml 中定义其
我正在尝试将 DS1307 RTC 集成到 beaglebone black 上,其中我正在使用 rootfs 构建自定义内核,我使用了 beagle P9.17 和 P9.18 的 SCL 和 SD
线性渐变适用于图像,但文本不会出现在图像前景上。此外,渐变不应该出现在文本上。我哪里做错了? 任何帮助都感激不尽。 .glimage { display: flex; justify-cont
我是一名优秀的程序员,十分优秀!