Bootstrap 5中一些常用类

克里斯蒂亚诺更新

于 2024-03-13 10:35:11 发布

阅读量400

点赞数 3

分类专栏： css 文章标签： bootstrap 前端

本文链接：https://blog.csdn.net/weixin_36152801/article/details/136672972

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了Bootstrap5中的关键类，包括容器、网格系统、间距、宽度、颜色、文本样式、字体、边框响应性处理和按钮样式，帮助开发者快速构建多样化的布局。

摘要由CSDN通过智能技术生成

以下是对Bootstrap 5中一些更详细的常用类的说明：

容器类（Containers）：
- container: 创建一个固定宽度的容器，适用于响应式布局。
- container-fluid: 创建一个100%宽度的容器，占据整个视口。
网格系统类（Grid System）：
- row: 创建一个网格行。
- col-*: 创建一个网格列，* 表示在不同屏幕尺寸下的列数。例如，col-6 表示在所有屏幕尺寸下占据6列。
间距类（Spacing）：
- p-*: 设置元素的内边距，* 表示内边距的大小级别（0 到 5）。
- m-*: 设置元素的外边距，* 表示外边距的大小级别（0 到 5）。
宽度类（Width）：
- w-*: 设置元素的宽度，* 表示宽度的大小级别（25%、50%、75%、100%）。
- min-vw-100: 设置元素的最小宽度为视口宽度。
颜色类（Colors）：
- bg-*: 设置元素的背景颜色，* 表示颜色名称。
- text-*: 设置文本的颜色，* 表示颜色名称。
文本类（Text）：
- text-*: 设置文本的颜色，* 表示颜色名称。
- text-center: 文本水平居中对齐。
- text-start: 文本左对齐。
- text-end: 文本右对齐。
字体类（Typography）：
- fs-*: 设置字体大小，* 表示字体大小级别（1 到 6）。
- fw-bold: 设置文本加粗。
- fw-normal: 设置文本正常字重。
边框类（Borders）：
- border: 添加边框。
- border-*: 添加指定样式的边框，* 表示边框样式。
响应式类（Responsive）：
- d-*: 控制元素在不同屏幕尺寸下的显示和隐藏。
- align-*: 控制元素的垂直对齐方式，* 表示对齐方式。
按钮类（Buttons）：
- btn: 按钮基础样式。
- btn-*: 添加指定风格的按钮样式，* 表示按钮风格。
- btn-outline-*: 设置按钮为轮廓样式，* 表示按钮风格。

这些类能够帮助你快速地创建出各种各样的样式和布局，是 Bootstrap 5 中最常用的一些类。

你可以使用 Bootstrap 5 中的类来创建一个宽度为 100%、蓝底白字的效果。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blue Background White Text</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="bg-primary text-white p-3 w-100">宽度100% 蓝底白字</div>

</body>
</html>