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 编程工具使用。