Bootstrap 5 有很多实用程序/帮助程序类,可以快速设置元素样式,而无需使用任何 CSS 代码。
使用 border
类在元素中添加或删除边框:
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Borders</h2>
<p>Use the border classes to add or remove borders from an element:</p>
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
</div>
</body>
</html>
使用 .border-1
到 .border-5
更改边框的宽度:
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
自己尝试一下 →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Border Width</h2>
<p>Use .border-1 to .border-5 to change the width of the border:</p>
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
</div>
</body>
</html>
使用任何上下文边框颜色类向边框添加颜色:
<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>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Borders</h2>
<p>Use a contextual border color to add a color to the border:</p>
<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>
</div>
</body>
</html>
使用 rounded
类向元素添加圆角:
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #555;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>Borders</h2>
<p>Round the corner of an element with the rounded classes:</p>
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<br>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>
</div>
</body>
</html>
使用 .float-end
类将元素浮动到右侧,或者使用 .float-start
类将元素浮动到左侧,并使用 .clearfix
类清除浮动:
<div class="clearfix">
<span class="float-start">Float left</span>
<span class="float-end">Float right</span>
</div>
自己尝试一下 →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Float</h2>
<p>Float an element to the right with the .float-end class or to the left with .float-start, and clear floats with the .clearfix class.</p>
<div class="clearfix">
<span class="float-start">Float left</span>
<span class="float-end">Float right</span>
</div>
</div>
</body>
</html>
使用响应式浮动类,根据屏幕宽度将元素向左或向右浮动(.float-*-start|end
- 其中 * 是 sm
(>=576px)、md
(>=768px)、lg
(>=992px)、xl
(>=1200px) 或 xxl
(>=1400px) )):
<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or wider</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Float none</div>
自己尝试一下 →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Responsive Floats</h2>
<p>Float an element to the left or to the right depending on screen width, with the responsive float classes .float-*-left|right (where * is sm, md, lg, xl or xxl).</p>
<p>Resize the browser window to see the effect.</p>
<div class="clearfix">
<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or wider</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Float none</div>
</div>
</div>
</body>
</html>
使用 .mx-auto
类将元素居中(添加 margin-left
和 margin-right: auto
):
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Horizontal Centering</h1>
<p>Center an element with the .mx-auto class:</p>
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
</div>
</body>
</html>
使用 w-* 类设置元素的宽度(.w-25
、.w-50
、 .w-75
、.w-100
、。 w-auto
和 .mw-100
):
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
自己尝试一下 →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Width Utilities</h1>
<p>Set the width of an element with the w-* classes:</p>
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
</div>
</body>
</html>
使用 h-* 类设置元素的高度(.h-25
、.h-50
、 .h-75
、.h-100
、。 h-auto
和 .mh-100
):
<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-warning">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-warning">Height 100%</div>
<div class="h-auto bg-warning">Auto Height</div>
<div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Height Utilities</h1>
<p>Set the height of an element with the h-* classes:</p>
<div style="height:200px;background-color:#ddd">
<div class="h-25 d-inline-block p-2 bg-warning">Height 25%</div>
<div class="h-50 d-inline-block p-2 bg-warning">Height 50%</div>
<div class="h-75 d-inline-block p-2 bg-warning">Height 75%</div>
<div class="h-100 d-inline-block p-2 bg-warning">Height 100%</div>
<div class="h-auto d-inline-block p-2 bg-warning">Auto Height</div>
<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">Max Height 100%</div>
</div>
</div>
</body>
</html>
Bootstrap 5 具有广泛的响应式边距和填充实用程序类。它们适用于所有断点:xs
(<=576px)、sm
(>=576px)、md
(>=768px)、lg
(>=992px)、 xl
(>=1200px) 或 xxl
(>=1400px)):
这些类的使用格式如下: {property}{sides}-{size}
对于 xs
和 <代码 class="w3-codespan">{property}{sides}-{breakpoint}-{size} for sm
,md
、lg
、xl
和 ”xxl
。
其中属性是以下之一:
m
- 设置边距
p
- 设置填充
其中 sides 是以下之一:
t
- 设置 margin-top
或 padding-top
b
- 设置 margin-bottom
或 padding-bottom
s
- 设置 margin-left
或 padding-left
e
- 设置 margin-right
或 padding-right
x
- 设置 padding-left
和 padding-right
或 margin-left
和 margin-right
y
- 设置 padding-top
和 padding-bottom
或 margin-top
和 margin-bottom
空白 - 在元素的所有 4 侧设置 margin
或 padding
其中 size 是以下之一:
0
- 将 margin
或 padding
设置为 <代码类=“w3-codespan”>0
1
- 将 margin
或 padding
设置为 <代码类=“w3-codespan”>.25rem
2
- 将 margin
或 padding
设置为 <代码类=“w3-codespan”>.5rem
3
- 将 margin
或 padding
设置为 <代码类=“w3-codespan”>1rem
4
- 将 margin
或 padding
设置为 <代码类=“w3-codespan”>1.5rem
5
- 将 margin
或 padding
设置为 <代码类=“w3-codespan”>3rem
auto
- 将 margin
设置为 auto
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
自己尝试一下 →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Spacing Utilities</h1>
<p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
</div>
</body>
</html>
.m-# / m-*-#
描述:所有边都有边距
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Spacing Utilities</h1>
<p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
</div>
</body>
</html>
.mt-# / mt-*-#
描述:顶部边距
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Top Utilities</h1>
<div class="mt-0 bg-warning">Margin Top 0</div>
<div class="mt-1 bg-warning">Margin Top 1</div>
<div class="mt-2 bg-warning">Margin Top 2</div>
<div class="mt-3 bg-warning">Margin Top 3</div>
<div class="mt-4 bg-warning">Margin Top 4</div>
<div class="mt-5 bg-warning">Margin Top 5</div>
<div class="mt-auto bg-warning" style="width:150px">Margin Top Auto</div>
<br>
<p>Responsive margin top utilities. Resize the browser window to see the effect:</p>
<div class="mt-sm-5 bg-warning">Margin Top 5 on SM screens</div>
<div class="mt-md-5 bg-warning">Margin Top 5 on MD screens</div>
<div class="mt-lg-5 bg-warning">Margin Top 5 on LG screens</div>
<div class="mt-xl-5 bg-warning">Margin Top 5 on XL screens</div>
</div>
</body>
</html>
.mb-# / mb-*-#
描述:边距底部
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Bottom Utilities</h1>
<div class="mb-0 bg-warning">Margin Bottom 0</div>
<div class="mb-1 bg-warning">Margin Bottom 1</div>
<div class="mb-2 bg-warning">Margin Bottom 2</div>
<div class="mb-3 bg-warning">Margin Bottom 3</div>
<div class="mb-4 bg-warning">Margin Bottom 4</div>
<div class="mb-5 bg-warning">Margin Bottom 5</div>
<div class="mb-auto bg-warning" style="width:150px">Margin Bottom Auto</div>
<br>
<p>Responsive margin bottom utilities. Resize the browser window to see the effect:</p>
<div class="mb-sm-5 bg-warning">Margin Bottom 5 on SM screens</div>
<div class="mb-md-5 bg-warning">Margin Bottom 5 on MD screens</div>
<div class="mb-lg-5 bg-warning">Margin Bottom 5 on LG screens</div>
<div class="mb-xl-5 bg-warning">Margin Bottom 5 on XL screens</div>
</div>
</body>
</html>
.ms-# / ms-*-#
描述:左边距
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Left Utilities</h1>
<div class="ms-0 bg-warning">Margin Left 0</div>
<div class="ms-1 bg-warning">Margin Left 1</div>
<div class="ms-2 bg-warning">Margin Left 2</div>
<div class="ms-3 bg-warning">Margin Left 3</div>
<div class="ms-4 bg-warning">Margin Left 4</div>
<div class="ms-5 bg-warning">Margin Left 5</div>
<div class="ms-auto bg-warning" style="width:150px">Margin Left Auto</div>
<p>Responsive margin left utilities. Resize the browser window to see the effect:</p>
<div class="ms-sm-5 bg-warning">Margin Left 5 on SM screens</div>
<div class="ms-md-5 bg-warning">Margin Left 5 on MD screens</div>
<div class="ms-lg-5 bg-warning">Margin Left 5 on LG screens</div>
<div class="ms-xl-5 bg-warning">Margin Left 5 on XL screens</div>
</div>
</body>
</html>
.me-# / me-*-#
描述:右边距
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Right Utilities</h1>
<div class="me-0 bg-warning">Margin Right 0</div>
<div class="me-1 bg-warning">Margin Right 1</div>
<div class="me-2 bg-warning">Margin Right 2</div>
<div class="me-3 bg-warning">Margin Right 3</div>
<div class="me-4 bg-warning">Margin Right 4</div>
<div class="me-5 bg-warning">Margin Right 5</div>
<div class="me-auto bg-warning" style="width:150px">Margin Right Auto</div>
<br>
<p>Responsive margin left utilities. Resize the browser window to see the effect:</p>
<div class="me-sm-5 bg-warning">Margin Right on SM screens</div>
<div class="me-md-5 bg-warning">Margin Right on MD screens</div>
<div class="me-lg-5 bg-warning">Margin Right on LG screens</div>
<div class="me-xl-5 bg-warning">Margin Right on XL screens</div>
</div>
</body>
</html>
.mx-# / mx-*-#
描述:左右边距
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Left and Right Utilities</h1>
<p>Margin X utilities:</p>
<div class="mx-0 bg-warning">Margin X 0</div>
<div class="mx-1 bg-warning">Margin X 1</div>
<div class="mx-2 bg-warning">Margin X 2</div>
<div class="mx-3 bg-warning">Margin X 3</div>
<div class="mx-4 bg-warning">Margin X 4</div>
<div class="mx-5 bg-warning">Margin X 5</div>
<div class="mx-auto bg-warning" style="width:150px">Margin X Auto</div>
<br>
<p>Responsive margin x utilities. Resize the browser window to see the effect:</p>
<div class="mx-sm-5 bg-warning">Margin X 5 on SM screens</div>
<div class="mx-md-5 bg-warning">Margin X 5 on MD screens</div>
<div class="mx-lg-5 bg-warning">Margin X 5 on LG screens</div>
<div class="mx-xl-5 bg-warning">Margin X 5 on XL screens</div>
</div>
</body>
</html>
.my-# / my-*-#
描述:顶部和底部边距
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Margin Top and Bottom Utilities</h1>
<p>Margin Y utilities:</p>
<div class="my-0 bg-warning">Margin Y 0</div>
<div class="my-1 bg-warning">Margin Y 1</div>
<div class="my-2 bg-warning">Margin Y 2</div>
<div class="my-3 bg-warning">Margin Y 3</div>
<div class="my-4 bg-warning">Margin Y 4</div>
<div class="my-5 bg-warning">Margin Y 5</div>
<div class="my-auto bg-warning">Margin Y Auto</div>
<br>
<p>Responsive margin y utilities. Resize the browser window to see the effect:</p>
<div class="my-sm-5 bg-warning">Margin Y 5 on SM screens</div>
<div class="my-md-5 bg-warning">Margin Y 5 on MD screens</div>
<div class="my-lg-5 bg-warning">Margin Y 5 on LG screens</div>
<div class="my-xl-5 bg-warning">Margin Y 5 on XL screens</div>
</div>
</body>
</html>
.p-# / p-*-#
描述:四面填充
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Utilities</h1>
<div class="p-0 bg-warning">Padding 0</div>
<div class="p-1 bg-success">Padding 1</div>
<div class="p-2 bg-danger">Padding 2</div>
<div class="p-3 bg-primary">Padding 3</div>
<div class="p-4 bg-light">Padding 4</div>
<div class="p-5 bg-info">Padding 5</div>
<br>
<p>Responsive padding utilities. Resize the browser window to see the effect:</p>
<div class="p-sm-5 bg-warning">Padding 5 on SM screens</div>
<div class="p-md-5 bg-success">Padding 5 on MD screens</div>
<div class="p-lg-5 bg-danger">Padding 5 on LG screens</div>
<div class="p-xl-5 bg-primary">Padding 5 on XL screens</div>
</div>
</body>
</html>
.pt-# / pt-*-#
描述: 顶部填充
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Top Utilities</h1>
<div class="pt-0 bg-warning">Padding Top 0</div>
<div class="pt-1 bg-success">Padding Top 1</div>
<div class="pt-2 bg-danger">Padding Top 2</div>
<div class="pt-3 bg-primary">Padding Top 3</div>
<div class="pt-4 bg-light">Padding Top 4</div>
<div class="pt-5 bg-info">Padding Top 5</div>
<br>
<p>Responsive padding top utilities. Resize the browser window to see the effect:</p>
<div class="pt-sm-5 bg-warning">Padding Top 5 on SM screens</div>
<div class="pt-md-5 bg-success">Padding Top 5 on MD screens</div>
<div class="pt-lg-5 bg-danger">Padding Top 5 on LG screens</div>
<div class="pt-xl-5 bg-primary">Padding Top 5 on XL screens</div>
</div>
</body>
</html>
.pb-# / pb-*-#
描述:填充底部
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Bottom Utilities</h1>
<div class="pb-0 bg-warning">Padding Bottom 0</div>
<div class="pb-1 bg-success">Padding Bottom 1</div>
<div class="pb-2 bg-danger">Padding Bottom 2</div>
<div class="pb-3 bg-primary">Padding Bottom 3</div>
<div class="pb-4 bg-light">Padding Bottom 4</div>
<div class="pb-5 bg-info">Padding Bottom 5</div>
<br>
<p>Responsive padding bottom utilities. Resize the browser window to see the effect:</p>
<div class="pb-sm-5 bg-warning">Padding Bottom 5 on SM screens</div>
<div class="pb-md-5 bg-success">Padding Bottom 5 on MD screens</div>
<div class="pb-lg-5 bg-danger">Padding Bottom 5 on LG screens</div>
<div class="pb-xl-5 bg-primary">Padding Bottom 5 on XL screens</div>
</div>
</body>
</html>
.ps-# / ps-*-#
描述:向左填充
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Left Utilities</h1>
<div class="ps-0 bg-warning">Padding Left 0</div>
<div class="ps-1 bg-success">Padding Left 1</div>
<div class="psl-2 bg-danger">Padding Left 2</div>
<div class="ps-3 bg-primary">Padding Left 3</div>
<div class="ps-4 bg-light">Padding Left 4</div>
<div class="ps-5 bg-info">Padding Left 5</div>
<br>
<p>Responsive padding left utilities. Resize the browser window to see the effect:</p>
<div class="ps-sm-5 bg-warning">Padding Left 5 on SM screens</div>
<div class="ps-md-5 bg-success">Padding Left 5 on MD screens</div>
<div class="ps-lg-5 bg-danger">Padding Left 5 on LG screens</div>
<div class="ps-xl-5 bg-primary">Padding Left 5 on XL screens</div>
</div>
</body>
</html>
.pe-# / pe-*-#
描述:向右填充
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Right Utilities</h1>
<div class="pe-0 bg-warning text-end">Padding Right 0</div>
<div class="pe-1 bg-success text-end">Padding Right 1</div>
<div class="pe-2 bg-danger text-end">Padding Right 2</div>
<div class="pe-3 bg-primary text-end">Padding Right 3</div>
<div class="pe-4 bg-light text-end">Padding Right 4</div>
<div class="pe-5 bg-info text-end">Padding Right 5</div>
<br>
<p>Responsive padding right utilities. Resize the browser window to see the effect:</p>
<div class="pe-sm-5 bg-warning text-end">Padding Right 5 on SM screens</div>
<div class="pe-md-5 bg-success text-end">Padding Right 5 on MD screens</div>
<div class="pe-lg-5 bg-danger text-end">Padding Right 5 on LG screens</div>
<div class="pe-xl-5 bg-primary text-end">Padding Right 5 on XL screens</div>
</div>
</body>
</html>
.py-# / py-*-#
描述: 顶部和底部填充
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Top and Bottom Utilities</h1>
<p>Padding y utilities:</p>
<div class="py-0 bg-warning">Padding Y 0</div>
<div class="py-1 bg-success">Padding Y 1</div>
<div class="py-2 bg-danger">Padding Y 2</div>
<div class="py-3 bg-primary">Padding Y 3</div>
<div class="py-4 bg-light">Padding Y 4</div>
<div class="py-5 bg-info">Padding Y 5</div>
<br>
<p>Responsive padding y utilities. Resize the browser window to see the effect:</p>
<div class="py-sm-5 bg-warning">Padding Y 5 on SM screens</div>
<div class="py-md-5 bg-success">Padding Y 5 on MD screens</div>
<div class="py-lg-5 bg-danger">Padding Y 5 on LG screens</div>
<div class="py-xl-5 bg-primary">Padding Y 5 on XL screens</div>
</div>
</body>
</html>
.px-# / px-*-#
描述:左右填充
尝试一下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Padding Left and Right Utilities</h1>
<p>Padding x utilities:</p>
<div class="px-0 bg-warning">Padding X 0</div>
<div class="px-1 bg-success">Padding X 1</div>
<div class="px-2 bg-danger">Padding X 2</div>
<div class="px-3 bg-primary">Padding X 3</div>
<div class="px-4 bg-light">Padding X 4</div>
<div class="px-5 bg-info">Padding X 5</div>
<br>
<p>Responsive padding x utilities. Resize the browser window to see the effect:</p>
<div class="px-sm-5 bg-warning">Padding X 5 on SM screens</div>
<div class="px-md-5 bg-success">Padding X 5 on MD screens</div>
<div class="px-lg-5 bg-danger">Padding X 5 on LG screens</div>
<div class="px-xl-5 bg-primary">Padding X 5 on XL screens</div>
</div>
</body>
</html>
使用 shadow-
类向元素添加阴影:
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Shadows</h1>
<p>Use the shadow- classes to to add shadows to an element:</p>
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
</div>
</body>
</html>
使用 align-
类更改元素的对齐方式(仅适用于内联、内联块、内联表和表格单元格元素):
<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>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Vertical Align</h1>
<p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p>
<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>
</div>
</body>
</html>
根据父级的宽度创建响应式视频或幻灯片。
将 .ratio
类以及您选择的纵横比 .ratio-*
添加到父元素,并在其中添加嵌入(视频或 iframe):
<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
自己尝试一下 →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Aspect Ratio</h2>
<p>Create a responsive video and scale it nicely to the parent element.</p>
<h2>Aspect ratio 1:1</h2>
<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 4:3</h2>
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 16:9</h2>
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<br>
<h2>Aspect ratio 21:9</h2>
<div class="ratio ratio-21x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</body>
</html>
使用 .visible
或 .invisible
类来控制元素的可见性。 注意:这些类不会更改 CSS 显示值。他们只添加 visibility:visible
或 visibility:hidden
:
<div class="visible">I am visible</div>
<div class="invisible">I am
invisible</div>
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Visibility</h1>
<p>Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden to an element:</p>
<div class="visible bg-success">I am visible</div>
<div class="invisible bg-warning">I am invisible</div>
</div>
</body>
</html>
使用 .btn-close
类设置关闭图标的样式。这通常用于警报和模式。
<button type="button" class="btn-close"></button>
自己尝试一下 →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Close Icon</h1>
<p>Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the times; symbol to create the actual icon (a better looking "x"). Also note that it is right-aligned by default:</p>
<div class="clearfix">
<button type="button" class="close">&times;</button>
</div>
</div>
</body>
</html>
使用 .visually-hidden
类隐藏所有设备上的元素(屏幕阅读器除外):
<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>
自己尝试一下 →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Screen readers</h2>
<p>Use the .sr-only class to hide an element on all devices, except screen readers:</p>
<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>
</div>
</body>
</html>
如“颜色”一章中所述,以下是所有文本和背景颜色类别的列表:
文本颜色的类别有:
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-white
.text-dark
.text-body
.text-light
.text-body
是默认的正文颜色(通常是黑色)。
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
Dark grey text.
Body text.
Light grey text.
自己尝试一下 →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
</div>
</body>
</html>
上下文文本类也可以用在链接上:
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Link Colors</h2>
<a href="#" class="text-muted">Muted link.</a>
<a href="#" class="text-primary">Primary link.</a>
<a href="#" class="text-success">Success link.</a>
<a href="#" class="text-info">Info link.</a>
<a href="#" class="text-warning">Warning link.</a>
<a href="#" class="text-danger">Danger link.</a>
<a href="#" class="text-secondary">Secondary link.</a>
<a href="#" class="text-dark">Dark grey link.</a>
<a href="#" class="text-body">Body/black link.</a>
<a href="#" class="text-light">Light grey link.</a>
</div>
</body>
</html>
您还可以使用 .text-black-50
或 .text-white- 为黑色或白色文本添加 50% 的不透明度50 节课:
Black text with 50% opacity on white background
White text with 50% opacity on black background
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Opacity Text Colors</h2>
<p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>
<p class="text-black-50">Black text with 50% opacity on white background</p>
<p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
</div>
</body>
</html>
背景颜色的类别有:
bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light
自己尝试一下→
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors".</p>
<div class="bg-primary p-3"></div>
<div class="bg-success p-3"></div>
<div class="bg-info p-3"></div>
<div class="bg-warning p-3"></div>
<div class="bg-danger p-3"></div>
<div class="bg-secondary p-3"></div>
<div class="bg-dark p-3"></div>
<div class="bg-light p-3"></div>
</div>
</body>
</html>
上面的 .bg-color
类不能很好地处理文本,或者至少你必须指定一个正确的 .text-color
类,为每个背景获取正确的文本颜色。
但是,您可以使用 .text-bg-color
类,Bootstrap 将自动处理每种背景颜色的适当文本颜色:
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
自己尝试一下 →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Background Color with Contrasting Text Color</h2>
<p class="text-bg-primary">This text is important.</p>
<p class="text-bg-success">This text indicates success.</p>
<p class="text-bg-info">This text represents some information.</p>
<p class="text-bg-warning">This text represents a warning.</p>
<p class="text-bg-danger">This text represents danger.</p>
<p class="text-bg-secondary">Secondary background color.</p>
<p class="text-bg-dark">Dark grey background color.</p>
<p class="text-bg-light">Light grey background color.</p>
</div>
</body>
</html>