Bootstrap 4教程 - 响应式Web前端框架
Bootstrap 4 实用工具类 - 快速样式与布局工具
Bootstrap 4 实用工具类 ¶
Bootstrap 4 提供了丰富的实用工具类（Utilities），使我们能够不编写自定义CSS就能快速实现常见的样式和布局效果。这些工具类可以显著提高开发效率，保持代码一致性。
边框工具类 ¶
添加和移除边框 ¶
使用.border类添加边框，使用.border-0或方向性边框类移除特定边框：
html
1<!-- 添加边框 -->
2<div class="border p-2 m-1">所有边框</div>
3
4<!-- 移除特定边框 -->
5<div class="border border-0 p-2 m-1">无边框</div>
6<div class="border border-top-0 p-2 m-1">无顶部边框</div>
7<div class="border border-right-0 p-2 m-1">无右侧边框</div>
8<div class="border border-bottom-0 p-2 m-1">无底部边框</div>
9<div class="border border-left-0 p-2 m-1">无左侧边框</div>边框颜色 ¶
Bootstrap 4 提供了与主题颜色匹配的边框颜色类：
html
1<div class="border border-primary p-2 m-1">主要边框</div>
2<div class="border border-secondary p-2 m-1">次要边框</div>
3<div class="border border-success p-2 m-1">成功边框</div>
4<div class="border border-danger p-2 m-1">危险边框</div>
5<div class="border border-warning p-2 m-1">警告边框</div>
6<div class="border border-info p-2 m-1">信息边框</div>
7<div class="border border-light p-2 m-1">浅色边框</div>
8<div class="border border-dark p-2 m-1">深色边框</div>
9<div class="border border-white p-2 m-1">白色边框</div>边框圆角 ¶
使用.rounded类及其变体来设置边框圆角：
html
1<div class="border rounded p-2 m-1">全圆角</div>
2<div class="border rounded-top p-2 m-1">顶部圆角</div>
3<div class="border rounded-right p-2 m-1">右侧圆角</div>
4<div class="border rounded-bottom p-2 m-1">底部圆角</div>
5<div class="border rounded-left p-2 m-1">左侧圆角</div>
6<div class="border rounded-circle p-2 m-1">圆形</div>
7<div class="border rounded-pill p-2 m-1">药丸形状</div>
8<div class="border rounded-0 p-2 m-1">无圆角</div>
9<div class="border rounded-sm p-2 m-1">小圆角</div>
10<div class="border rounded-lg p-2 m-1">大圆角</div>浮动工具类 ¶
基本浮动 ¶
使用.float-left和.float-right类来设置元素的浮动，使用.clearfix类来清除浮动：
html
1<div class="clearfix">
2 <div class="float-left p-2 bg-info">左浮动元素</div>
3 <div class="float-right p-2 bg-warning">右浮动元素</div>
4</div>响应式浮动 ¶
Bootstrap 4提供了响应式浮动类，可以根据屏幕大小改变浮动行为：
html
1<div class="float-sm-left p-2 bg-info">在小屏幕及以上设备左浮动</div>
2<div class="float-md-left p-2 bg-info">在中等屏幕及以上设备左浮动</div>
3<div class="float-lg-left p-2 bg-info">在大屏幕及以上设备左浮动</div>
4<div class="float-xl-left p-2 bg-info">在超大屏幕设备左浮动</div>
5<div class="float-none p-2 bg-info">不浮动</div>尺寸工具类 ¶
宽度控制 ¶
使用.w-*类来设置元素的宽度：
html
1<div class="w-25 p-2 bg-warning">宽度 25%</div>
2<div class="w-50 p-2 bg-warning">宽度 50%</div>
3<div class="w-75 p-2 bg-warning">宽度 75%</div>
4<div class="w-100 p-2 bg-warning">宽度 100%</div>
5<div class="w-auto p-2 bg-warning">自动宽度</div>
6<div class="mw-100 p-2 bg-warning">最大宽度 100%</div>高度控制 ¶
使用.h-*类来设置元素的高度：
html
1<div style="height:200px;background-color:#f8f9fa;">
2 <div class="h-25 d-inline-block bg-warning">高度 25%</div>
3 <div class="h-50 d-inline-block bg-warning">高度 50%</div>
4 <div class="h-75 d-inline-block bg-warning">高度 75%</div>
5 <div class="h-100 d-inline-block bg-warning">高度 100%</div>
6 <div class="h-auto d-inline-block bg-warning">自动高度</div>
7 <div class="mh-100 d-inline-block bg-warning" style="height:500px">最大高度 100%</div>
8</div>间距工具类 ¶
Bootstrap 4 提供了丰富的间距工具类来控制元素的外边距（margin）和内边距（padding）。
间距格式 ¶
格式：{property}{sides}-{size}
property是m(margin)或p(padding)sides是t(top),b(bottom),l(left),r(right),x(left和right),y(top和bottom)或空白(所有边)size是0到5或auto
外边距示例 ¶
html
1<div class="m-0 p-2 bg-info">外边距 0</div>
2<div class="m-1 p-2 bg-info">外边距 1 (0.25rem = 4px)</div>
3<div class="m-2 p-2 bg-info">外边距 2 (0.5rem = 8px)</div>
4<div class="m-3 p-2 bg-info">外边距 3 (1rem = 16px)</div>
5<div class="m-4 p-2 bg-info">外边距 4 (1.5rem = 24px)</div>
6<div class="m-5 p-2 bg-info">外边距 5 (3rem = 48px)</div>
7<div class="m-auto p-2 bg-info">自动外边距</div>内边距示例 ¶
html
1<div class="p-0 bg-warning">内边距 0</div>
2<div class="p-1 bg-warning">内边距 1 (0.25rem = 4px)</div>
3<div class="p-2 bg-warning">内边距 2 (0.5rem = 8px)</div>
4<div class="p-3 bg-warning">内边距 3 (1rem = 16px)</div>
5<div class="p-4 bg-warning">内边距 4 (1.5rem = 24px)</div>
6<div class="p-5 bg-warning">内边距 5 (3rem = 48px)</div>方向性间距 ¶
html
1<!-- 垂直外边距 -->
2<div class="my-3 p-2 bg-info">上下外边距 3</div>
3
4<!-- 水平外边距 -->
5<div class="mx-3 p-2 bg-info">左右外边距 3</div>
6
7<!-- 特定方向的内边距 -->
8<div class="pt-3 bg-warning">上内边距 3</div>
9<div class="pr-3 bg-warning">右内边距 3</div>
10<div class="pb-3 bg-warning">下内边距 3</div>
11<div class="pl-3 bg-warning">左内边距 3</div>响应式间距 ¶
Bootstrap 4也提供了响应式间距类：
html
1<!-- 在中等屏幕及以上设备有外边距 -->
2<div class="m-md-3 p-2 bg-info">中等屏幕及以上外边距 3</div>文本工具类 ¶
文本对齐 ¶
html
1<p class="text-left">左对齐文本</p>
2<p class="text-center">居中对齐文本</p>
3<p class="text-right">右对齐文本</p>
4<p class="text-sm-right">小屏幕及以上右对齐文本</p>文本转换 ¶
html
1<p class="text-lowercase">小写文本</p>
2<p class="text-uppercase">大写文本</p>
3<p class="text-capitalize">首字母大写文本</p>文本装饰 ¶
html
1<p class="text-decoration-none">无装饰文本</p>
2<p class="font-weight-bold">粗体文本</p>
3<p class="font-weight-normal">正常文本</p>
4<p class="font-weight-light">细体文本</p>
5<p class="font-italic">斜体文本</p>定位工具类 ¶
固定位置和粘性定位 ¶
html
1<div class="fixed-top bg-dark text-white p-2">固定在顶部</div>
2<div class="fixed-bottom bg-dark text-white p-2">固定在底部</div>
3<div class="sticky-top bg-dark text-white p-2">粘性顶部定位</div>可见性控制 ¶
html
1<div class="visible">可见元素</div>
2<div class="invisible">不可见元素（仍占据空间）</div>
3<div class="d-none">隐藏元素（不占据空间）</div>
4<div class="d-md-none d-lg-block">在中等屏幕隐藏，在大屏幕显示</div>显示属性工具类 ¶
基本显示 ¶
html
1<div class="d-inline p-2 bg-primary text-white">行内元素</div>
2<div class="d-inline-block p-2 bg-dark text-white">行内块元素</div>
3<div class="d-block p-2 bg-danger text-white">块级元素</div>响应式显示 ¶
html
1<div class="d-none d-sm-block bg-success p-2">小屏幕及以上可见</div>
2<div class="d-block d-md-none bg-warning p-2">在中等屏幕以下可见</div>实际应用示例 ¶
居中内容块 ¶
html
1<!-- 水平居中 -->
2<div class="w-50 mx-auto p-3 bg-light border">
3 这个内容块在各种屏幕上都会水平居中
4</div>
5
6<!-- 垂直和水平居中（使用Flex） -->
7<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
8 <div class="p-3 bg-light border">
9 这个内容块在水平和垂直方向上都居中
10 </div>
11</div>响应式卡片 ¶
html
1<div class="d-flex flex-wrap">
2 <!-- 在小屏幕上占满宽度，中等屏幕占一半，大屏幕占三分之一 -->
3 <div class="p-2 w-100 w-md-50 w-lg-33">
4 <div class="border rounded p-3">
5 <h5>响应式卡片 1</h5>
6 <p>使用工具类实现的响应式卡片</p>
7 </div>
8 </div>
9
10 <div class="p-2 w-100 w-md-50 w-lg-33">
11 <div class="border rounded p-3">
12 <h5>响应式卡片 2</h5>
13 <p>使用工具类实现的响应式卡片</p>
14 </div>
15 </div>
16
17 <div class="p-2 w-100 w-md-50 w-lg-33">
18 <div class="border rounded p-3">
19 <h5>响应式卡片 3</h5>
20 <p>使用工具类实现的响应式卡片</p>
21 </div>
22 </div>
23</div>为什么使用工具类？ ¶
- 减少自定义CSS: 大多数常见的样式需求可以直接通过工具类实现，无需编写额外CSS。
- 一致性: 工具类使用预定义的值，保持设计的一致性。
- 开发速度: 通过简单组合工具类可以快速构建界面。
- 响应式设计: 内置的响应式工具类使构建适应不同屏幕尺寸的界面变得简单。
最佳实践 ¶
- 组合使用: 多个工具类可以应用到同一个元素上，实现复合效果。
- 响应式优先: 利用响应式工具类创建适应不同设备的界面。
- 避免过度使用: 对于重复的模式，考虑创建自定义组件而不是重复相同的工具类组合。
- 用于原型设计: 工具类非常适合快速原型设计和验证布局。
Bootstrap 4 的实用工具类让我们能够以最小的代码实现各种样式和布局效果，大大提高了开发效率和代码可维护性。
Bootstrap4 小工具
Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。
边框 使用 border 类可以添加或移除边框:
实例
尝试一下 »
边框颜色
Bootstrap4 提供了一些类来设置边框颜色:
实例
尝试一下 »
边框圆角设置
使用rounded 类可以添加圆角边框:
实例
尝试一下 »
浮动 .float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动:
实例
左浮动
右浮动
尝试一下 »
响应式浮动 我们看可以设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:
实例
在大于小屏幕尺寸上右浮动
在大于中等屏幕尺寸上右浮动
在大于大屏幕尺寸上右浮动
在大于超大屏幕尺寸上右浮动
没有浮动
尝试一下 »
居中对齐 使用 .mx-auto 类来设置居中对齐:
实例
居中显示
尝试一下 »
宽度 元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度:
实例
宽度 25%
宽度 50%
宽度 75%
宽度 100%
最大宽度 100%
尝试一下 »
高度 元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度:
实例
高度 25%
高度 50%
高度 75%
高度 100%
最大高度 100%
尝试一下 »