Bootstrap4 小工具与实用类

小工具的作用

Bootstrap 4 提供了丰富的小工具类(Utility Classes)，这些单一用途的类可以帮助您快速构建自定义用户界面，而无需编写额外的CSS。这些工具类涵盖了间距、颜色、边框、阴影、显示属性、定位等多个方面。

间距工具 (Spacing)

使用间距工具类快速设置元素的外边距(margin)和内边距(padding)。

间距工具示例

外边距示例：

.mb-2 (下边距 0.5rem)

.mt-3 (上边距 1rem)

.mx-4 (左右边距 1.5rem)

.my-5 (上下边距 3rem)

.m-0 (所有边距 0)

内边距示例：

.p-1 (内边距 0.25rem)

.p-3 (内边距 1rem)

.px-4 (左右内边距 1.5rem)

.py-5 (上下内边距 3rem)

.p-0 (所有内边距 0)

HTML 代码：

                                    
                                        <!-- 外边距 -->

                                        <div class="mb-2">.mb-2 (下边距 0.5rem)</div>

                                        <div class="mt-3">.mt-3 (上边距 1rem)</div>

                                        <div class="mx-4">.mx-4 (左右边距 1.5rem)</div>

                                        <div class="my-5">.my-5 (上下边距 3rem)</div>

                                        <div class="m-0">.m-0 (所有边距 0)</div>

                                        <!-- 内边距 -->

                                        <div class="p-1">.p-1 (内边距 0.25rem)</div>

                                        <div class="p-3">.p-3 (内边距 1rem)</div>

                                        <div class="px-4">.px-4 (左右内边距 1.5rem)</div>

                                        <div class="py-5">.py-5 (上下内边距 3rem)</div>

                                        <div class="p-0">.p-0 (所有内边距 0)</div>

间距类命名规则：

                                    
                                        {属性}{方向}-{大小}

                                        属性：

                                        - m: margin

                                        - p: padding

                                        方向：

                                        - t: top

                                        - b: bottom

                                        - l: left

                                        - r: right

                                        - x: left 和 right

                                        - y: top 和 bottom

                                        - 空白: 所有方向

                                        大小：

                                        - 0: 0

                                        - 1: 0.25rem

                                        - 2: 0.5rem

                                        - 3: 1rem

                                        - 4: 1.5rem

                                        - 5: 3rem

                                        - auto: auto

颜色工具 (Colors)

使用颜色工具类设置文本颜色和背景颜色。

颜色工具示例

文本颜色：

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-white

.text-muted

背景颜色：

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

HTML 代码：

                                    
                                        <!-- 文本颜色 -->

                                        <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 bg-dark">.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 bg-dark">.text-white</p>

                                        <!-- 背景颜色 -->

                                        <div class="bg-primary text-white">.bg-primary</div>

                                        <div class="bg-secondary text-white">.bg-secondary</div>

                                        <div class="bg-success text-white">.bg-success</div>

                                        <div class="bg-danger text-white">.bg-danger</div>

                                        <div class="bg-warning text-dark">.bg-warning</div>

                                        <div class="bg-info text-white">.bg-info</div>

                                        <div class="bg-light text-dark">.bg-light</div>

                                        <div class="bg-dark text-white">.bg-dark</div>

                                        <div class="bg-white text-dark">.bg-white</div>

                                        <div class="bg-transparent text-dark">.bg-transparent</div>

边框工具 (Borders)

使用边框工具类快速添加、移除或自定义元素边框。

边框工具示例

边框添加：

.border

.border-top

.border-right

.border-bottom

.border-left

边框颜色：

.border-primary

.border-secondary

.border-success

.border-danger

.border-warning

.border-info

.border-light

.border-dark

.border-white

边框宽度：

.border-1

.border-2

.border-3

.border-4

.border-5

边框圆角：

.rounded

.rounded-top

.rounded-right

.rounded-bottom

.rounded-left

.rounded-circle

.rounded-pill

.rounded-0

