网格系统
| 类名 | 说明 |
|---|
.container | 固定宽度响应式容器 |
.container-fluid | 100% 宽度容器 |
.row | 水平网格行 |
.col-{size}-{1-12} | 列，size: sm/md/lg/xl/xxl |
.col-{size}-auto | 根据内容自动调整列宽 |
.g-{0-5} / .gx-* / .gy-* | 间距控制 |
.row-cols-{size}-{2-6} | 快速等分布局 |
颜色 & 背景
primarysecondarysuccessdangerwarninginfolightdark
| 类 | 前缀示例 | 说明 |
|---|
| 文本色 | .text-{color} | text-primary, text-danger 等 |
| 背景色 | .bg-{color} | bg-primary, bg-dark 等 |
| 背景透明度 | .bg-opacity-{10-100} | 10/25/50/75/100 |
| 文本透明度 | .text-opacity-{10-100} | 10/25/50/75/100 |
间距 (Margin / Padding)
格式: {property}{side}-{size}
| 属性 | 方向 | 尺寸 (0-5, auto) |
|---|
m = margin, p = padding | t top, b bottom, s start, e end, x x轴, y y轴 | 0=0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem |
<div class="mt-3 mb-2 px-4 py-5">常用间距组合</div>
排版
| 类名 | 说明 |
|---|
.fs-{1-6} | 字体大小 1(最大)~6(最小) |
.fw-{bold/bolder/semibold/normal/light/lighter} | 字重 |
.text-{start/center/end} | 对齐 |
.text-{lowercase/uppercase/capitalize} | 大小写 |
.lh-{1/sm/base/lg} | 行高 |
.font-monospace | 等宽字体 |
显示 & 弹性盒
| 类名 | 说明 |
|---|
.d-{none/inline/block/flex/inline-block/grid/table} | display 属性 |
.d-{breakpoint}-{value} | 响应式显示 |
.d-print-{value} | 打印显示控制 |
.flex-{row/column} | Flex 方向 |
.justify-content-{start/center/end/between/around/evenly} | 主轴对齐 |
.align-items-{start/center/end/baseline/stretch} | 交叉轴对齐 |
.flex-{wrap/nowrap} | 换行 |
.order-{1-5} | 排列顺序 |
定位
.position-static .position-relative .position-absolute
.position-fixed .position-sticky
.top-{0/50/100} .bottom-{0/50/100} .start-{0/50/100} .end-{0/50/100}
.translate-middle .translate-middle-x .translate-middle-y
边框 & 阴影
// 边框
.border .border-{top/bottom/start/end} .border-{0-5}
.border-{primary/secondary/success/danger/warning/info/light/dark}
.rounded .rounded-{0/1/2/3/4/5} .rounded-circle .rounded-pill
// 阴影
.shadow-none .shadow-sm .shadow .shadow-lg
常用组件速记
<!-- 按钮 -->
<button class="btn btn-{primary/outline-primary/ Danger /Success} btn-{sm/lg}">
<!-- 警告框 -->
<div class="alert alert-{color} alert-dismissible" role="alert">
<!-- 徽章 -->
<span class="badge bg-{color} rounded-pill">
<!-- 卡片 -->
<div class="card"><div class="card-body"><h5 class="card-title">
<!-- 模态框按钮 -->
<button data-bs-toggle="modal" data-bs-target="#myModal">