Bootstrap 是全球最流行的 HTML、CSS 與 JavaScript 前端工具包。它的視覺語言是幾代開發者共同的記憶：12 欄響應式格線與容器間距、統一的主藍（#0D6EFD）按鈕與連結、品牌紫（#7952B3）點綴、0.375rem 圓角、卡片、模態視窗與導覽列等經典元件，以及 1rem 內文的系統字型堆疊。適合快速搭建與熟悉感優先的產品。
Bootstrap前端框架
提示詞範本
基礎範本
Design a Bootstrap-inspired interface. - 12-column responsive grid with .container gutters; - Primary blue #0D6EFD buttons and links, brand purple #7952B3; - 0.375rem border radius, standard form controls and input groups; - Cards, modals, and navbar patterns everyone recognizes; - System font stack with 1rem body. Colors: #0D6EFD, #7952B3, #F8F9FA, #212529 with #0D6EFD accent. Typography: system-ui.
變體提示詞
📱 行動裝置
Design a mobile app with Bootstrap aesthetics. Use Bootstrap color identity with #0D6EFD accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Bootstrap style. Use Bootstrap color identity with #0D6EFD accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Bootstrap design language. Use Bootstrap color identity with #0D6EFD accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Bootstrap visual identity. Use Bootstrap color identity with #0D6EFD accents. Compelling, conversion-focused.
使用範例
Bootstrap 管理儀表板
儀表板Build an admin dashboard with Bootstrap style: responsive grid, cards, tables, and #0D6EFD primary buttons.
Bootstrap 到達頁
到達頁Create a landing page with Bootstrap design language: navbar, hero, feature columns, and a standard footer.
✅ 適用情境
- 快速開發
- 經典 Web 應用
- 響應式格線
❌ 不適用情境
- 追求獨特品牌視覺的產品
- 拒絕格線體系的設計實驗
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。