加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > Bootstrap

Bootstrap 5 实用工具

Bootstrap 2023-08-10 09:26:55小码哥的IT人生shichen

Bootstrap 5 实用工具

Utilities / Helper 类

Bootstrap 5 有很多 utility/helper 类，可以在不使用任何 CSS 代码的情况下快速设置元素样式。

边框

使用边框类为元素添加或删除边框：

示例代码：

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-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 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/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>边框</h2>
  <p>使用边框类为元素添加或删除边框：</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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.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 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/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>边框宽度</h2>
  <p>使用 .border-1 到 .border-5 来改变边框的宽度：</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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/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>边框颜色</h2>
  <p>请使用任意上下文边框颜色类向边框添加颜色：</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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.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>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/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>边框圆角</h2>
  <p>请使用 rounded 类为元素添加圆角：</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>
  <span class="rounded-0"></span>
  <span class="rounded-1"></span>
  <span class="rounded-2"></span>
  <span class="rounded-3"></span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

浮动和清除浮动

使用 .float-end 类向右浮动元素，或使用 .float-start 向左浮动，并使用 .clearfix 类清除浮动：

示例代码：

<div class="clearfix">
  <span class="float-start">向左浮动</span>
  <span class="float-end">向右浮动</span>
</div>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>浮动和清除浮动</h2>
  <p>使用 .float-end 类向右浮动元素，或使用 .float-start 向左浮动，并使用 .clearfix 类清除浮动：</p>
  <div class="clearfix">
    <span class="float-start">向左浮动</span>
    <span class="float-end">向右浮动</span>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

响应式浮动

根据屏幕宽度向左或向右浮动元素，使用响应式浮动类 (.float-*-left|right)，其中 * 是：

  1. sm (> = 576px)
  2. md (> = 768px)
  3. lg (> = 992px)
  4. xl (> = 1200px)
  5. xxl (> = 1400px)

示例代码：

<div class="float-sm-end">在小型屏幕或更宽的屏幕上向右浮动</div><br>
<div class="float-md-end">在中型屏幕或更宽的屏幕上向右浮动</div><br>
<div class="float-lg-end">在大型屏幕或更宽的屏幕上向右浮动</div><br>
<div class="float-xl-end">在超大型屏幕或更宽的屏幕上向右浮动</div><br>
<div class="float-xxl-end">在特大型屏幕或更宽的屏幕上向右浮动</div><br>
<div class="float-none">不进行浮动</div>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>响应式浮动 	</h2>
  <p>根据屏幕宽度向左或向右浮动元素，使用响应式浮动类 (.float-*-left|right)：</p>
  <p>请调整浏览器窗口大小来查看效果。</p>
  <div class="clearfix">
    <div class="float-sm-end">在小型屏幕或更宽的屏幕上向右浮动</div><br>
    <div class="float-md-end">在中型屏幕或更宽的屏幕上向右浮动</div><br>
    <div class="float-lg-end">在大型屏幕或更宽的屏幕上向右浮动</div><br>
    <div class="float-xl-end">在超大型屏幕或更宽的屏幕上向右浮动</div><br>
    <div class="float-xxl-end">在特大型屏幕或更宽的屏幕上向右浮动</div><br>
    <div class="float-none">不进行浮动</div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

居中对齐

使用 .mx-auto 类居中元素（添加 margin-left 和 margin-right: auto）：

示例代码：

<div class="mx-auto bg-warning" style="width:150px">居中</div>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>水平居中</h1>
  <p>使用 .mx-auto 类居中元素：</p>
  <div class="mx-auto bg-warning" style="width:150px">居中</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

宽度

使用 w-* 类（.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）设置元素的宽度：

示例代码：

<div class="w-25 bg-warning">宽度 25%</div>
<div class="w-50 bg-warning">宽度 50%</div>
<div class="w-75 bg-warning">宽度 75%</div>
<div class="w-100 bg-warning">宽度 100%</div>
<div class="w-auto bg-warning">自动宽度</div>
<div class="mw-100 bg-warning">最大宽度 100%</div>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>宽度 Utility</h1>
  <p>使用 w-* 类（.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）设置元素的宽度：</p>
  <div class="w-25 bg-warning">宽度 25%</div>
  <div class="w-50 bg-warning">宽度 50%</div>
  <div class="w-75 bg-warning">宽度 75%</div>
  <div class="w-100 bg-warning">宽度 100%</div>
  <div class="w-auto bg-warning">自动宽度</div>
  <div class="mw-100 bg-warning">最大宽度 100%</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

高度

使用 h-* 类（.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）设置元素的高度：

