Bootstrap图标速查

📝 文章教程 · 🕐 2025-08-11 · 👁 1 次

📌 摘要：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倍/大/等宽对齐