学习Bootstrap 5的第十五天
目录
Bootstrap 5 实用工具
边框
边框圆角
浮动和清除浮动
响应式浮动
居中对齐
宽度与高度
间距
阴影
垂直对齐
纵横比
可见性
关闭图标
屏幕阅读器
颜色
背景颜色
Bootstrap 5 实用工具
边框
Bootstrap 5提供了一系列的边框类，让开发者可以方便地为元素添加或删除边框。这些边框类都是以"border-"为前缀的CSS类，其后跟着不同的属性值来描述边框的样式、颜色和大小等。
以下是Bootstrap 5提供的常用边框类：
- border：为元素添加一个默认的1px宽度的边框。
- border-0：为元素移除边框。
- border-top、border-bottom、border-end、border-start：为元素的指定边添加边框。
- border-primary、border-secondary、border-success、border-danger、border-warning、border-info、border-light、border-dark、border-white：为元素添加不同颜色的边框。
此外，Bootstrap 5还提供了更加细粒度的边框类，可以通过组合不同的属性值来实现更加个性化的边框样式。例如：
- border-1、border-2、border-3：分别为元素添加1px、2px、3px宽度的边框。
- border-top-0、border-bottom-0、border-left-0、border-right-0：分别为元素指定边移除边框。
- border-top-1、border-bottom-2、border-left-3、border-right-4：为元素指定不同宽度的边添加边框。
实例
Bootstrap5 实例
Bootstrap 5 边框类示例
默认边框
无边框
顶部边框
底部边框
左侧边框
右侧边框
主要颜色边框
次要颜色边框
成功颜色边框
危险颜色边框
警告颜色边框
信息颜色边框
浅色边框
深色边框
白色边框
1px宽度边框
2px宽度边框
3px宽度边框
为元素移除边框
顶部1px宽度边框
底部0px宽度边框
左侧0px宽度边框
右侧0px宽度边框
边框圆角
在Bootstrap 5中，您可以使用rounded类为元素添加圆角。通过使用不同的rounded类，您可以实现不同程度和形状的圆角效果。
以下是一些常见的rounded类及其对应的圆角效果：
1、rounded：默认圆角效果，边角稍微圆润。
2、rounded-0：无圆角，边角为直角。
3、rounded-1：边角更加圆润。
4、rounded-2：边角更加圆润。
5、rounded-3：边角更加圆润。
6、rounded-circle：创建一个完全圆形的元素。
7、rounded-top、rounded-bottom、rounded-start、rounded-end：分别为元素的顶部、底部、开始（左侧）和结束（右侧）边角添加圆角。
8、rounded-pill：创建一个椭圆形的元素，适用于按钮等元素。
通过组合使用不同的rounded类，可以实现更多自定义的圆角效果。例如，可以将rounded-top和rounded-end类组合在一起，为元素的右上角添加圆角：
右上角圆角
实例
Bootstrap 实例
边框圆角
请使用 rounded 类为元素添加圆角：
浮动和清除浮动
在 Bootstrap 5 中，可以使用 .float-end 类将元素向右浮动，或使用 .float-start 类将元素向左浮动。这些类可以应用于任何具有 float 属性的元素。
例如，要将一个元素向右浮动，可以添加 .float-end 类：
向右浮动的元素
同样地，要将一个元素向左浮动，可以添加 .float-start 类：
向左浮动的元素
然而，需要注意的是，虽然Bootstrap 5 提供 .clearfix 类来清除浮动。但是也可以使用 CSS 的 overflow: auto 属性来实现类似的效果。
例如，如果你有一组浮动的元素，并希望包含它们的容器能够自动扩展以适应这些浮动元素，可以将容器的样式设置为 overflow: auto：
Bootstrap 实例
Float left
Float right
向左浮动的元素
向右浮动的元素
这样，容器将会自动适应包含的浮动元素的高度，不再出现高度塌陷的问题。
请注意，以上内容适用于 Bootstrap 5 版本。如果你使用的是其他版本的 Bootstrap，请参考相应版本的文档以获取正确的浮动和清除浮动方法。
响应式浮动
在响应式设计中，可以使用 Bootstrap 5 提供的响应式工具类来实现浮动效果。以下是一些常用的响应式浮动类：
- .float-start: 将元素向左浮动。
- .float-end: 将元素向右浮动。
- .float-none: 取消元素的浮动效果。
这些类可以与 Bootstrap 的栅格系统结合使用，以实现在不同屏幕大小下的浮动布局。
根据屏幕宽度向左或向右浮动元素，使用响应式浮动类 (.float-*-left|right)，其中 * 是：
- sm (> = 576px)
- md (> = 768px)
- lg (> = 992px)
- xl (> = 1200px)
- xxl (> = 1400px)
实例
Bootstrap 实例
响应式浮动
重置浏览器查看效果
小屏幕向右浮动
中等屏幕向右浮动
大屏幕向右浮动
超大屏幕向右浮动
特大屏幕向右浮动
没有浮动
居中对齐
要将元素水平居中对齐，可以使用 Bootstrap 5 提供的 .mx-auto 类。该类会自动为元素添加 margin-left: auto 和 margin-right: auto 属性，从而实现水平居中对齐。
以下是一个示例：
Bootstrap 实例
居中对齐
请注意，为了使 .mx-auto 类生效，需要将元素包含在一个具有 .container 类的容器中。这是因为 .mx-auto 类依赖于 Bootstrap 的网格系统来计算间距。
通过使用 .mx-auto 类，可以轻松地实现元素的水平居中对齐，无论是在响应式布局中还是在固定宽度的容器中。
宽度与高度
Bootstrap 5 提供了一组类来设置元素的宽度和高度。以下是一些常用的设置元素宽度的类：
- .w-*：设置元素的宽度。可以使用 * 替换为 25、50、75、100，表示宽度的百分比。例如，.w-50 将使元素的宽度为其父元素宽度的 50%。
- .mw-auto：将元素的最大宽度设置为自动。这将使元素在不超过其父元素宽度的情况下尽可能大。
- .mw-100：将元素的最大宽度设置为 100%。这将使元素的宽度等于其父元素的宽度。
以下是一些常用的设置元素高度的类：
- .h-*：设置元素的高度。可以使用 * 替换为 25、50、75、100，表示高度的百分比。例如，.h-50 将使元素的高度为其父元素高度的 50%。
- .mh-auto：将元素的最大高度设置为自动。这将使元素在不超过其父元素高度的情况下尽可能大。
- .mh-100：将元素的最大高度设置为 100%。这将使元素的高度等于其父元素的高度。
请注意，这些类需要与 Bootstrap 的栅格系统和容器一起使用，以确保元素的宽度和高度能够正确地响应不同的屏幕大小。
Bootstrap 实例
宽度为 25%
宽度为 50%
宽度为 75%
宽度为 100%
自动设置宽度
最大宽度为 100%
高度为 25%
高度为 50%
高度为 75%
高度为 100%
自动设置高度
最大高度为 100%
通过使用这些类，你可以轻松地设置元素的宽度和高度，从而实现各种布局需求。
间距
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
Bootstrap 实例
这个元素具有在 md 断点及以上的顶部外边距为 1rem
这个元素具有在所有断点上的垂直内边距为 0.5rem
这个元素具有在 xl 断点及以上的左侧内边距为 3rem
在上面的示例中，我们使用了不同的 Bootstrap 5 响应式 margin 和 padding 实用程序类来设置元素之间的间距。根据不同的断点，元素的外边距和内边距会有所调整，以实现响应式布局。
请注意，示例中的类是根据常见的需求进行选择的，你可以根据自己的具体需求进行调整和组合这些类。同时，确保在适当的位置使用 Bootstrap 的容器和栅格系统，以获得最佳效果。
更多实例
.m-# / m-*-# |
设置所有边的外边距 | 尝试一下 |
.mt-# / mt-*-# |
margin top | 尝试一下 |
.mb-# / mb-*-# |
margin bottom | 尝试一下 |
.ms-# / ms-*-# |
margin left | 尝试一下 |
.me-# / me-*-# |
margin right | 尝试一下 |
.mx-# / mx-*-# |
margin left 与 right | 尝试一下 |
.my-# / my-*-# |
margin top 与 bottom | 尝试一下 |
.p-# / p-*-# |
使用边设置 padding | 尝试一下 |
.pt-# / pt-*-# |
padding top | 尝试一下 |
.pb-# / pb-*-# |
padding bottom | 尝试一下 |
.ps-# / ps-*-# |
padding left | 尝试一下 |
.pe-# / pe-*-# |
padding right | 尝试一下 |
.py-# / py-*-# |
padding top 与 bottom | 尝试一下 |
.px-# / px-*-# |
padding left 与 right | 尝试一下 |
阴影
Bootstrap 5 提供了一系列用于添加阴影的实用程序类，你可以使用它们来为元素添加不同类型和大小的阴影效果。
以下是一些常用的阴影类：
- .shadow-sm：添加一个小的阴影效果。
- .shadow：添加默认大小的阴影效果。
- .shadow-lg：添加一个大的阴影效果。
- .shadow-none：移除阴影效果。
这些类可以应用于任何元素，例如 div、img 或 button 等。你可以根据具体需求选择合适的阴影类，并将其应用于相应的元素。
以下是一个示例，演示如何使用 .shadow 类为 div 元素添加默认大小的阴影效果：
Bootstrap 实例
没有阴影
小型阴影
默认阴影
大型阴影
请注意，在使用这些阴影类时，要根据具体需求和设计选择合适的大小和颜色，并确保在不同断点下进行测试和调整，以确保在各种屏幕尺寸和设备上都能获得最佳效果。
垂直对齐
Bootstrap 5 提供了一系列用于更改元素对齐方式的实用程序类，你可以使用它们来控制元素在垂直方向上的对齐方式。
以下是一些常用的垂直对齐类：
- .align-baseline：将元素与基线对齐。
- .align-top：将元素与顶部对齐。
- .align-middle：将元素与中心对齐。
- .align-bottom：将元素与底部对齐。
- .align-text-top：将元素文本与顶部对齐。
- .align-text-bottom：将元素文本与底部对齐。
这些类可以应用于任何 inline、inline-block、inline-table 和表格单元格元素，例如 span、img 或 td 等。你可以根据具体需求选择合适的对齐类，并将其应用于相应的元素。
以下是一个示例，演示如何使用 .align-middle 类将 img 元素与父元素的中心对齐：
这是一段文本
在上面的示例中，我们使用 .align-middle 类将 img 元素与父元素的中心对齐。我们还使用了其他 Bootstrap 实用程序类，如 .d-flex（将元素设置为 Flexbox 容器）和 .ms-3（设置左侧外边距），以实现更完整的样式效果。
请注意，在使用这些垂直对齐类时，要根据具体需求和设计选择合适的方式，并确保在不同断点下进行测试和调整，以确保在各种屏幕尺寸和设备上都能获得最佳效果。
纵横比
Bootstrap 5 提供了一种方便的方法来创建响应式的视频或幻灯片，通过使用 .ratio 类和 .aspect-ratio-* 类来设置纵横比。
你可以将 .ratio 类与你选择的纵横比类 .aspect-ratio-* 添加到父元素上，并在其中嵌入视频或 iframe 元素。
以下是一个示例，演示如何使用纵横比类创建一个具有16:9纵横比的响应式视频：
在上面的示例中，我们创建了一个父元素，并添加了 .ratio 和 .aspect-ratio-16x9 类。然后，在父元素中嵌入了一个 iframe 元素，该元素包含了一个 YouTube 视频的嵌入链接。
通过使用这些类，父元素会根据其宽度自动调整高度，以保持指定的纵横比。这样，无论父元素的宽度如何改变，嵌入的视频或幻灯片都会保持正确的纵横比，并在不同的屏幕尺寸和设备上呈现良好。
请注意，在使用纵横比类时，确保为嵌入的内容提供适当的宽度和高度属性，以便在没有 CSS 的情况下提供回退样式。
可见性
Bootstrap 5 提供了 .visible 和 .invisible 类来控制元素的可见性。
- .visible 类将元素设置为可见状态，它会添加 visibility: visible; 样式规则到元素上。这意味着元素将在页面上显示，并响应用户的交互。
- .invisible 类将元素设置为不可见状态，它会添加 visibility: hidden; 样式规则到元素上。这样，元素仍然占据空间，但用户将无法看到它，也无法与其进行交互。
请注意，.visible 和 .invisible 类不会更改元素的 CSS display 值。它们只会通过添加 visibility 属性来控制元素的可见性。
以下是一个示例，演示如何使用 .visible 和 .invisible 类：
Bootstrap 实例
这是可见的文本。
这是不可见的文本。
在上面的示例中，第一个段落使用 .visible 类，使其可见。第二个段落使用 .invisible 类，使其不可见。两个段落都存在于 HTML 中，但只有第一个段落对用户可见。
请注意，在使用可见性类时，你可以根据需要自定义其他样式来调整元素的外观和行为。例如，你可以结合使用这些类和其他 Bootstrap 类，如 .d-none（隐藏元素）和 .d-block（显示元素），以实现更复杂的可见性控制。
关闭图标
Bootstrap 5 提供了 .btn-close 类来设置关闭图标的样式。这个类通常用于警告框和模态框中，以便用户可以关闭它们。
.btn-close 类将元素设置为一个带有默认样式的关闭图标。该类添加了一个带有 × 文本内容的伪元素 ::before，并为其设置了 content 属性。此外，它还设置了一些基本样式，如颜色、字体大小、位置和光标类型。
以下是一个示例，演示如何使用 .btn-close 类：
Bootstrap 实例
出错了！ 你的操作失败了。请重试。
在上面的示例中，我们创建了一个警告框，并在其中添加了一个关闭按钮。关闭按钮具有 .btn-close 类，这使它具有默认的关闭图标样式。此外，我们还使用了 Bootstrap 5 的 dismiss 插件，使关闭按钮可以关闭警告框。
请注意，在使用 .btn-close 类时，你可以根据需要自定义其他样式来调整关闭图标的外观和行为。例如，你可以结合使用这个类和其他 Bootstrap 类，如 .btn-sm（小型按钮）和 .text-danger（红色文本），以实现更复杂的关闭图标控制。
屏幕阅读器
Bootstrap 5 提供了 .visually-hidden 类，可以在所有设备上隐藏元素，但对于屏幕阅读器来说是可见的。
.visually-hidden 类将元素设置为不可见，同时保持其可访问性。这意味着元素对于普通用户是不可见的，但对于使用屏幕阅读器的用户是可见的。这样做是为了确保屏幕阅读器用户能够获取到元素的内容。
以下是一个示例，演示如何使用 .visually-hidden 类：
Bootstrap 实例
在上面的示例中，我们创建了一个带有购物车图标的按钮。购物车文本使用了 .visually-hidden 类，这样它对于普通用户来说是不可见的，但对于屏幕阅读器用户来说是可见的。这样，屏幕阅读器用户将能够听到按钮的含义。
请注意，在使用 .visually-hidden 类时，你可以根据需要自定义其他样式来调整元素的外观和行为。例如，你可以结合使用这个类和其他 Bootstrap 类，如 .sr-only（仅屏幕阅读器可见）和 .text-danger（红色文本），以实现更复杂的可访问性控制。
颜色
下面列出了所有文本和背景颜色类的列表：
针对文本颜色的类是：
.text-muted.text-primary.text-success.text-info.text-warning.text-danger.text-secondary.text-white.text-dark.text-body（默认 body 颜色/通常为黑色）.text-light
Bootstrap 实例
上下文颜色
此文本已静音。
此文字很重要。
此文本表示成功。
此文字代表了一些信息。
此文本表示警告。
此文字代表危险。
次要文本。
此文字为深灰色。
默认主体颜色（通常为黑色）。
此文本为浅灰色（在白色背景上）。
这段文字是白色的（在白色背景上）。
注意:上下文文本类也可用于链接：
Bootstrap Example
还可以使用 .text-black-50 或 .text-white-50 类为黑色或白色文本添加 50% 的不透明度：
Bootstrap 实例
不透明度文本颜色
白色背景上不透明度为 50% 的黑色文本
黑色背景上不透明度为 50% 的白色文本
背景颜色
针对背景颜色的类是：
- .bg-primary
- .bg-success
- .bg-info
- .bg-warning
- .bg-danger
- .bg-secondary
- .bg-dark
- .bg-light
请注意，背景颜色不会设置文本颜色，因此在某些情况下，需要将它们与 .text-* 类一起使用。
Bootstrap 实例
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent
注意：.bg-gradient 类可以设置背景颜色渐变的效果。
Bootstrap 实例
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent