一、边框（Border）
添加/移除边框
<span class="border"></span> <!-- 四边 -->
<span class="border-top"></span> <!-- 上 -->
<span class="border-right"></span> <!-- 右 -->
<span class="border-bottom"></span> <!-- 下 -->
<span class="border-left"></span> <!-- 左 -->Code language: HTML, XML (xml)移除边框：.border-0、.border-top-0、.border-right-0、.border-bottom-0、.border-left-0
边框颜色
基于主题色：
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>Code language: HTML, XML (xml)圆角（Border Radius）
<img class="rounded"> <!-- 默认圆角 -->
<img class="rounded-top"> <!-- 上圆角 -->
<img class="rounded-right"> <!-- 右圆角 -->
<img class="rounded-bottom"> <!-- 下圆角 -->
<img class="rounded-left"> <!-- 左圆角 -->
<img class="rounded-circle"> <!-- 圆形（裁剪成正圆） -->
<img class="rounded-pill"> <!-- 药丸形（大圆角） -->
<img class="rounded-0"> <!-- 无圆角 -->Code language: HTML, XML (xml)尺寸：.rounded-sm（小）、.rounded-lg（大）
二、颜色（Color）
文本颜色
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50">.text-white-50</p>Code language: HTML, XML (xml)链接自动带悬停变暗效果：
<a href="#" class="text-primary">Primary link</a>Code language: HTML, XML (xml)背景颜色
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Code language: HTML, XML (xml)注意：背景色类不设置 color，深色背景需配合 .text-white，浅色背景配合 .text-dark。
三、浮动（Float）
<div class="float-left">Float left</div>
<div class="float-right">Float right</div>
<div class="float-none">Don't float</div>Code language: HTML, XML (xml)响应式浮动（基于断点）：
| 类 | 断点 |
|---|---|
.float-sm-left / right / none | sm 及以上 |
.float-md-left / right / none | md 及以上 |
.float-lg-left / right / none | lg 及以上 |
.float-xl-left / right / none | xl 及以上 |
注意：对 flex 子项无效。
四、溢出（Overflow）
<div class="overflow-auto">...</div> <!-- 超出时显示滚动条 -->
<div class="overflow-hidden">...</div> <!-- 超出时隐藏 -->Code language: HTML, XML (xml)五、定位（Position）
基础类
<div class="position-static">...</div> <!-- 默认，static -->
<div class="position-relative">...</div> <!-- 相对定位 -->
<div class="position-absolute">...</div> <!-- 绝对定位 -->
<div class="position-fixed">...</div> <!-- 固定定位 -->
<div class="position-sticky">...</div> <!-- 粘性定位（position: sticky） -->Code language: HTML, XML (xml)固定位置
<div class="fixed-top">...</div> <!-- 固定在视口顶部，左右撑满 -->
<div class="fixed-bottom">...</div> <!-- 固定在视口底部，左右撑满 -->Code language: HTML, XML (xml)粘顶
<div class="sticky-top">...</div>Code language: HTML, XML (xml)注意：position: sticky 在 IE11/10 中降级为 relative，需浏览器支持。
六、阴影（Box Shadow）
<div class="shadow-none p-3">No shadow</div>
<div class="shadow-sm p-3">Small shadow</div>
<div class="shadow p-3">Regular shadow</div>
<div class="shadow-lg p-3">Larger shadow</div>Code language: HTML, XML (xml)七、尺寸（Width / Height）
宽度（相对于父容器）
<div class="w-25">25%</div>
<div class="w-50">50%</div>
<div class="w-75">75%</div>
<div class="w-100">100%</div>
<div class="w-auto">auto</div>Code language: HTML, XML (xml)高度（相对于父容器）
<div class="h-25">25%</div>
<div class="h-50">50%</div>
<div class="h-75">75%</div>
<div class="h-100">100%</div>
<div class="h-auto">auto</div>Code language: HTML, XML (xml)注意：高度类需要父容器有明确高度才生效。
八、文本工具类
对齐
<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>Code language: HTML, XML (xml)响应式对齐：
| 类 | 断点 |
|---|---|
.text-sm-left / center / right | sm 及以上 |
.text-md-left / center / right | md 及以上 |
.text-lg-left / center / right | lg 及以上 |
.text-xl-left / center / right | xl 及以上 |
换行
<div class="text-wrap" style="width: 6rem;">This text should wrap.</div>
<div class="text-nowrap" style="width: 8rem;">This text should overflow.</div>Code language: HTML, XML (xml)文本转换
<p class="text-lowercase">LOWERCASED TEXT.</p>
<p class="text-uppercase">uppercased text.</p>
<p class="text-capitalize">capiTaliZed text.</p>Code language: HTML, XML (xml)字体粗细与斜体
<p class="font-weight-bold">Bold</p>
<p class="font-weight-bolder">Bolder（相对父级）</p>
<p class="font-weight-normal">Normal</p>
<p class="font-weight-light">Light</p>
<p class="font-weight-lighter">Lighter（相对父级）</p>
<p class="font-italic">Italic text</p>Code language: HTML, XML (xml)垂直对齐
仅影响 inline、inline-block、inline-table、table-cell 元素：
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>Code language: HTML, XML (xml)九、可见性（Visibility）
<div class="visible">...</div> <!-- visibility: visible -->
<div class="invisible">...</div> <!-- visibility: hidden（仍占空间） -->Code language: HTML, XML (xml)与 display: none 不同，.invisible 元素仍占据页面布局空间。