主題化 Bootstrap & BootstrapVue
主題化透過 Sass 變數、Sass 對應，以及自訂 CSS 來實現。沒有專門的主題樣式表；相反地，你可以啟用內建主題來新增漸層色、陰影等效果。
BootstrapVue 使用 Bootstrap 的 CSS，但 BootstrapVue 的某些功能使用自訂 CSS（例如堆疊表格等）。我們的自訂 CSS 參照 Bootstrap v4.x SCSS 中定義的變數。bootstrap-vue/dist/bootstrap-vue.css 使用預設的 Bootstrap v4.x 變數編譯。透過使用 BootstrapVue 原始碼 SCSS，你可以使用變數覆寫（例如中斷點、主題色彩等）來調整自訂 BootstrapVue css 的產生。
有關付費儀表板和主題，請參閱文件中的 主題區段。
SASS 變數預設值
Bootstrap v4 和 BootstrapVue 中的每個 Sass 變數都包含 !default 旗標，讓你可以在自己的 Sass 中覆寫變數的預設值，而不需要修改 Bootstrap 和 BootstrapVue 的原始碼 SCSS。你可以複製並貼上變數，修改其值，再移除 !default 旗標。如果變數已經被指定，則 Bootstrap 和 BootstrapVue 中的預設值將不會重新指定。
你可以在 bootstrap/scss/_variables.scss 中找到 Bootstrap 的變數完整清單。有些變數設定為 null，這些變數不會輸出屬性，除非在你的設定中覆寫它們。
在同一個 Sass 檔案中的變數覆寫可以在預設變數之前或之後。不過，如果覆寫是跨 Sass 檔案，則你的覆寫必須在匯入 Bootstrap 和 BootstrapVue 的 Sass (SCSS) 檔案之前執行。
以下是匯入並編譯 Bootstrap 和 BootstrapVue SCSS 時，變更 <body> 的 background-color 和 color 的範例：
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import '../node_modules/bootstrap/scss/bootstrap';
// BootstrapVue and its default variables
@import '../node_modules/bootstrap-vue/src/index.scss';預設主題色彩
Bootstrap v4.4 SCSS 中定義的預設主題色彩如下
BootstrapVue 元件使用這些預設主題色彩的變化範例（強度）。
您可以透過 SASS 變數和對應來修改這些主題色彩，並視需要建立其他主題色彩。有關更多資訊，請參閱 Bootstrap 佈景主題 文件。所有主題色彩皆會自動成為 色彩變形，適用於所有 BootstrapVue 元件。
SASS 選項
使用內建的自訂變數檔案自訂 Bootstrap 4，並使用 Bootstrap 的 $enable-* Sass 變數輕鬆切換全域 CSS 偏好設定。
Bootstrap SASS 變數
常用的一些 Bootstrap v4 變數包括
| 變數 | 類型 | 預設值 | 說明 |
|---|---|---|---|
$enable-rounded | 布林值 | true | 啟用各種元件的預定義 border-radius 樣式。 |
$enable-shadows | 布林值 | false | 啟用各種元件的預定義 box-shadow 樣式。 |
$enable-gradients | 布林值 | false | 透過 background-image 樣式於各種元件啟用預定義的漸層色。 |
$enable-transitions | 布林值 | true | 啟用各種元件的預定義 transition。 |
$enable-responsive-font-sizes | 布林值 | false | 啟用 回應式字型大小。 |
$enable-validation-icons | 布林值 | true | 在文本輸入框和一些自訂表單中啟用驗證狀態的 background-image 圖示。 |
有關額外的 Bootstrap v4 變數資訊，請參閱 Bootstrap 佈景主題 文件。
BootstrapVue SASS 變數
BootstrapVue 也定義了一些 Sass 變數來控制 BootstrapVue 的自訂 CSS 產生。如果您專案中沒有使用這些功能，您可以停用該功能的 CSS 產生，以縮減 BootstrapVue 自訂 CSS 檔案的大小。
| 變數 | 類型 | 預設值 | 說明 |
|---|---|---|---|
$bv-enable-table-stacked | 布林值 | true | 啟用堆疊表格 CSS 產生。 |
$bv-enable-table-sticky | 布林值 | true | 啟用表格標頭和欄位 CSS 產生。 |
$bv-enable-tooltip-variants | 布林值 | true | 啟用工具提示變異 CSS 產生。 |
$bv-enable-popover-variants | 布林值 | true | 啟用浮動提示變異 CSS 產生。 |
您可以在 bootstrap-vue/src/_variables.scss 找到更多控制 BootstrapVue 自訂 CSS 各種面向的變數。請注意，BootstrapVue 的自訂 SCSS 仰賴於 Bootstrap 的 SASS 變數、函式和合併。
產生自訂主題
要在 BootstrapVue 中使用您自己的主題和色彩，您需要在您的專案中建立一個 custom.scss 檔案，您可以在您的主要應用程式 app.vue 檔案中包含該檔案。
透過範本
<style lang="scss">
// Import custom SASS variable overrides, or alternatively
// define your variable overrides here instead
@import 'assets/custom-vars.scss';
// Import Bootstrap and BootstrapVue source SCSS files
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';
// General style overrides and custom classes
body {
margin: 0;
}
.my-widget {
color: var(--danger);
}
// ...
</style>custom-vars.scss 檔案必須在 Bootstrap 的 SCSS 和 BootstrapVue 的 SCSS 載入之前，它包含您對 Bootstrap v4 變數的覆寫 （例如色彩、陰影、字型大小、斷點等等）。
透過應用程式主進入點
建立一個含有您自訂主題變數的 SCSS 檔案，並且匯入 Bootstrap 和 BootstrapVue 的 SCSS。
// File: custom.scss
// Define your variable overrides here
$enable-shadows: true;
$enable-gradients: true;
$grid-breakpoints: (
xs: 0,
sm: 456px,
md: 789px,
lg: 999px,
xl: 1234px
);
$bv-enable-table-stacked: false;
// Include Bootstrap and BootstrapVue SCSS files
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';
// General style overrides and custom classes
body {
margin: 0;
}
.my-widget {
color: var(--danger);
}
// ...接著在您的應用程式主程式碼進入點中匯入那個單一的 SCSS 檔案。
import 'custom.scss'您可以在 node_modules/bootstrap/scss/_variables.scss 找到所有可用的變數。
在 Vue 中使用 scss 請務必包含 sass 和 sass-loader
npm install --save-dev sass sass-loader
注意：您可能需要根據您的建置環境調整 SCSS 匯入路徑。
如需建立自訂主題配色的範例，請參閱 建立自訂變異 區段的 色彩變異 參考頁面。
CSS 變數
Bootstrap 的 SCSS 會於已編譯的 CSS 中產生數十個 CSS 自訂屬性（變數）。這些提供容易取用的常用值，例如主題配色、斷點和主要字型堆疊，當在瀏覽器的檢查工具、程式沙盒或一般建置雛型時。
可用的 Bootstrap CSS 變數
以下是產生出來的 CSS 變數。顯示的值基於 Bootstrap v4 預設值
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
}藉由設定 SASS 變數和映射，並重新編譯 SCSS，以上產生出來的 SCSS 變數也會更新。
範例
CSS 變數提供與 SASS 的變數類似的彈性，但不需要在傳送至瀏覽器之前進行編譯。例如，這裡我們透過使用 CSS 變數，重設我們頁面的字型與連結樣式，以及建立一個使用主題配色的自訂類別。
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
.custom-class {
color: var(--primary);
background-color: var(--dark);
}另請參閱
有關付費儀表板和主題，請參閱文件中的
主題區段。如果您正在定義自訂斷點名稱，請參閱 BootstrapVue 設定 頁面，了解如何更新 BootstrapVue
<b-col>和<b-form-group>斷點特定的道具。有關 Bootstrap SCSS/CSS 主題設定的更詳細資訊，請參閱 Bootstrap v4 官方主題設定文件。