示例代码：

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">高度 25%</div>
  <div class="h-50 bg-warning">高度 50%</div>
  <div class="h-75 bg-warning">高度 75%</div>
  <div class="h-100 bg-warning">高度 100%</div>
  <div class="h-auto bg-warning">自动高度</div>
  <div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>
</div>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>高度 Utility</h1>
  <p>使用 h-* 类（.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）设置元素的高度：</p>
  <div style="height:200px;background-color:#ddd">
    <div class="h-25 d-inline-block p-2 bg-warning">高度 25%</div>
    <div class="h-50 d-inline-block p-2 bg-warning">高度 50%</div>
    <div class="h-75 d-inline-block p-2 bg-warning">高度 75%</div>
    <div class="h-100 d-inline-block p-2 bg-warning">高度 100%</div>
    <div class="h-auto d-inline-block p-2 bg-warning">自动高度</div>
    <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">最大高度 100%</div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

间距

Bootstrap 5 拥有广泛的响应式 margin 和 padding 实用程序类。它们适用于所有断点：

  1. xs (<= 576px)
  2. sm (> = 576px)
  3. md (> = 768px)
  4. lg (> = 992px)
  5. xl (> = 1200px)
  6. xxl (> = 1400px)

这些类的使用格式为：{property}{sides}-{size} 用于 xs，以及 {property}{sides}-{breakpoint}-{size} 用于 sm、md、lg、xl 和 xxl。

property 是以下之一：

  1. m - 设置 margin
  2. p - 设置 padding

sides 是以下之一：

  1. t - 设置 margin-top 或 padding-top
  2. b - 设置 margin-bottom 或 padding-bottom
  3. s - 设置 margin-left 或 padding-left
  4. e - 设置 margin-right 或 padding-right
  5. x - 同时设置 padding-left 和 padding-right 或 margin-left 和 margin-right
  6. y - 同时设置 padding-top 和 padding-bottom 或 margin-top 和 margin-bottom
  7. blank - 在元素的所有四个边设置 margin 或 padding

size 是以下之一：

  1. 0 - 把 margin 或 padding 设置为 0
  2. 1 - 把 margin 或 padding 设置为 .25rem
  3. 2 - 把 margin 或 padding 设置为 .5rem
  4. 3 - 把 margin 或 padding 设置为 1rem
  5. 4 - 把 margin 或 padding 设置为 1.5rem
  6. 5 - 把 margin 或 padding 设置为 3rem
  7. auto - 把 margin 设置为 auto

示例代码：

