Bootstrap 5 常见组件 Demo（真实可运行）| SE3306

1 栅格系统：一行 12 列，用 col-* 分配宽度 container / row / col

md 及以上：每块 4 列（一行 3 块）；更窄时整行一块

col-12 col-md-4

只写 col（不加数字）：等分剩下的宽度

col

把浏览器窗口拉窄试试：col-md-4 要到 md 断点（≥768px）才生效，比它窄的时候自动退成整行。g-2 控制列之间的间距。

2 导航栏与折叠菜单 navbar / collapse

顶部那条导航栏就是这个组件。把窗口拉窄到 992px 以下，右侧的"汉堡"按钮会出现 —— 点它展开 / 收起菜单，这一下靠的就是 Bootstrap 的 JS。

我是被 collapse 控制的区域，再点一次上面那个按钮就收起来。

3 按钮、按钮组、徽章与进度条 btn / badge / progress

Badge 99+

4 卡片与列表组 card / list-group

card + card-body 是最简单的组合。

按钮

5 表单控件与校验样式 form-control / form-select / input-group

邮箱

请输入合法的邮箱地址。

城市

网址

https://

接收通知

点"提交"看看校验效果（邮箱留空或写错格式会变红）。

6 警告框、下拉菜单与提示 alert / dropdown / tooltip

这是一个可关闭的警告框，点右侧 × 关掉它。

这是一个静态警告框，只加类名，不需要 JS。

下拉菜单、可关闭警告框、Tooltip / Popover 都需要 Bootstrap 的 JS；其中 Tooltip / Popover 还要在页面脚本里手动初始化一次。

7 标签页与模态框 tab / modal

标签页一的内容 —— 切换靠 data-bs-toggle="tab"。

标签页二的内容 —— 只改 data-bs-target 指向的 id。