响应式容器

https://www.runoob.com/bootstrap5/bootstrap5-container.html

可以使用 .container-sm|md|lg|xl 类来创建响应式容器。

容器的 max-width 属性值会根据屏幕的大小来改变。

超小屏幕

小屏幕

中等屏幕

大屏幕

特大屏幕

超级大屏幕

Extra small (xs)

Small (sm)

Medium (md)

Large (lg)

Extra large (xl)

Extra extra large (xxl)

Class

<576px

≥576px

≥768px

≥992px

≥1200px

≥1400px

.container-sm

100%

540px

720px

960px

1140px

1320px

.container-md

100%

100%

720px

960px

1140px

1320px

.container-lg

100%

100%

100%

960px

1140px

1320px

.container-xl

100%

100%

100%

100%

1140px

1320px

.container-xxl

100%

100%

100%

100%

100%

1320px

宽度和高度

https://bootstrapdoc.com/docs/5.0/utilities/sizing

百分比宽度和高度

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

  • mw 意指 Max-width

<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>

宽度百分比

Bootstrap的长宽和间距_Bootstrap

高度百分比

Bootstrap的长宽和间距_CSS_02

https://www.bootstrap.cn/doc/read/173.html

间距

间距缩写规则

屏幕尺寸/设备解析 {breakpoint}

  • 对于xs屏幕，使用固定格式{property}{sides}-{size} 命名CSS方法。
  • 对于r sm、 md、lg、 xl使用 {property}{sides}-{breakpoint}-{size}格式命名CSS方法。

属性{property} 可以是下面之一

  • m - 这个Class属性会设定 margin值
  • p - 这个Class属性会设定 padding值

Bootstrap的长宽和间距_CSS_03

边缘{sides}

  • t - 这个Class属性会设定 margin-top 或 padding-top
  • b - 这个Class属性会设定 margin-bottom 或 padding-bottom
  • l - 这个Class属性会设定 margin-left 或 padding-left
  • r - 这个Class属性会设定 margin-right 或 padding-right
  • x - 这个Class属性会设定 *-left 和 *-right两个值。
  • y - 这个Class属性会设定 *-top 和 *-bottom两个值
  • 空白 - 这个Class属性会设定 margin 或 padding 元素的四个边。

尺寸规格{size}

  • 0 - 这个Class属性会设定 margin 或 padding 的样式值为 0
  • 1 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * .25规格呈现
  • 2 - (默认时) 这个Class属性会设定 margin 或 padding 以 $spacer * .5规格呈现
  • 3 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer规格呈现
  • 4 - (默认时) 这个Class属性会设定margin 或 padding 以 $spacer * 1.5规格呈现
  • 5 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * 3规格呈现
  • auto - 这个Class属性会设定 margin 值 auto（按浏览器默认值自由展现）。

默认

Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5（通常为 24px）。

默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。

在 CSS 中 rem 代表“root em”。1rem 等于根元素（即元素）的字体大小，在大多数浏览器中默认为16px。

https://www.jiyik.com/w/bootstrap5/bootstrap5-typography