导航

Bootstrap的长宽和间距

Posted on 2022-08-16 16:07  蝈蝈俊  阅读(345)  评论(0编辑  收藏  举报

响应式容器

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。

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