Bootstrap图标速查
Bootstrap栅格组件类与FontAwesome图标速查
| 🧱 Bootstrap栅格 | |
|---|---|
.container / .container-fluid | 固定/通栏容器 |
.row + .col-* / .col-md-6 | 行+栅格列 |
断点 sm/md/lg/xl/xxl | 576/768/992/1200/1400 |
.g-3 / .gap-2 | 栅格间距/flex间距 |
| 🔘 Bootstrap组件类 | |
.btn .btn-primary | 主按钮 |
.card / .card-body / .card-title | 卡片 |
.form-control / .form-label | 表单控件 |
.alert .alert-success | 提示框 |
.modal / .toast / .dropdown | 弹窗/轻提示/下拉 |
.d-flex .justify-content-center | 弹性居中 |
| 🎨 FontAwesome用法 | |
<i class="fas fa-home"></i> | 实心图标 |
far / fal / fab | 常规/轻量/品牌前缀 |
fa-search / fa-user / fa-cog | 搜索/用户/齿轮 |
fa-check / fa-times / fa-trash | 对勾/关闭/删除 |
fa-download / fa-copy / fa-link | 下载/复制/链接 |
fa-2x / fa-lg / fa-fw | 放大2倍/大/等宽对齐 |
📖 使用说明
本页为速查表，按分类查阅。
💬 用户评论 (0)
还没有评论，快来抢沙发！