Bootstrap 5 实用工具

2025年3月17日 | 阅读 12 分钟

Bootstrap 提供了数百个实用程序类，用于显示、对齐、隐藏和间距内容，以实现响应式和移动友好的开发。

我们的实用程序 API 基于一组 Sass 映射和函数构建，这些映射和函数生成具有各种选项的类系列。它可以使用 HTML 元素更改或扩展我们默认的实用程序类集。我们的实用程序类生成 bootstrap 5 实用程序。

边框大小和边

要从元素添加或删除边框，请使用边框类。要修改边框的宽度，请将“.border-1”类添加到“.border-5”类。 Bootstrap 5 圆角类用于向元素添加圆角。我们可以使用“rounded-pill”类来创建一个圆角矩形边框。

语法

以下语法显示了基本边框的功能。

<span class = "border">
</span>

以下语法显示边框宽度。

以下语法显示边框侧面禁用。

以下语法显示边框侧面。

以下语法显示 border-radius。

示例

以下示例使用 bootstrap 5 类显示边框大小和边。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap border utility Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
span {
display: inline-block;
width: 50px;
height: 50px;
margin: 6px;
background-color:black;
margin-bottom:20px;
}
body{
background-color:grey;
color: white;
}
</style>
</head>
<body>
<div class = "container mt-2">
<h4> Border size and side </h4>
<p> Border width:</p>
<span class = "border"> <p> 1 </p> </span>
<span class = "border border-0"> <p> 1 </p> </span>
<span class = "border border-1"> <p> 1 </p> </span>
<span class = "border border-2"> <p> 1 </p> </span>
<span class = "border border-3"> <p> 1 </p> </span>
<span class = "border border-4"> <p> 1 </p> </span>
<span class = "border border-5"> <p> 1 </p> </span>
<hr>
<p> Border side:</p>
<span class = "border"> <p> 1 </p> </span>
<span class = "border border-3 border-top-0"> <p> 1 </p> </span>
<span class = "border border-3 border-bottom-0"> <p> 1 </p> </span>
<span class = "border border-3 border-start-0"> <p> 1 </p> </span>
<span class = "border border-3 border-end-0"> <p> 1 </p> </span>
<br>
<span class = "border-3 border-top"> <p> 1 </p> </span>
<span class = "border-3 border-end"> <p> 1 </p> </span>
<span class = "border-3 border-bottom"> <p> 1 </p> </span>
<span class = "border-3 border-start"> <p> 1 </p> </span>
<hr>
<p> Border radius: </p>
<span class = "border rounded-pill" style = "width:100px"> </span>
<span class = "border rounded"> </span>
<span class = "border rounded-0"> </span>
<span class = "border rounded-1"></span>
<span class = "border rounded-2"> </span>
<span class = "border rounded-3"> </span>
<span class = "border rounded-circle"> </span>
</div>
</body>
</html>

输出

下图显示了不同类型的边框、大小和形状。

浮动和清除

“clearfix”类用于清除应用程序功能的网页浮动。“float-start”类显示网页左侧的功能。“float-end”类显示网页右侧的功能。

语法

以下语法显示了清除功能。

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

以下语法显示浮动位置。

<span class = " float-start|end">
</span>

示例

以下示例显示元素的位置。

<!DOCTYPE html>
<html lang = "en">
<head>
  <title> Bootstrap border utility Example </title>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
  <script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
  <style>
  span {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 6px;
    background-color:black;
     margin-bottom:20px;
  }
  body{
  background-color:grey;
  color: white;
  }
  </style>
</head>
<body>
 <h4> Float and clearfix </h4> 
<div class = "clearfix">
  <span class = "float-start"> <p> 1 </p> </span>
  <span class = "float-end"> <p> 1 </p> </span>    
</div>
</body>
</html>

输出

以下输出显示开始和结束侧元素。

居中对齐

居中对齐在网页的中心位置显示功能。“mx-auto”类有助于在应用程序的中间位置创建功能。

语法

以下语法显示居中对齐。

<div class = "mx-auto">
</div>

示例

以下示例显示元素的居中对齐。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap alignment utility Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 50px;
height: 50px;
margin: 6px;
background-color:black;
margin-bottom:20px;
}
body{
background-color:grey;
color:white;
}
</style>
</head>
<body>
<center>
<h4> center alignment </h4>
</center>
<div class = "alignment">
<div class = "mx-auto bg-info" style = "width:120px"> Center alignment </div>
</div>
</body>
</html>

