Bootstrap 設計原則

Bootstrap的設計原則是採用架構與樣式分離原則，架構就像是房屋的結構，有方體、長條、圓柱等架構；而樣式就像是房屋的裝潢樣式，有美式、歐式、日式、南洋風等。
使用架構與樣式分離原則，圓柱型的房屋跟長條型的房屋都可以直接套用設計好的樣式，不用每次蓋都要重頭設計。
簡單來說，使用架構與樣式分離原則可以幫助我們重複使用程式碼，使程式碼更簡潔、更容易維護。

舉下列程式碼為例:

<--藍色button-->
<button type="button" class="btn btn-primary">Primary</button>

<--紅色button-->
<button type="button" class="btn btn-danger">Danger</button>

當中.button就是架構，而.btn-primary與.btn-danger是樣式。
直接套上樣式的class就好，是不是很方便呢?
如果你想了解更多CSS設計原則可以參考此系列文章:OOCSS 容器與內容分離 (最佳實踐)

此外，Bootstrap採用模組化的資料夾結構，不同功能的程式碼被組織到不同的文件和資料夾中。
你可以在官方文件看到它分很多資料夾，例如Components(元件)、Helpers(工具)、Utilities(通用類別)、Layout(排版) 等，這有助於保持程式碼的結構性，使我們能夠快速找到所需的部分。

Bootstrap CSS變數

Bootstrap的"css變數"讓我們能自定義 Bootstrap 的外觀和樣式。

root(全域) CSS 變數

以下是root css變數 的程式碼:

:root {
 //我定義的顏色，淡黃色
 --light-yellow: #f9f7c0;

  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

:root中定義的變數是全域變數，其中--放在要定義的變數名稱前面，而:之後的是變數值。
例如--light-yellow是要定義的變數名稱，#f9f7c0則是它的值。

要使用的時候，寫法如下:

.box {
  background-color: var(--light-yellow);
}

使用 var()包覆住變數，就成了background-color套用的值。

local(區域) css 變數

我們也可以設訂區域變數的值:

.local{
  //我定義的顏色
 --light-yellow: #f9f7c0;
}

寫法也是一樣。

而local css變數也可以覆蓋:root變數(或外層變數)
舉例:

<--HTML-->
<div class="local">
  <div class="box">hi</div>
</div>

//CSS
:root{
  --light-yellow: #f9f7c0; //淡黃色
}

.local{
   --light-yellow:#ff0000;//紅色
}

.box{
  width:200px;
  padding:10px;
  background-color: var(--light-yellow);
}

因為外層內層變數名稱一樣，但值不一樣，.local的變數會覆蓋:root設定的變數值，所以最後.box的背景色會是紅色。
範例

參考資料:
CSS 變數必學知識 - 宣告、繼承及 Bootstrap 中的運用技巧
OOCSS 容器與內容分離 (最佳實踐)
CSS變數