Bootstrap 工具类大全

掌握Bootstrap常用工具类：间距、颜色、边框、阴影、文本对齐、显示与隐藏 · 难度：入门 · +15XP

Bootstrap 工具类

Bootstrap提供了丰富的CSS工具类，无需写CSS即可快速调整样式。

间距 Spacing

格式：{property}{sides}-{size}

property: m(margin) / p(padding)

sides: t b s(start) e(end) x y 或空(四边)

size: 0~5 / auto

<div class="mt-3 mb-2 px-4 py-2">上边距3 下边距2 左右内边距4 上下内边距2</div>
<div class="mx-auto" style="width:200px;">水平居中</div>

颜色 Colors

<p class="text-primary">主题色文字</p>
<p class="text-danger">危险/红色</p>
<p class="text-success">成功/绿色</p>
<p class="bg-warning text-dark">黄色背景</p>
<p class="bg-info text-white">青色背景+白色字</p>

边框与圆角

<div class="border rounded">边框+圆角</div>
<div class="border-top border-primary rounded-circle">圆</div>
<div class="shadow">阴影</div>

显示与排版

<span class="d-none d-md-block">小屏隐藏，中屏以上显示</span>
<p class="text-center text-md-start">居中，md+靠左</p>
<p class="fw-bold fst-italic">加粗倾斜</p>

💡 练习

用Bootstrap工具类创建一个响应式卡片：有间距、圆角、阴影、颜色。