HTML 代码：

                                    
                                        <!-- 边框添加 -->

                                        <div class="border">.border</div>

                                        <div class="border-top">.border-top</div>

                                        <div class="border-right">.border-right</div>

                                        <div class="border-bottom">.border-bottom</div>

                                        <div class="border-left">.border-left</div>

                                        <!-- 边框颜色 -->

                                        <div class="border border-primary">.border-primary</div>

                                        <div class="border border-secondary">.border-secondary</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>

                                        <div class="border border-light">.border-light</div>

                                        <div class="border border-dark">.border-dark</div>

                                        <div class="border border-white">.border-white</div>

                                        <!-- 边框宽度 -->

                                        <div class="border border-1">.border-1</div>

                                        <div class="border border-2">.border-2</div>

                                        <div class="border border-3">.border-3</div>

                                        <div class="border border-4">.border-4</div>

                                        <div class="border border-5">.border-5</div>

                                        <!-- 边框圆角 -->

                                        <div class="border rounded">.rounded</div>

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

                                        <div class="border rounded-right">.rounded-right</div>

                                        <div class="border rounded-bottom">.rounded-bottom</div>

                                        <div class="border rounded-left">.rounded-left</div>

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

                                        <div class="border rounded-pill">.rounded-pill</div>

                                        <div class="border rounded-0">.rounded-0</div>

阴影工具 (Shadows)

使用阴影工具类为元素添加或移除阴影效果。

阴影工具示例

.shadow-none

.shadow-sm

.shadow

.shadow-lg

HTML 代码：

                                    
                                        <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>

显示属性工具 (Display)

使用显示属性工具类控制元素的显示方式。

显示属性工具示例

.d-inline

.d-block

.d-inline-block

.d-flex

.d-inline-flex

响应式显示：

.d-none .d-md-block

.d-block .d-md-none

.d-lg-inline

.d-print-block

HTML 代码：

                                    
                                        <!-- 基本显示属性 -->

                                        <div class="d-inline">.d-inline</div>

                                        <div class="d-inline">.d-inline</div>

                                        <div class="d-block">.d-block</div>

                                        <div class="d-inline-block">.d-inline-block</div>

                                        <div class="d-none">.d-none</div>

                                        <div class="d-flex">.d-flex</div>

                                        <div class="d-inline-flex">.d-inline-flex</div>

                                        <!-- 响应式显示 -->

                                        <div class="d-none d-md-block">.d-none .d-md-block</div>

                                        <div class="d-block d-md-none">.d-block .d-md-none</div>

                                        <div class="d-lg-inline">.d-lg-inline</div>

                                        <div class="d-print-block">.d-print-block</div>

定位工具 (Position)

使用定位工具类控制元素的定位方式。

定位工具示例

Static

Relative

Absolute

Fixed

Sticky

HTML 代码：

                                    
                                        <div class="position-static">Static</div>

                                        <div class="position-relative" style="top: 20px; left: 20px;">Relative</div>

                                        <div class="position-absolute" style="top: 50px; right: 20px;">Absolute</div>

                                        <div class="position-fixed" style="bottom: 20px; left: 50%;">Fixed</div>

                                        <div class="position-sticky" style="top: 10px;">Sticky</div>

浮动工具 (Float)

使用浮动工具类控制元素的浮动方式。

浮动工具示例

.float-left

.float-right

.float-none

清除浮动：

左浮动元素

右浮动元素

清除浮动后的内容

响应式浮动：

.float-md-left

.float-lg-right

.float-xl-none

HTML 代码：

                                    
                                        <!-- 基本浮动 -->

                                        <div class="float-left">.float-left</div>

                                        <div class="float-right">.float-right</div>

                                        <div class="float-none">.float-none</div>

                                        <!-- 清除浮动 -->

                                        <div class="float-left">左浮动元素</div>

                                        <div class="float-right">右浮动元素</div>

                                        <div class="clearfix"></div>

                                        <p>清除浮动后的内容</p>

                                        <!-- 响应式浮动 -->

                                        <div class="float-md-left">.float-md-left</div>

                                        <div class="float-lg-right">.float-lg-right</div>

                                        <div class="float-xl-none">.float-xl-none</div>

尺寸工具 (Sizing)

使用尺寸工具类控制元素的宽度和高度。

尺寸工具示例

宽度：

.w-25

.w-50

.w-75

.w-100

.w-auto

高度：

.h-25

.h-50

.h-75

.h-100

.h-auto

最大宽度/高度：

.mw-100

.mh-100

HTML 代码：

                                    
                                        <!-- 宽度 -->

                                        <div class="w-25">.w-25</div>

                                        <div class="w-50">.w-50</div>

                                        <div class="w-75">.w-75</div>

                                        <div class="w-100">.w-100</div>

                                        <div class="w-auto">.w-auto</div>

                                        <!-- 高度 -->

                                        <div class="h-25">.h-25</div>

                                        <div class="h-50">.h-50</div>

                                        <div class="h-75">.h-75</div>

                                        <div class="h-100">.h-100</div>

                                        <div class="h-auto">.h-auto</div>

                                        <!-- 最大宽度/高度 -->

                                        <div class="mw-100">.mw-100</div>

                                        <div class="mh-100">.mh-100</div>

