HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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>
亲自试一试 »

边框宽度

使用 .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>
亲自试一试 »

边框颜色

使用上下文边框颜色类向边框添加颜色:

实例

<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>
亲自试一试 »

边框圆角

rounded 相关类用于设置圆角:

使用 .rounded-0 到 .rounded-3 类用于设置圆角的大小:

实例

<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>
亲自试一试 »

浮动与清除浮动

元素向右浮动使用 .float-end 类，向左浮动使用 .float-start类， .clearfix 类用于清除浮动:

实例

向左浮动 向右浮动
<div class="clearfix">
 <span class="float-start">向左浮动</span>
  <span class="float-end">向右浮动</span>
</div>
亲自试一试 »

响应式浮动

也可以根据屏幕尺寸来设置浮动效果，使用响应浮动类 (.float-*-start|end - 其中*是 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 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>
亲自试一试 »

居中对齐

使用 .mx-auto 类来设置元素居中对齐 (添加 margin-left 和 margin-right: auto):

实例

Centered
<div class="mx-auto bg-warning" style="width:150px">居中</div>
亲自试一试 »

宽度

宽度使用 w-* (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100) 类来设置:

实例

宽度为 25%
宽度为 50%
宽度为 75%
宽度为 100%
自动设置宽度
最大宽度为 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>
亲自试一试 »

高度

高度使用 h-* (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100) 类来设置:

实例

高度为 25%
高度为 50%
高度为 75%
高度为 100%
自动设置高度
最大高度为 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>
亲自试一试 »

间距

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

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

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

property 是以下之一:

  • m - 设置 margin
  • p - 设置 padding

sides 是以下之一:

  • t - 设置 margin-top 或 padding-top
  • b - 设置 margin-bottom 或 padding-bottom
  • s - 设置 margin-left 或 padding-left
  • e - 设置 margin-right 或 padding-right
  • x - 同时设置 padding-left 和 padding-right 或 margin-left 和 margin-right
  • y - 同时设置 padding-top 和 padding-bottom 或 margin-top 和 margin-bottom
  • blank - 在元素的所有四个边设置 margin 或 padding

size 是以下之一:

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

实例

我只有上内边距 (1.5rem)
我在所有边都有内边距 (3rem)
我在所有边都有外边距 (3rem) 和下内边距 (3rem)
<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>
亲自试一试 »

更多间距实例

.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>
亲自试一试 »

垂直对齐

使用 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>
亲自试一试 »

纵横比

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

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

实例

<!-- 纵横比 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

<!-- 纵横比 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

<!-- 纵横比 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

<!-- 纵横比 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
亲自试一试 »

可见度

使用 .visible 或 .invisible 类来控制元素的可见性。 注意: 这些类不会更改CSS显示值。它们仅添加 visibility:visible 或 visibility:hidden:

实例

我是可见的
<div class="visible">我是可见的</div>
<div class="invisible">我是不可见的</div>
亲自试一试 »

关闭图标

使用 .btn-close 类设置关闭图标的样式。这通常用于警报和模态。

实例

<button type="button" class="btn-close"></button>
亲自试一试 »

屏幕阅读器

使用 .visually-hidden 类隐藏除屏幕阅读器以外的所有设备上的元素:

实例

<span class="visually-hidden">我将隐藏在除屏幕阅读器之外的所有屏幕上。</span>
亲自试一试 »

颜色

如 Bootstrap 5 颜色 一章所述，以下是所有文本和背景颜色类别的列表:

文本颜色的类: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (默认正文颜色/通常为黑色) 和 .text-light:

实例

此文本已静音。

此文字很重要。

此文本表示成功。

此文字代表了一些信息。

此文本表示警告。

此文字代表危险。

次要文本。

此文字为深灰色。

默认主体颜色（通常为黑色）。

此文本为浅灰色（在白色背景上）。

亲自试一试 »

也可用于链接:

实例

静音链接。 主链接。 成功链接。 信息链接。 警告链接。 危险链接。 辅助链接。 深灰色链接。 正文/黑色链接。 浅灰色链接。
亲自试一试 »

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

实例

白色背景上不透明度为 50% 的黑色文本

黑色背景上不透明度为 50% 的白色文本

亲自试一试 »

背景色

背景色的类别有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light.

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

实例

此文本很重要。

此文本表示成功。

此文本代表了一些信息。

此文本表示警告。

此文本代表危险。

次要背景颜色。

深灰色背景颜色。

浅灰色背景色。

亲自试一试 »

❮ 上一节 下一节 ❯