我不確定這是否是我在安裝 Bootstrap 5 時做錯的事情，但是我的很多按鈕都使用黑色字體而不是
但是，當我使用相同的 HTML 時，結果如下：
作為參考，他們的示例和我的示例中的 HTML 是：
<button type="button" class="btn btn-primary">Primary</button>
不僅文本顏色不同，背景顏色也不同。事實上，查看我編譯的 .css 檔案，整個代碼中使用的大量引導程式顏色具有類似于按鈕中的藍色的“褪色”外觀。從 Chrome 開發工具來看，樣式似乎來自 Bootstrap 檔案本身，而不是我無意中應用的任何樣式。SCSS 正在通過正常的 Laravel 設定（webpack mix）編譯成 CSS 檔案。我只是將 NPM 包用于引導程式 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;
}
Edit: Even all the Bootstrap Colored links appear to be washed out. For example the .link-warning yellow is not possible to use as the colour is too washed out to be able to read it. Whereas the yellow on their page is completely readable. So it's not even that I am just accidentally applying a style to a button or something.
Edit2:
Here is what my button looks like in the dev tools (note the colours differ from what the Bootstrap 5 docs colours have
and the buttons CSS is just coming from the compiled app.css file generated via the webpack:
Edit 3: My _variables.scss file:
// 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;
uj5u.com熱心網友回復：
在_variables.scss將 Bootstrap 5 添加到 Laravel 8 的某個時候的檔案中，它看起來像是其中一個腳本添加了顏色，或者我在某個時候搞砸了并在變數檔案中添加了一個調色板。
變數檔案中的所有顏色都與 Bootstrap 的默認顏色相似，但版本更舊。這就是導致 Bootstrap 中使用這些變數的任何東西都被洗掉的原因。
只需洗掉我在_variables.scss檔案中定義的所有顏色即可解決問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/346000.html
標籤：javascript css twitter-bootstrap laravel-8 bootstrap-5
上一篇：決議命令列時出錯：無法識別的選項“--wiredTigerCacheSizeGB2”
下一篇：基于anchor擴展手風琴