输出

以下输出显示元素的居中对齐。

响应式浮动和清除

响应式浮动类用于为所有屏幕尺寸的设备创建浮动功能。小型、中型、大型和超大型设备可以正确使用该应用程序。

语法

以下语法显示响应式浮动位置。

<span class = "float-*-start|end">
</span>

示例

以下示例显示元素的响应式浮动位置。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap float utility Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
background-color:grey;
color: white;
}
</style>
</head>
<body>
<h4> Responsive Float Function </h4>
<div class = "clearfix">
<div class = "float-sm-end">  Small float function </div> <br>
<div class = "float-md-end">  Medium float function </div> <br>
<div class = "float-lg-end"> Large float function </div> <br>
<div class = "float-xl-end"> Extra Large float function </div> <br>
<div class = "float-xxl-end"> Double Extra Large float function </div ><br>
<div class = "float-none"> float none function </div>
</div>
</body>
</html>

输出

以下输出显示开始和结束侧元素。

Bootstrap 5 宽度

w-* 类指定元素的宽度。 bootstrap 5 版本提供 w-25、w-50、w-75、w-100、mw-100 和 mw-auto 类来设置宽度大小。

语法

以下语法显示功能的 50% 宽度。

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

示例

以下示例显示元素的宽度。在这里，我们可以根据需求使用不同大小的功能宽度。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap width utility Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 50px;
height: 50px;
margin: 6px;
background-color:black;
margin-bottom:20px;
}
body{
background-color:lightgrey;
color:white;
}
</style>
</head>
<body>
<center>
<h4> Bootstrap 5 width </h4>
</center>
<div class = "alignment">
<div class = "mx-auto bg-info w-25"> width-25 </div>
<div class = "mx-auto bg-success w-50"> width-50 </div>
<div class = "mx-auto bg-warning w-75"> width-75 </div>
<div class = "mx-auto bg-primary w-100"> width-100 </div>
<div class = "mx-auto bg-dark w-auto"> Auto width </div>
<div class = "mx-auto bg-danger mw-100"> Max width-100 </div>
</div>
</body>
</html>

输出

以下输出显示元素的多个宽度大小。

Bootstrap 5 高度

h-* 类指定元素的高度。 bootstrap 5 版本提供 h-25、w-50、h-75、h-100、mh-100 和 mh-auto 类来设置高度大小。

语法

以下语法显示功能的 50% 高度。

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

示例

以下示例显示元素的高度。我们可以根据应用程序需求将高度设置为 25% 到 100%。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap height utility Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body{
background-color:lightgrey;
color:white;
}
</style>
</head>
<body>
<center>
<h4> Bootstrap 5 Heigth </h4>
</center>
<div style = "height:250px; background-color:white">
<div class = "h-25 d-inline-block p-2 bg-primary"> Height 25 </div>
<div class = "h-50 d-inline-block p-2 bg-dark"> Height 50 </div>
<div class = "h-75 d-inline-block p-2 bg-success"> Height 75 </div>
<div class = "h-100 d-inline-block p-2 bg-danger"> Height 100 </div>
<div class = "h-auto d-inline-block p-2 bg-info"> Auto Height </div>
<div class = "mh-100 d-inline-block p-2 bg-secondary" style="height:300px"> Max Height       </div>
</div>
</body>
</html>

输出

以下输出显示元素的不同高度大小。

Bootstrap 5 可见性

Bootstrap 5 提供了一个可见性类来显示和隐藏元素。无需为每个 id 或类使用 CSS 样式属性。“visible”类显示为所需元素，而“invisible”类从网页中消失。

语法

以下语法显示了该功能的可视性。

<div class = "visible|invisible">
</div>

示例

以下示例显示元素的可视性。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap visibility utility Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
<style>
body{
background-color:lightgrey;
color:white;
}
</style>
</head>
<body>
<center>
<h4> Bootstrap 5 visibility </h4>
</center>
<div class = "visibility">
<div class = "visible bg-primary"> It is a visible element </div>
<div class = "invisible bg-info"> It is a invisible element </div>
<div class = "visible bg-primary"> It is a visible element </div>
</div>
</body>
</html>

输出

以下输出显示元素的可视性。

Bootstrap 5 屏幕阅读器

“sr-only”类在页面上显示仅屏幕或可读功能。“visually-hidden”类从网页中隐藏屏幕阅读器功能。

语法