<div class="pt-4 bg-warning">我只有上内边距 (1.5rem)</div>
<div class="p-5 bg-success">我在所有边都有内边距 (3rem)</div>
<div class="m-5 pb-5 bg-info">我在所有边都有外边距 (3rem) 和下内边距 (3rem)</div>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>间距 Utility</h1>
  <p>使用 {property. {Sides} - {breakpoint} - {size} 类设置元素的间距。如果您希望填充或边距适用于所有屏幕尺寸，请省略断点。</p>
  <div class="pt-4 bg-warning">我只有上内边距 (1.5rem)</div>
  <div class="p-5 bg-success">我在所有边都有内边距 (3rem)</div>
  <div class="m-5 pb-5 bg-info">我在所有边都有外边距 (3rem) 和下内边距 (3rem)</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

更多间距实例

.m-# / m-*-# 所有边的外边距 试一试
.mt-# / mt-*-# 上外边距 试一试
.mb-# / mb-*-# 下外边距 试一试
.ms-# / ms-*-# 左外边距 试一试
.me-# / me-*-# 右外边距 试一试
.mx-# / mx-*-# 左和右内边距 试一试
.my-# / my-*-# 上和下外边距 试一试
.p-# / p-*-# 所有边的内边距（填充） 试一试
.pt-# / pt-*-# 上内边距 试一试
.pb-# / pb-*-# 下内边距 试一试
.ps-# / ps-*-# 左内边距 试一试
.pe-# / pe-*-# 右内边距 试一试
.py-# / py-*-# 上和下内边距 试一试
.px-# / px-*-# 左和右内边距 试一试

您可以在我们的 CSS 单位参考手册 中阅读有关 rem 和不同尺寸单位的更多内容。

阴影

请使用 shadow- 类为元素添加阴影：

示例代码：

<div class="shadow-none p-4 mb-4 bg-light">没有阴影</div>
<div class="shadow-sm p-4 mb-4 bg-white">小型阴影</div>
<div class="shadow p-4 mb-4 bg-white">默认阴影</div>
<div class="shadow-lg p-4 mb-4 bg-white">大型阴影</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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>阴影</h1>
  <p>请使用 shadow- 类为元素添加阴影：</p>
  <div class="shadow-none p-4 mb-4 bg-light">没有阴影</div>
  <div class="shadow-sm p-4 mb-4 bg-white">小型阴影</div>
  <div class="shadow p-4 mb-4 bg-white">默认阴影</div>
  <div class="shadow-lg p-4 mb-4 bg-white">大型阴影</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

垂直对齐

请使用 align- 类更改元素的对齐方式（仅适用于 inline、 inline-block、inline-table 和表格单元格元素）：

示例代码：

<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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>垂直对齐</h1>
  <p>请使用 align- 类更改元素的对齐方式（仅适用于 inline、 inline-block、inline-table 和表格单元格元素）：</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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

纵横比

根据父级的宽度创建响应式视频或幻灯片。

将 .ratio 类与您选择的纵横比 .aspect-ratio-* 添加到父元素，并在其中添加嵌入（视频或 iframe）：

示例代码：

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/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="/i/photo/shanghai.mp4"></iframe>
  </div>
  <br>
  <h2>Aspect ratio 4:3</h2>
  <div class="ratio ratio-4x3">
    <iframe src="/i/photo/shanghai.mp4"></iframe>
  </div>
  <br>
  <h2>Aspect ratio 16:9</h2>
  <div class="ratio ratio-16x9">
    <iframe src="/i/photo/shanghai.mp4"></iframe>
  </div>
  <br>
  <h2>Aspect ratio 21:9</h2>
  <div class="ratio ratio-21x9">
    <iframe src="/i/photo/shanghai.mp4"></iframe>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

可见性

使用 .visible 或 .invisible 类可控制元素的可见性：

注释：这些类不会更改 CSS display 值。它们只添加 visibility:visible 或 visibility:hidden。

示例代码：

<div class="visible">我是可见的。</div>
<div class="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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>可见性</h1>
  <p>使用 .visible 或 .invisible 类可控制元素的可见性：</p>
  <p><b>注释：</b>这些类不会更改 CSS display 值。它们只添加 visibility:visible 或 visibility:hidden。</p>
  <div class="visible bg-success">我是可见的。</div>
  <div class="invisible bg-warning">我是不可见的。</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>关闭图标</h1>
  <p>请使用 .btn-close 类可设置关闭图标的样式。通常用于警告框和模态。</p>
  <div class="clearfix">
    <button type="button" class="close">×</button>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>屏幕阅读器</h2>
  <p>使用 .visually-hidden 类可在所有设备上隐藏元素，屏幕阅读器除外：</p>
  <span class="visually-hidden">除了屏幕阅读器，我将隐藏在所有屏幕上。</span>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

颜色

如“颜色”一章所述，下面列出了所有文本和背景颜色类的列表：

针对文本颜色的类是：

  1. .text-muted
  2. .text-primary
  3. .text-success
  4. .text-info
  5. .text-warning
  6. .text-danger
  7. .text-secondary
  8. .text-white
  9. .text-dark
  10. .text-body（默认 body 颜色/通常为黑色）
  11. .text-light

示例代码：

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>上下文颜色</h1>
  <p>请使用上下文类来提供“由颜色表达的某种意义”。</p>
  <p class="text-muted">此文本已静音。</p>
  <p class="text-primary">此文字很重要。</p>
  <p class="text-success">此文本表示成功。</p>
  <p class="text-info">此文字代表了一些信息。</p>
  <p class="text-warning">此文本表示警告。</p>
  <p class="text-danger">此文字代表危险。</p>
  <p class="text-secondary">次要文本。</p>
  <p class="text-dark">此文字为深灰色。</p>
  <p class="text-body">默认主体颜色（通常为黑色）。</p>
  <p class="text-light">此文本为浅灰色（在白色背景上）。</p>
  <p class="text-white">这段文字是白色的（在白色背景上）。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>上下文链接颜色</h2>
  <a href="#" class="text-muted">静音链接</a>
  <a href="#" class="text-primary">主要链接</a>
  <a href="#" class="text-success">成功链接</a>
  <a href="#" class="text-info">信息链接</a>
  <a href="#" class="text-warning">警告链接</a>
  <a href="#" class="text-danger">危险链接</a>
  <a href="#" class="text-secondary">次要链接</a>
  <a href="#" class="text-dark">暗灰链接</a>
  <a href="#" class="text-body">主体/黑色链接</a>
  <a href="#" class="text-light">浅灰链接</a>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

您还可以使用 .text-black-50 或 .text-white-50 类为黑色或白色文本添加 50% 的不透明度：

示例代码：

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>不透明度文本颜色</h1>
  <p>请使用 .text-black-50 或 .text-white-50 类为黑色或白色文本添加 50% 的不透明度：</p>
  <p class="text-black-50">白色背景上不透明度为 50% 的黑色文本</p>
  <p class="text-white-50 bg-dark">黑色背景上不透明度为 50% 的白色文本</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

背景色

针对背景颜色的类是：

  1. .bg-primary
  2. .bg-success
  3. .bg-info
  4. .bg-warning
  5. .bg-danger
  6. .bg-secondary
  7. .bg-dark
  8. .bg-light

请注意，背景颜色不会设置文本颜色，因此在某些情况下，您需要将它们与 .text-* 类一起使用。

示例代码：

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>上下文背景</h1>
  <p>请使用上下文背景类来提供“由颜色表达的某种意义”。</p>
  <p>请注意，如果您想要不同的文本颜色，您还可以添加 .text-* 类：</p>
  <p class="bg-primary text-white">此文本很重要。</p>
  <p class="bg-success text-white">此文本表示成功。</p>
  <p class="bg-info text-white">此文本代表了一些信息。</p>
  <p class="bg-warning text-white">此文本表示警告。</p>
  <p class="bg-danger text-white">此文本代表危险。</p>
  <p class="bg-secondary text-white">次要背景颜色。</p>
  <p class="bg-dark text-white">深灰色背景颜色。</p>
  <p class="bg-light text-dark">浅灰色背景色。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例1：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>间距 Utility</h1>
  <p>使用 {property. {Sides} - {breakpoint} - {size} 类设置元素的间距。如果您希望填充或边距适用于所有屏幕尺寸，请省略断点。</p>
  <div class="pt-4 bg-warning">我只有上内边距 (1.5rem)</div>
  <div class="p-5 bg-success">我在所有边都有内边距 (3rem)</div>
  <div class="m-5 pb-5 bg-info">我在所有边都有外边距 (3rem) 和下内边距 (3rem)</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例2：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>上外边距 Utility</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>响应式上外边距实用工具。请调整浏览器窗口大小以查看效果：</p>
  <div class="mt-sm-5 bg-warning">在 SM 屏幕上的 Margin Top 5</div>
  <div class="mt-md-5 bg-warning">在 MD 屏幕上的 Margin Top 5</div>
  <div class="mt-lg-5 bg-warning">在 LG 屏幕上的 Margin Top 5</div>
  <div class="mt-xl-5 bg-warning">在 XL 屏幕上的 Margin Top 5</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例3：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>下外边距 Utility</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>响应式下外边距实用工具。请调整浏览器窗口大小以查看效果：</p>
  <div class="mb-sm-5 bg-warning">在 SM 屏幕上的 Margin Bottom 5</div>
  <div class="mb-md-5 bg-warning">在 MD 屏幕上的 Margin Bottom 5</div>
  <div class="mb-lg-5 bg-warning">在 LG 屏幕上的 Margin Bottom 5</div>
  <div class="mb-xl-5 bg-warning">在 XL 屏幕上的 Margin Bottom 5</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例4：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>左外边距 Utility</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>响应式左外边距实用工具。请调整浏览器窗口大小以查看效果：</p>
  <div class="ms-sm-5 bg-warning">在 SM 屏幕上的 Margin Left 5</div>
  <div class="ms-md-5 bg-warning">在 MD 屏幕上的 Margin Left 5</div>
  <div class="ms-lg-5 bg-warning">在 LG 屏幕上的 Margin Left 5</div>
  <div class="ms-xl-5 bg-warning">在 XL 屏幕上的 Margin Left 5</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例5：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>右外边距 Utility</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>响应式右外边距实用工具。请调整浏览器窗口大小以查看效果：</p>
  <div class="me-sm-5 bg-warning">在 SM 屏幕上的 Margin Right</div>
  <div class="me-md-5 bg-warning">在 MD 屏幕上的 Margin Right</div>
  <div class="me-lg-5 bg-warning">在 LG 屏幕上的 Margin Right</div>
  <div class="me-xl-5 bg-warning">在 XL 屏幕上的 Margin Right</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例6：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>左右外边距 Utility</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>响应式 margin x 实用工具。请调整浏览器窗口大小以查看效果：</p>
  <div class="mx-sm-5 bg-warning">在 SM 屏幕上的 Margin X 5</div>
  <div class="mx-md-5 bg-warning">在 MD 屏幕上的 Margin X 5</div>
  <div class="mx-lg-5 bg-warning">在 LG 屏幕上的 Margin X 5</div>
  <div class="mx-xl-5 bg-warning">在 XL 屏幕上的 Margin X 5</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例7：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>上下外边距 Utility</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>响应式 margin y 实用工具。请调整浏览器窗口大小以查看效果：</p>
  <div class="my-sm-5 bg-warning">在 SM 屏幕上的 Margin Y 5</div>
  <div class="my-md-5 bg-warning">在 MD 屏幕上的 Margin Y 5</div>
  <div class="my-lg-5 bg-warning">在 LG 屏幕上的 Margin Y 5</div>
  <div class="my-xl-5 bg-warning">在 XL 屏幕上的 Margin Y 5</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例8：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>内边距 Utility</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>响应式内边距实用工具。请调整浏览器窗口大小以查看效果：</p>
  <div class="p-sm-5 bg-warning">在 SM 屏幕上的 Padding 5</div>
  <div class="p-md-5 bg-success">在 MD 屏幕上的 Padding 5</div>
  <div class="p-lg-5 bg-danger">在 LG 屏幕上的 Padding 5</div>
  <div class="p-xl-5 bg-primary">在 XL 屏幕上的 Padding 5</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例9：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>上内边距 Utility</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>响应式上内边距实用工具。请调整浏览器窗口大小以查看效果：</p>
  <div class="pt-sm-5 bg-warning">在 SM 屏幕上的 Padding Top 5</div>
  <div class="pt-md-5 bg-success">在 MD 屏幕上的 Padding Top 5</div>
  <div class="pt-lg-5 bg-danger">在 LG 屏幕上的 Padding Top 5</div>
  <div class="pt-xl-5 bg-primary">在 XL 屏幕上的 Padding Top 5</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例10：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>下内边距 Utility</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>响应式下内边距实用工具。请调整浏览器窗口大小以查看效果：</p>
  <div class="pb-sm-5 bg-warning">在 SM 屏幕上的 Padding Bottom 5</div>
  <div class="pb-md-5 bg-success">在 MD 屏幕上的 Padding Bottom 5</div>
  <div class="pb-lg-5 bg-danger">在 LG 屏幕上的 Padding Bottom 5</div>
  <div class="pb-xl-5 bg-primary">在 XL 屏幕上的 Padding Bottom 5</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例11：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>左内边距 Utility</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>响应式左内边距实用工具。请调整浏览器窗口大小以查看效果：</p>
  <div class="ps-sm-5 bg-warning">在 SM 屏幕上的 Padding Left 5</div>
  <div class="ps-md-5 bg-success">在 MD 屏幕上的 Padding Left 5</div>
  <div class="ps-lg-5 bg-danger">在 LG 屏幕上的 Padding Left 5</div>
  <div class="ps-xl-5 bg-primary">在 XL 屏幕上的 Padding Left 5</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例12：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>右内边距 Utility</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>响应式右内边距实用工具。请调整浏览器窗口大小以查看效果：</p>
  <div class="pe-sm-5 bg-warning text-end">在 SM 屏幕上的 Padding Right 5</div>
  <div class="pe-md-5 bg-success text-end">在 MD 屏幕上的 Padding Right 5</div>
  <div class="pe-lg-5 bg-danger text-end">在 LG 屏幕上的 Padding Right 5</div>
  <div class="pe-xl-5 bg-primary text-end">在 XL 屏幕上的 Padding Right 5</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例13：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>上下内边距 Utility</h1>
  <p>Padding y utility:</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>响应式 padding y 实用工具。请调整浏览器窗口大小以查看效果：</p>
  <div class="py-sm-5 bg-warning">在 SM 屏幕上的 Padding Y 5</div>
  <div class="py-md-5 bg-success">在 MD 屏幕上的 Padding Y 5</div>
  <div class="py-lg-5 bg-danger">在 LG 屏幕上的 Padding Y 5</div>
  <div class="py-xl-5 bg-primary">在 XL 屏幕上的 Padding Y 5</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例14：

<!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.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h1>左右内边距 Utility</h1>
  <p>Padding x utility：</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>响应式 padding x 实用工具。。请调整浏览器窗口大小以查看效果：</p>
  <div class="px-sm-5 bg-warning">在 SM 屏幕上的 Padding X 5</div>
  <div class="px-md-5 bg-success">在 MD 屏幕上的 Padding X 5</div>
  <div class="px-lg-5 bg-danger">在 LG 屏幕上的 Padding X 5</div>
  <div class="px-xl-5 bg-primary">在 XL 屏幕上的 Padding X 5</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024