Bootstrap5 小工具

Bootstrap 5 小工具

掌握Bootstrap 5的实用工具类，快速构建美观、一致的界面。

开始学习 快速参考
间距工具 颜色工具 排版工具 边框工具 阴影工具

Bootstrap 5 小工具介绍

Bootstrap 5 提供了大量实用的小工具类，可以帮助您快速构建界面而无需编写自定义CSS。

这些小工具类涵盖了：

  • 间距（边距和填充）
  • 颜色和背景
  • 排版和文本对齐
  • 边框和圆角
  • 阴影和视觉效果
  • 尺寸和定位
  • 弹性盒子布局
  • 可见性和显示
小工具的优势
快速开发

无需编写自定义CSS

一致性

保持设计系统一致

响应式

内置响应式断点

可定制

基于Sass变量

间距工具

Bootstrap 5 提供了一套完整的间距工具类，用于设置元素的外边距（margin）和内边距（padding）。

边距示例

使用 m-* 类设置外边距：

m-1
m-2
m-3
m-4
m-5
<div class="m-1">m-1</div>
<div class="m-2">m-2</div>
<div class="m-3">m-3</div>
<div class="m-4">m-4</div>
<div class="m-5">m-5</div>
填充示例

使用 p-* 类设置内边距：

p-1
p-2
p-3
p-4
p-5
<div class="p-1">p-1</div>
<div class="p-2">p-2</div>
<div class="p-3">p-3</div>
<div class="p-4">p-4</div>
<div class="p-5">p-5</div>
方向性间距

您可以指定间距的方向：顶部 (t)、底部 (b)、左侧 (s/start)、右侧 (e/end)、水平 (x)、垂直 (y)

mt-3 (上边距)
mb-3 (下边距)
ms-3 (左边距)
me-3 (右边距)
<div class="mt-3">上边距</div>
<div class="mb-3">下边距</div>
<div class="ms-3">左边距</div>
<div class="me-3">右边距</div>
<div class="mx-3">水平边距</div>
<div class="my-3">垂直边距</div>

颜色工具

Bootstrap 5 提供了一套完整的颜色工具类，用于设置文本颜色、背景颜色和边框颜色。

文本颜色

使用 text-* 类设置文本颜色：

.text-primary

.text-success

.text-danger

.text-warning

.text-info

<p class="text-primary">.text-primary</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>
背景颜色

使用 bg-* 类设置背景颜色：

.bg-primary
.bg-success
.bg-danger
.bg-warning
.bg-info
<div class="bg-primary">.bg-primary</div>
<div class="bg-success">.bg-success</div>
<div class="bg-danger">.bg-danger</div>
<div class="bg-warning">.bg-warning</div>
<div class="bg-info">.bg-info</div>
颜色渐变

Bootstrap 5 还提供了渐变背景颜色：

.bg-primary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
<div class="bg-primary bg-gradient">渐变背景</div>
<div class="bg-success bg-gradient">渐变背景</div>
<div class="bg-danger bg-gradient">渐变背景</div>

排版工具

Bootstrap 5 提供了一套完整的排版工具类，用于设置文本对齐、字体粗细、字体样式等。

文本对齐

使用 text-* 类设置文本对齐：

.text-start (左对齐)

.text-center (居中对齐)

.text-end (右对齐)

<p class="text-start">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-end">右对齐</p>
字体粗细和样式

使用 fw-* 和 fst-* 类设置字体粗细和样式：

.fw-bold (粗体)

.fw-bolder (更粗)

.fw-normal (正常)

.fw-light (细体)

.fst-italic (斜体)

<p class="fw-bold">粗体</p>
<p class="fw-bolder">更粗</p>
<p class="fw-normal">正常</p>
<p class="fw-light">细体</p>
<p class="fst-italic">斜体</p>
文本转换和装饰

Bootstrap 5 提供了文本转换和装饰的工具类：

.text-lowercase (小写)

.text-uppercase (大写)

.text-capitalize (首字母大写)

.text-decoration-underline (下划线)

.text-decoration-line-through (删除线)

<p class="text-lowercase">小写文本</p>
<p class="text-uppercase">大写文本</p>
<p class="text-capitalize">首字母大写</p>
<p class="text-decoration-underline">下划线</p>
<p class="text-decoration-line-through">删除线</p>

边框工具

Bootstrap 5 提供了一套完整的边框工具类，用于设置边框样式、颜色和圆角。

边框样式

使用 border 类设置边框：

.border
.border-top
.border-end
.border-bottom
.border-start
<div class="border">.border</div>
<div class="border-top">.border-top</div>
<div class="border-end">.border-end</div>
<div class="border-bottom">.border-bottom</div>
<div class="border-start">.border-start</div>
边框颜色

使用 border-* 类设置边框颜色：

.border-primary
.border-success
.border-danger
.border-warning
.border-info
<div class="border border-primary">.border-primary</div>
<div class="border border-success">.border-success</div>
<div class="border border-danger">.border-danger</div>
<div class="border border-warning">.border-warning</div>
<div class="border border-info">.border-info</div>
圆角和边框宽度

Bootstrap 5 提供了圆角和边框宽度的工具类：

.rounded
.rounded-top
.rounded-circle
.border-3
.border-5
<div class="border rounded">.rounded</div>
<div class="border rounded-top">.rounded-top</div>
<div class="border rounded-circle">.rounded-circle</div>
<div class="border border-3">.border-3</div>
<div class="border border-5">.border-5</div>

阴影工具

Bootstrap 5 提供了阴影工具类，用于为元素添加阴影效果。

阴影示例

使用 shadow-* 类添加阴影：

.shadow-none
.shadow-sm
.shadow
.shadow-lg
<div class="shadow-none">.shadow-none</div>
<div class="shadow-sm">.shadow-sm</div>
<div class="shadow">.shadow</div>
<div class="shadow-lg">.shadow-lg</div>
交互式阴影

阴影类可以与交互类结合使用：

悬停查看阴影效果
点击切换阴影大小 
<div class="shadow-sm"
     onmouseover="this.classList.add('shadow')"
     onmouseout="this.classList.remove('shadow')">
    悬停查看阴影效果
</div>

<div class="shadow"
     onclick="this.classList.toggle('shadow-lg')">
    点击切换阴影大小
</div>

小工具快速参考

间距工具

边距
m-0 到 m-5
mt-*, mb-*, ms-*, me-*
mx-*, my-*
填充
p-0 到 p-5
pt-*, pb-*, ps-*, pe-*
px-*, py-*
自动间距
m-auto
mx-auto
my-auto

颜色工具

文本颜色
text-primary
text-secondary
text-success
text-danger
text-warning
背景颜色
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
渐变背景
bg-gradient

排版工具

文本对齐
text-start
text-center
text-end
字体粗细
fw-bold
fw-bolder
fw-normal
fw-light
fw-lighter
文本转换
text-lowercase
text-uppercase
text-capitalize

边框工具

边框添加
border
border-top
border-end
border-bottom
border-start
边框颜色
border-primary
border-secondary
border-success
border-danger
border-warning
圆角
rounded
rounded-top
rounded-end
rounded-bottom
rounded-start
rounded-circle
rounded-pill

阴影工具

阴影大小
shadow-none
shadow-sm
shadow
shadow-lg
上一章: 侧边栏导航 下一章: Flex布局