Back to Details

bootstrap

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Bootstrap

Bootstrap

Bootstrap 5 dropped jQuery and embraced modern CSS (Grid, Flexbox, Variables). It remains the safest choice for admin panels and internal tools.
Bootstrap 5 移除了 jQuery，采用了现代 CSS（Grid、Flexbox、Variables）。它仍是搭建管理面板和内部工具的最稳妥选择。

When to Use

适用场景

  • Prototypes: "Get it working" in 5 minutes.
  • Admin Panels: Hundreds of templates available.
  • Quick MVP: When custom design is a secondary concern.
  • 原型开发：5分钟内快速实现可用版本。
  • 管理面板：拥有数百种现成模板。
  • 快速MVP开发：当自定义设计不是首要需求时。

Core Concepts

核心概念

Grid System

网格系统

The 12-column grid (
col-md-6
) is still the industry standard mental model.
12列网格（
col-md-6
）仍是行业通用的标准模型。

Utilities

实用工具类

d-flex
, 
mt-5
, 
text-center
. (Influenced Tailwind).
d-flex
、
mt-5
、
text-center
（对Tailwind产生了影响）。

Components

组件

Modals, Dropdowns, Navbars work out of the box (JS included).
模态框、下拉菜单、导航栏可开箱即用（包含JS代码）。

Best Practices (2025)

2025年最佳实践

Do:
  • Use Data Attributes: 
    data-bs-toggle="modal"
    (No JS code needed).
  • Use CSS Variables: 
    --bs-primary
    makes theming easy.
  • Use SCSS: Customize the build by importing only needed parts.
Don't:
  • Don't include jQuery: Bootstrap 5 doesn't need it.
建议：
  • 使用数据属性：
    data-bs-toggle="modal"
    （无需编写JS代码）。
  • 使用CSS变量：
    --bs-primary
    让主题定制变得简单。
  • 使用SCSS：通过仅导入所需部分来自定义构建包。
不建议：
  • 不要引入jQuery：Bootstrap 5不需要它。

References

参考资料