响应式容器
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>
宽度百分比
高度百分比
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值
边缘{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。