文本工具 (Text)

使用文本工具类控制文本的对齐、换行、大小写等属性。

文本工具示例

文本对齐：

.text-left

.text-center

.text-right

文本换行：

.text-wrap 长文本换行示例

.text-nowrap 长文本不换行示例

文本大小写：

.text-lowercase

.text-uppercase

.text-capitalize

字体粗细：

.font-weight-bold

.font-weight-bolder

.font-weight-normal

.font-weight-light

.font-weight-lighter

.font-italic

HTML 代码：

                                    
                                        <!-- 文本对齐 -->

                                        <div class="text-left">.text-left</div>

                                        <div class="text-center">.text-center</div>

                                        <div class="text-right">.text-right</div>

                                        <!-- 文本换行 -->

                                        <div class="text-wrap">.text-wrap 长文本换行示例</div>

                                        <div class="text-nowrap">.text-nowrap 长文本不换行示例</div>

                                        <!-- 文本大小写 -->

                                        <div class="text-lowercase">.text-lowercase</div>

                                        <div class="text-uppercase">.text-uppercase</div>

                                        <div class="text-capitalize">.text-capitalize</div>

                                        <!-- 字体粗细 -->

                                        <div class="font-weight-bold">.font-weight-bold</div>

                                        <div class="font-weight-bolder">.font-weight-bolder</div>

                                        <div class="font-weight-normal">.font-weight-normal</div>

                                        <div class="font-weight-light">.font-weight-light</div>

                                        <div class="font-weight-lighter">.font-weight-lighter</div>

                                        <div class="font-italic">.font-italic</div>

垂直对齐工具 (Vertical align)

使用垂直对齐工具类控制内联或表格单元格元素的垂直对齐方式。

垂直对齐工具示例

baseline top middle bottom text-top text-bottom

HTML 代码：

                                    
                                        <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>

可见性工具 (Visibility)

使用可见性工具类控制元素的可见性。

可见性工具示例

.visible

.invisible

HTML 代码：

                                    
                                        <div class="visible">.visible</div>

                                        <div class="invisible">.invisible</div>

溢出工具 (Overflow)

使用溢出工具类控制元素内容溢出时的处理方式。

溢出工具示例

溢出处理：

.overflow-auto

.overflow-hidden

.overflow-visible

.overflow-scroll

HTML 代码：

                                    
                                        <div class="overflow-auto">

                                          <div class="overflow-content">.overflow-auto</div>

                                        </div>

                                        <div class="overflow-hidden">

                                          <div class="overflow-content">.overflow-hidden</div>

                                        </div>

                                        <div class="overflow-visible">

                                          <div class="overflow-content">.overflow-visible</div>

                                        </div>

                                        <div class="overflow-scroll">

                                          <div class="overflow-content">.overflow-scroll</div>

                                        </div>

最佳实践

使用小工具与实用类时，遵循以下最佳实践可以提升开发效率和代码质量。

小工具最佳实践

优先使用工具类 - 对于简单的样式调整，优先使用工具类而不是自定义CSS
组合使用 - 将多个工具类组合使用以实现复杂的效果
响应式设计 - 利用响应式工具类在不同屏幕尺寸下应用不同的样式
保持一致性 - 在整个项目中保持工具类使用的一致性
避免过度使用 - 当样式变得复杂时，考虑使用自定义CSS而不是过多的工具类
语义化命名 - 在使用工具类的同时保持HTML的语义化结构

学习完成！

恭喜！您已经掌握了Bootstrap 4小工具与实用类的使用方法。这些工具类是Bootstrap框架的核心优势之一，合理使用可以大大提高开发效率并保持代码的一致性。

继续学习下一章：Bootstrap 4 实用工具

上一章:Bootstrap4 滚动监听下一章:Bootstrap4 小工具

Bootstrap4教程

Bootstrap4 小工具与实用类

小工具的作用

间距工具 (Spacing)

颜色工具 (Colors)

边框工具 (Borders)

阴影工具 (Shadows)

显示属性工具 (Display)

定位工具 (Position)

浮动工具 (Float)

尺寸工具 (Sizing)

文本工具 (Text)

垂直对齐工具 (Vertical align)

可见性工具 (Visibility)

溢出工具 (Overflow)

最佳实践

学习完成！