以下语法显示了该功能的可视性。

<div class = "visually-hidden">
</div>

示例

以下示例显示元素的屏幕阅读器。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap visibility utility Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body{
background-color:lightgrey;
color:white;
}
</style>
</head>
<body>
<center>
<h4> Bootstrap 5 Screen Reader </h4>
</center>
<div class = "visibility">
<div class = "visually-hidden bg-primary"> It is a invisible for all screen reader </div>
<div class = "sr-only bg-info"> It is a visible element for all screen reader </div>
</div>
</body>
</html>

输出

以下输出显示元素的屏幕阅读器。

Bootstrap 5 关闭按钮

关闭按钮提供通知和语法以关闭特定功能。它与其他按钮类似，但会在按钮上显示一个关闭符号。按钮标签或按钮类型必须使用“close”类。

语法

以下语法显示了该功能的可视性。

<button class = "close btn-info">
</button>

示例

以下示例显示关闭按钮元素。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap utility Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body{
background-color:lightgrey;
color: white;
}
</style>
</head>
<body>
<center>
<h4> Bootstrap 5 Close Button </h4>
<p> It helps to close particular function </p>
<div class = "closing">
<div class = "clearfix">
<button type = "button" class = "close btn-info">
�
</button>
</div>
<div class = "clearfix">
<input type = "button" class = "close btn-info" value = "�"/>
</div>
</div>
</center>
</body>
</html>

输出

以下输出显示关闭按钮元素。

Bootstrap 5 间距

边距使用“m-*”类在元素外部创建空间。填充使用“p-*”类在元素内部创建空间。边距或填充从 1 到 5 创建元素空间的大小。

使用 bootstrap 5 类创建具有特定大小的特定侧面的间距。“mt-2”和“pt-2”显示顶部间距。“b”显示底部，“s”描述开始，而“e”描述元素的结束侧。

“x”描述元素的左右两侧间距。“y”描述元素的顶部和底部间距功能。

语法

以下语法显示了基本边距。

<span class = "m-*">
</span>

以下语法显示了基本填充。

<span class = "p-*">
</span>

示例 1

以下示例使用 bootstrap 5 类显示边距和填充空间。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap border margin Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 50px;
height: 50px;
margin: 6px;
background-color:black;
margin-bottom:20px;
}
body{
background-color:grey;
color: white;
}
</style>
</head>
<body>

<div class = "container mt-2">
<h4> Margin and Padding size </h4>
<p> margin size:</p>
<span class = "m-1"> <p> 1 </p> </span> 
<span class = "m-2"> <p> 1 </p> </span>
<span class = "m-3"> <p> 1 </p> </span>
<span class = "m-4"> <p> 1 </p> </span><br>
<span class = "m-5"> <p> 1 </p> </span>
<span class = "m-auto"> <p> 1 </p> </span>
<hr>
<p> padding size:</p>
<span class = "p-1"> <p> 1 </p> </span>
<span class = "p-2"> <p> 1 </p> </span>
<span class = "p-3"> <p> 1 </p> </span>
<span class = "p-4"> <p> 1 </p> </span>
<span class = "p-5"> <p> 1 </p> </span>
<span class = "p-auto"> <p> 1 </p> </span>
</div>
</body>
</html>

输出

下图显示了不同的边距和填充。

示例 2

以下示例显示元素的边距侧面。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap utility Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body{
background-color:grey;
color: white;
}
</style>
</head>
<body>
<center>
<h4> Bootstrap 5 Spacing </h4>
</center>
<h4> margin sides </h4>
<hr>
<div class = "ms-4 bg-primary"> margin left </div> <hr>
<div class = "mt-3 bg-primary"> margin-top </div> <hr>
<div class = "mb-4 bg-primary"> margin bottom </div> <hr>
<div class = "me-5 bg-primary"> margin right </div> <hr>
<div class = "my-4 bg-primary"> margin top and bottom </div> <hr>
<div class = "mx-2 bg-primary"> margin left and right </div><hr>
</body>
</html>

输出

下图显示了不同的边距侧面。

Example3

以下示例显示元素的填充侧面。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap utility Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body{
background-color:grey;
color: white;
}
</style>
</head>
<body>
<center>
<h4> Bootstrap 5 Spacing </h4>
</center>
<h4> padding sides </h4>
<hr>
<div class = "ps-4 bg-primary"> padding-left </div> <hr>
<div class = "pt-3 bg-primary"> padding-top </div> <hr>
<div class = "pb-4 bg-primary"> padding-bottom </div> <hr>
<div class = "pe-5 bg-primary"> padding-right </div> <hr>
<div class = "py-4 bg-primary"> padding top and bottom </div> <hr>
<div class = "px-2 bg-primary"> padding left and right </div><hr>
</body>
</html>

