Bootstrap 间距实用类

szial

于 2024-06-15 08:22:26 发布

阅读量855

点赞数 8

文章标签：前端 bootstrap html

本文链接：https://blog.csdn.net/szial/article/details/139693541

版权

Bootstrap 间距实用类（Spacing Utilities）

Bootstrap 提供了一套强大的实用类，用于快速设置元素的 margin 和 padding。这些类名遵循一致的命名规则，支持响应式设计，可以在不同的视口尺寸上进行调整。

1. 基本概念

属性：指定是 margin 还是 padding，分别用 m 和 p 表示。
方向：指定属性的应用方向。
- t：top（上）
- b：bottom（下）
- l：left（左）
- r：right（右）
- x：horizontal（水平，左右）
- y：vertical（垂直，上下）
- s：start（开始，左或右，取决于书写方向）
- e：end（结束，右或左，取决于书写方向）
- 无方向修饰符：适用于所有方向
尺寸：设置间距的大小，范围从 0 到 5，以及 auto。

2. 命名规则

类名由属性、方向和尺寸三部分组成，格式如下：

{属性}{方向}-{尺寸}

例如：

mt-3：设置顶部的 margin 为 3
px-4：设置水平的 padding 为 4
m-2：设置所有方向的 margin 为 2
pt-0：设置顶部的 padding 为 0
mb-auto：设置底部的 margin 为 auto

3. 尺寸值

0：0
1：0.25rem（4px）
2：0.5rem（8px）
3：1rem（16px）
4：1.5rem（24px）
5：3rem（48px）
auto：根据上下文自动设置 margin

4. 示例

设置所有方向的间距

<!-- 设置所有方向的 margin 为 3 -->
<div class="m-3"></div>

<!-- 设置所有方向的 padding 为 4 -->
<div class="p-4"></div>

设置特定方向的间距

<!-- 设置顶部的 padding 为 5 -->
<div class="pt-5"></div>

<!-- 设置底部的 margin 为 auto -->
<div class="mb-auto"></div>

设置水平和垂直方向的间距

<!-- 设置水平（左右）的 margin 为 2 -->
<div class="mx-2"></div>

<!-- 设置垂直（上下）的 padding 为 1 -->
<div class="py-1"></div>

设置开始和结束方向的间距

<!-- 设置开始方向（左或右）的 margin 为 2 -->
<div class="ms-2"></div>

<!-- 设置结束方向（右或左）的 padding 为 4 -->
<div class="pe-4"></div>

5. 响应式间距

Bootstrap 的间距实用类支持响应式设计，你可以为不同的视口尺寸指定不同的间距值。前缀表示不同的视口尺寸：

sm：小型设备（≥576px）
md：中型设备（≥768px）
lg：大型设备（≥992px）
xl：超大型设备（≥1200px）
xxl：超超大型设备（≥1400px）

响应式示例

<!-- 在中型设备及以上设置左右的 margin 为 4 -->
<div class="mx-md-4"></div>

<!-- 在小型设备及以上设置顶部的 padding 为 3 -->
<div class="pt-sm-3"></div>

<!-- 在大型设备及以上设置开始方向的 margin 为 2 -->
<div class="ms-lg-2"></div>

<!-- 在超大型设备及以上设置结束方向的 padding 为 5 -->
<div class="pe-xl-5"></div>