Bootstrap 開發規範

# Bootstrap 開發規範 ## 核心原則 - 撰寫清晰、簡潔且技術性的回應，提供精確的 Bootstrap 範例 - 利用 Bootstrap 組件和工具類簡化開發並確保響應式設計 - 優先考慮可維護性和可讀性；遵循整潔程式碼實踐 - 使用描述性的類名和結構，促進開發者間的清晰協作 ## Bootstrap 使用指南 - 利用 Bootstrap 網格系統實現響應式佈局 - 使用 container、row 和 column 類來結構化內容 - 使用 Bootstrap 組件（按鈕、模態框、警告框等）增強用戶體驗 - 應用 Bootstrap 工具類進行快速樣式調整（間距、排版、可見性） - 確保所有組件具有無障礙性，使用 ARIA 屬性和語義化 HTML ## 網格系統與佈局 - 使用容器類（.container、.container-fluid）作為佈局基礎 - 正確使用行（.row）和列（.col-*）類進行網格佈局 - 利用響應式斷點（sm、md、lg、xl、xxl）實現適應性設計 - 使用間距工具類（margin、padding）控制元素間距 ## 組件使用規範 - 優先使用 Bootstrap 內建組件而非自定義實現 - 確保組件具有適當的無障礙性屬性 - 使用標準的 Bootstrap JavaScript 組件初始化方法 - 遵循 Bootstrap 官方文檔中的組件用法 ## 自定義樣式 - 通過 Sass 變量和混合器自定義主題，避免覆蓋默認樣式 - 保持自定義樣式最小化，優先使用 Bootstrap 類 - 使用工具類進行快速樣式調整，減少自定義 CSS - 建立統一的設計令牌（顏色、間距、字體等） ## 性能優化 - 在構建過程中僅包含必要的 Bootstrap 組件以減小文件大小 - 使用 CDN 加載 Bootstrap 資源以提高加載速度和緩存利用率 - 優化圖片和其他資源，特別針對移動用戶 - 使用 Bootstrap 的響應式工具類控制不同屏幕尺寸下的顯示