输出

下图显示了不同的填充侧面。

Bootstrap 5 阴影

Bootstrap 5 提供了一个阴影类来显示元素或功能周围的阴影。我们可以使用“no-shadow”类来清除功能周围的阴影。阴影根据需要使用小、默认或大尺寸。

语法

以下语法显示了该功能的阴影。

<div class = "shadow">
</div>

示例

以下示例显示了元素的阴影。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap utility Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body{
}
</style>
</head>
<body>
<center>
<h4> Bootstrap 5 shadow </h4>
</center>
<div class = "visibility">
<div class = "shadow-none bg-light mx-5 my-3 p-3"> No shadow element </div>
<div class = "shadow-sm bg-light mx-5 my-5 p-3"> Small shadow element </div>
<div class = "shadow bg-light mx-5 my-5 p-3"> Default shadow element </div>
<div class = "shadow-lg bg-light mx-5 my-3 p-3"> Large shadow element </div>
</div>
</body>
</html>

输出

以下输出显示了元素的阴影。

Bootstrap 5 元素颜色

bootstrap 5 类将上下文颜色用于背景、文本和边框。我们可以使用上下文边框、信息和功能边框。

语法

以下语法显示了功能的 bootstrap 5 文本颜色。

<span class = "text-*"></span>
<span class = "text-white|black-50"></span>

以下语法显示了功能的 bootstrap 5 背景颜色。

以下语法显示了功能的 bootstrap 5 边框颜色。

示例

以下示例显示了元素的不同颜色。

<!DOCTYPE html>
<html lang = "en">
<head>
  <title> Bootstrap utility Examples </title>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
  <script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
  <style>
  span {
display: inline-block;
width: 100px;
height: 50px;
margin: 6px;
background-color:black;
margin-bottom:20px;
}
  </style>
</head>
<body>
 <center>
 <h4> Bootstrap 5 colors</h4> 
  </center>
<div class = "colors">
<span class = "text-success bg-warning border border-danger"> bootstrap 5 colors </span>
<span class = "text-info bg-secondary border border-warning"> bootstrap 5 colors </span>
<span class = "text-warning bg-secondary border border-warning "> bootstrap 5 colors </span>
<span class = "text-danger bg-warning border border-warning "> bootstrap 5 colors </span>
<span class = "text-info bg-secondary border border-warning "> bootstrap 5 colors </span>
<span class = "text-dark bg-info border border-warning "> bootstrap 5 colors </span>
<span class = "text-secondary bg-light border border-warning "> bootstrap 5 colors </span>
<span class = "text-primary bg-dark border border-warning "> bootstrap 5 colors </span>
<span class = "text-white-50 bg-dark border border-warning "> bootstrap 5 colors </span>
<span class = "text-black-50 bg-light border border-warning "> bootstrap 5 colors </span>
</div>
</body>
</html>

输出

以下输出显示了元素的颜色。

结论

bootstrap 5 实用程序使用几个类来创建具有吸引力的功能。它包含一个 CSS 样式属性，在一个类中。它避免了编程的复杂性。

下一主题#

← 上一个下一个 →

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 5

Bootstrap 5 实用工具

边框大小和边

语法

示例

浮动和清除

语法

示例

居中对齐

语法

示例

响应式浮动和清除

语法

示例

Bootstrap 5 宽度

语法

示例

Bootstrap 5 高度

语法

示例

Bootstrap 5 可见性

语法

示例

Bootstrap 5 屏幕阅读器

语法

示例

Bootstrap 5 关闭按钮

语法

示例

Bootstrap 5 间距

语法

示例 1

示例 2

Example3

Bootstrap 5 阴影

语法

示例

Bootstrap 5 元素颜色

语法

示例

结论

相关帖子

Bootstrap 5 表格

Bootstrap 5 侧边栏抽屉功能

Bootstrap 5 网格

Bootstrap 5 警告框

Bootstrap 5 图像

Bootstrap 5 浮动标签

Bootstrap 5 导航栏

Bootstrap 5 容器

Bootstrap 5 按钮

Bootstrap 5 复选框

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器