Bootstrap 5:实用程序


目录

    显示目录

实用程序/辅助类

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>

浮动和 Clearfix

使用 .float-end 类将元素浮动到右侧,或者使用 .float-start 类将元素浮动到左侧,并使用 .clearfix 类清除浮动:

例子

Float left Float right
<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) )):

例子

Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float right on XXL screens or wider

Float none
<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-leftmargin-right: auto):

例子

Centered
<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):

例子

Width 25%
Width 50%
Width 75%
Width 100%
Auto Width
Max Width 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):

例子

Height 25%
Height 50%
Height 75%
Height 100%
Auto Height
Max Height 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 smmdlgxl ”xxl

其中属性是以下之一:

  • m - 设置边距

  • p - 设置填充

其中 sides 是以下之一:

  • t - 设置 margin-toppadding-top

  • b - 设置 margin-bottompadding-bottom

  • s - 设置 margin-leftpadding-left

  • e - 设置 margin-rightpadding-right

  • x - 设置 padding-leftpadding-rightmargin-leftmargin-right

  • y - 设置 padding-toppadding-bottommargin-topmargin-bottom

  • 空白 - 在元素的所有 4 侧设置 marginpadding

其中 size 是以下之一:

  • 0 - 将 marginpadding 设置为 <代码类=“w3-codespan”>0

  • 1 - 将 marginpadding 设置为 <代码类=“w3-codespan”>.25rem

  • 2 - 将 marginpadding 设置为 <代码类=“w3-codespan”>.5rem

  • 3 - 将 marginpadding 设置为 <代码类=“w3-codespan”>1rem

  • 4 - 将 marginpadding 设置为 <代码类=“w3-codespan”>1.5rem

  • 5 - 将 marginpadding 设置为 <代码类=“w3-codespan”>3rem

  • auto - 将 margin 设置为 auto

例子

I only have a top padding (1.5rem)
I have a padding on all sides (3rem)
I have a margin on all sides (3rem) and a bottom padding (3rem)
<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- 类向元素添加阴影:

例子

No shadow
Small shadow
Default shadow
Large 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- 类更改元素的对齐方式(仅适用于内联、内联块、内联表和表格单元格元素):

例子

baseline top middle bottom text-top text-bottom
<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:visiblevisibility:hidden

例子

I am visible
     <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">&amp;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 &quot;meaning through colors&quot;:</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 &quot;meaning through colors&quot;.</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>