Bootstrap5 容器

---

🚀容器边距

     🚀内外边距

• 通过 m - * 的类来设置外边距margin
• 通过 p - * 的类来设置内边距padding

     🚀内外边距的方位

• 通过mt - * / pt - * 的类设置margin-top / padding-top
• 通过mb- * / pb - * 的类设置margin-bottom /padding-bottom
• 通过ms- * / ps - * 的类设置margin-left / padding-left(右对齐文本), margin-right / padding-right(左对齐文本) (s → start)
• 通过me- * / pe - * 的类设置margin-right/ padding-right(右对齐文本), margin-left / padding-left(左对齐文本) (e → end)
• 通过mx - * / px - *的类设置X轴上的内外边距，即 (margin / padding)-left 和 (margin / padding)-right
• 通过my - * / py - *的类设置X轴上的内外边距，即 (margin / padding)-top 和 (margin / padding)-button

     🚀内外边距的大小

• 通过 -0 设置margin / padding 的值为 0
• 通过 -1 设置margin / padding 的值为 $spacer * 0.25
• 通过 -2 设置margin / padding 的值为 $spacer * 0.5
• 通过 -3 设置margin / padding 的值为 $spacer
• 通过 -4 设置margin / padding 的值为 $spacer * 1.5
• 通过 -5 设置margin / padding 的值为 $spacer * 3
• 通过 -auto 设置margin / padding 为auto(自适应)
  默认情况下，$spacer的值为16px

---

🚀响应式容器

• .container 类用于固定宽度并支持响应式布局的容器。
  注意：宽度 (max-width) 会根据屏幕宽度同比例放大或缩小
• .container-fluid 类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width 始终为 100%）
• 你可以使用 .container-sm|md|lg|xl 类来创建响应式容器。
  容器的 max-width 属性值会根据屏幕的大小来改变

---

🚀容器、文本颜色

Bootstrap5提供了一些背景颜色 (bg-dark、bg-primary等) 以及 (text-info、text-warning等) 的类用于设置容器的样式

• 背景颜色
  

<div class="bg-primary text-white">bg-primary</div>
<div class="bg-secondary text-white">bg-secondary</div>
<div class="bg-success text-white">bg-success</div>
<div class="bg-danger text-white">bg-danger</div>
<div class="bg-warning text-white">bg-warning</div>
<div class="bg-info text-white">bg-info</div>
<div class="bg-light text-dark">bg-light</div>
<div class="bg-dark text-white">bg-dark</div>
<div class="bg-body text-dark">bg-body</div>
<div class="bg-white text-dark">bg-white</div>
<div class="bg-transparent text-dark">bg-transparent</div>

-文本颜色

<div class="text-primary">text-primary</div>
<div class="text-secondary">text-secondary</div>
<div class="text-success">text-success</div>
<div class="text-danger">text-danger</div>
<div class="text-warning">text-warning</div>
<div class="text-info">text-info</div>
<div class="text-light">text-light</div>
<div class="text-dark">text-dark</div>
<div class="text-body">text-body</div>
<div class="text-muted">text-muted</div>
<div class="text-white">text-white</div>
<div class="text-black-50">text-black-50</div>
<div class="text-white-50">text-white-50</div>