Bootstrap5.3—容器学习

容器（container）：

这是一个容器+一行（row)+两列（col）的示例代码

<div class="container">
  <div class="row">
    <div class="col text-center">
      第一列的文字居中显示。
    </div>
    <div class="col text-center">
      第二列的文字也居中显示。
    </div>
  </div>
</div>

col（列）

在 Bootstrap 中，col 类可以搭配一些其他的类来定义列的宽度和行为，这些类是响应式的，可以根据不同的屏幕尺寸工作。以下是一些col类的常见可选参数：

1. col-{size}：{size} 可以是从 1 到 12 的任意数值，定义列所占的栅格宽度。
2. col-sm-{size}：在小型设备（≥576px）上应用此类。
3. col-md-{size}：在中等设备（≥768px）上应用此类。
4. col-lg-{size}：在大型设备（≥992px）上应用此类。
5. col-xl-{size}：在超大型设备（≥1200px）上应用此类。
6. col-xxl-{size}：在特大型设备（≥1400px）应用此类。

<div class="container">
  <div class="row">
    <!-- 总是占据全部容器宽度的列 -->
    <div class="col">
      自动宽度列 (基于内容宽度)
    </div>
    <!-- 在中型设备上占据4/12列，大型设备上占据6/12列 -->
    <div class="col-md-4 col-lg-6">
      对于中型设备占4格，对于大型设备占6格
    </div>
    <!-- 在小型设备上占据6/12列，在中型设备上占据3/12列 -->
    <div class="col-sm-6 col-md-3">
      对于小型设备占6格，对于中型设备占3格
    </div>
  </div>
</div>

外边距（Margin）+内边距（Padding）：

上：{x/p}t-{size}

下：{x/p}b-{size}

左：{x/p}s-{size}

右：{x/p}e-{size}

横向（左右）：{x/p}x-{size}

颜色类：

主题色：

1. 主色调 (--bs-primary)
2. 成功色 (--bs-success)
3. 错误色 (--bs-danger)
4. 警告色 (--bs-warning)
5. 信息色 (--bs-info)
6. 浅色 (--bs-light)
7. 暗色 (--bs-dark)

其他默认颜色：

1. 正文颜色 --bs-body-color
2. 二级颜色 --bs-secondary-color
3. 三级颜色 --bs-tertiary-color
4. 强调色 --bs-emphasis-color
5. 边框色 --bs-border-color

文字颜色（.text-{color}）：

1. .text-primary： 主色文字
2. .text-secondary： 辅助色文字
3. .text-success： 成功提示文字（通常为绿色）
4. .text-danger： 错误或危险提示文字（通常为红色）
5. .text-warning： 警告提示文字（通常为黄色）
6. .text-info： 信息提示文字（通常为蓝色）
7. .text-light： 浅色文字
8. .text-dark： 深色文字
9. .text-body： 正文文字
10. .text-muted： 弱化提示文字（通常为灰色）
11. .text-white： 白色文字
12. .text-black-50： 50%透明的黑色文字
13. .text-white-50： 50%透明的白色文字

背景色（.bg-{color}）：

1. .bg-primary： 主色背景
2. .bg-secondary： 辅助色背景
3. .bg-success： 成功提示背景（通常为绿色）
4. .bg-danger： 错误或危险提示背景（通常为红色）
5. .bg-warning： 警告提示背景（通常为黄色）
6. .bg-info： 信息提示背景（通常为蓝色）
7. .bg-light： 浅色背景
8. .bg-dark： 深色背景
9. .bg-white： 白色背景
10. .bg-transparent： 透明背景

边框（border）：

增加边框：

• .border： 设置四周边框
• .border-top： 设置上边框
• .border-end： 设置结束边（在左到右阅读的语言中表示右边框，在从右到左阅读的语言中表示左边框）
• .border-bottom： 设置下边框
• .border-start： 设置开始边（在左到右阅读的语言中表示左边框，在从右到左阅读的语言中表示右边框）

移除边框：

• .border-0： 移除四周边框
• .border-top-0： 移除上边框
• .border-end-0： 移除结束边框（在左到右阅读的语言中表示移除右边框，在从右到左阅读的语言中表示移除左边框）
• .border-bottom-0： 移除下边框
• .border-start-0： 移除开始边框（在左到右阅读的语言中表示移除左边框，在从右到左阅读的语言中表示移除右边框）

改变边框颜色：

• .border-primary： 主色边框
• .border-secondary： 辅助色边框
• .border-success： 成功提示边框（通常为绿色）
• .border-danger： 错误或危险提示边框（通常为红色）
• .border-warning： 警告提示边框（通常为黄色）
• .border-info： 信息提示边框（通常为蓝色）
• .border-light： 浅色边框
• .border-dark： 深色边框
• .border-white： 白色边框

调整透明度：

• .border-opacity-75： 边框透明度为75%
• .border-opacity-50： 边框透明度为50%
• .border-opacity-25： 边框透明度为25%
• .border-opacity-10： 边框透明度为10%

改变边框宽度：

• .border-1： 边框粗细为1像素
• .border-2： 边框粗细为2像素
• .border-3： 边框粗细为3像素
• .border-4： 边框粗细为4像素
• .border-5： 边框粗细为5像素

边框圆角：

• .rounded： 四角同样的圆角
• .rounded-top： 上边两角的圆角
• .rounded-end： 结束边的圆角（在左到右阅读的语言中表示右边的圆角，在从右到左阅读的语言中表示左边的圆角）
• .rounded-bottom： 下边两角的圆角
• .rounded-start： 开始边的圆角（在左到右阅读的语言中表示左边的圆角，在从右到左阅读的语言中表示右边的圆角）
• .rounded-circle： 将元素变为圆形
• .rounded-pill： 将元素变为药丸形或流线形

文字大小：

• .fs-1：最大
• .fs-2
• .fs-3
• .fs-4
• .fs-5
• .fs-6：最小

不同页面不同大小：

<p class="fs-4 fs-md-1">你的文本内容</p>

md为设备类型（断点）

预定义断点（响应式断点）：

• xs： 针对小于576px的设备，如手机竖屏。（对应类名没有前缀，例如：d-block）
• sm： 针对大于等于576px的设备，如手机横屏。（对应类名前缀为sm-，例如：d-sm-block）
• md： 针对大于等于768px的设备，如平板电脑。（对应类名前缀为md-，例如：d-md-block）
• lg： 针对大于等于992px的设备，如桌面显示器。（对应类名前缀为lg-，例如：d-lg-block）
• xl： 针对大于等于1200px的设备，如大桌面显示器。（对应类名前缀为xl-，例如：d-xl-block）
• xxl： 针对大于等于1400px的设备，如超大桌面显示器。（对应类名前缀为xxl-，例如：d-xxl-block）

容器内容换行：