企业官网建设流程全解析

• 前端
• UI组件

BOOTSTRA.386 是基于 Bootstrap 5.3.1 构建的复古 DOS 风格主题。本指南聚焦于该版本中"比例辅助类（Ratio Helpers）"这一核心工具：它借助伪元素与 CSS 自定义属性，让你为<iframe>、<video>、<embed>、<object>以及普通<div>、<img>等任意元素维持期望的宽高比，尤其适合按父容器宽度自适应地嵌入视频与幻灯片。读完本文，你将掌握内置比例类的用法、如何用--bs-aspect-ratio变量按需定制比例、跨断点响应式改写比例的技巧，以及如何通过 Sass 映射重新定义默认比例集。

关于比例辅助类

比例辅助类（Ratio Helpers）的核心作用是管理外部嵌入内容的宽高比，比如<iframe>、<embed>、<video>和<object>。同时，这些辅助类也能作用于任何标准的 HTML 子元素（例如<div>或<img>）。样式从父元素.ratio类直接作用于子元素，无需在子元素上额外添加类名。

在 BOOTSTRA.386 的源码中，实现位于 v5.3.1/scss/helpers/_ratio.scss：

.ratio { position: relative; width: 100%; &::before { display: block; padding-top: var(--#{$prefix}aspect-ratio); content: ""; } > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } @each $key, $ratio in $aspect-ratios { .ratio-#{$key} { --#{$prefix}aspect-ratio: #{$ratio}; } }

其工作原理可以拆解为三个关键点：

• .ratio建立position: relative与width: 100%的定位上下文，使容器宽度始终等于父元素宽度；
• 借助::before伪元素生成一个display: block的占位层，其padding-top直接读取 CSS 变量--bs-aspect-ratio——这正是"用 padding 撑出高度"的经典技术：垂直方向的 padding 百分比是以父容器宽度为基准计算的，因此padding-top: 56.25%就能让容器高度恰好等于宽度的 56.25%（即 16:9）；
• 通过> *通用选择器，把第一个直接子元素绝对定位并撑满整个容器（top: 0; left: 0; width: 100%; height: 100%），从而让嵌入内容精确填满由伪元素撑出的比例空间。

比例值声明在一个 Sass 映射（map）中，并通过 CSS 变量注入到每个类里，这同时也为自定义比例（Custom Ratios）提供了入口。

基础示例：包裹一个 iframe

将任意嵌入内容（比如<iframe>）放入带.ratio和比例类的父元素即可。得益于> *通用选择器，直接子元素会被自动调整尺寸：

<div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe> </div>

一个实用提示：你不需要在<iframe>上写frameborder="0"。BOOTSTRA.386 的 Reboot 样式已经帮你移除了 iframe 边框。在 v5.3.1/scss/_reboot.scss 中可以找到对应实现：

// Remove border from iframe iframe { border: 0; }

而_reboot.scss与_helpers.scss都通过 v5.3.1/scss/bootstrap.scss 中的@import被编入完整构建，所以只要你引入完整版 CSS，这一行为默认即生效。

内置比例类

比例可以通过修饰类（modifier classes）自定义。默认提供以下比例类：

<div class="ratio ratio-1x1"> <div>1x1</div> </div> <div class="ratio ratio-4x3"> <div>4x3</div> </div> <div class="ratio ratio-16x9"> <div>16x9</div> </div> <div class="ratio ratio-21x9"> <div>21x9</div> </div>

这些类对应的默认值定义在 v5.3.1/scss/_variables.scss 的$aspect-ratios映射中：

// scss-docs-start aspect-ratios $aspect-ratios: ( "1x1": 100%, "4x3": calc(3 / 4 * 100%), "16x9": calc(9 / 16 * 100%), "21x9": calc(9 / 21 * 100%) ) !default; // scss-docs-end aspect-ratios

值得注意的细节是：除了 1:1（直接为100%），其余比例都使用calc(高度 / 宽度 * 100%)的写法，例如 16:9 对应calc(9 / 16 * 100%)，即 56.25%。这种写法让开发者一眼就能看出比例来源，也便于后续在映射中增改。

自定义比例：利用 CSS 变量

每个.ratio-*类都会在自身选择器中生成一个 CSS 自定义属性（CSS 变量）。你可以覆盖这个变量，配合简单的计算随时创建自定义比例。

例如，要创建一个 2x1 的比例，在.ratio上设置--bs-aspect-ratio: 50%即可：

<div class="ratio" style="--bs-aspect-ratio: 50%;"> <div>2x1</div> </div>

计算逻辑为：高度 / 宽度 = 1 / 2 = 50%。同理，若要实现 3:1，则设置calc(1 / 3 * 100%)即约 33.333%。

这个 CSS 变量让你可以跨断点方便地修改比例。下面的例子从 4:3 开始，到中等断点（md）及以上切换为自定义的 2x1：

.ratio-4x3 { @include media-breakpoint-up(md) { --bs-aspect-ratio: 50%; // 2x1 } }

<div class="ratio ratio-4x3"> <div>4x3, then 2x1</div> </div>

从实现上看，CSS 变量名中的前缀来自 v5.3.1/scss/_variables.scss 的$prefix（默认bs-），因此最终变量名为--bs-aspect-ratio。变量在类选择器内定义（.ratio-4x3 { --bs-aspect-ratio: ...; }），继承机制使得同一个.ratio元素可以同时挂载比例类与内联/断点样式，后者的优先级覆盖前者，从而实现响应式切换。由于比例值只由一个变量驱动，任何覆盖（内联样式、自定义类、媒体查询）都只需改变这一个变量，改动成本极低。

修改 Sass 映射：自定义默认比例集

如果你希望调整"默认提供哪些比例类"，可以在_variables.scss中修改$aspect-ratios映射，然后重新编译 Sass 使其生效。上文展示的就是默认映射，你可以按"类名": 百分比值的形式增删条目，例如添加一个"2x1": calc(1 / 2 * 100%)。

映射中的每个键值对会被 v5.3.1/scss/helpers/_ratio.scss 的@each循环展开，自动生成对应的.ratio-{key}类。也就是说：向映射中添加键，编译后就会自动得到新的比例类，无需手写任何额外 CSS。需要提醒的是，这些变量都带有!default标记，你可以通过自己的 Sass 配置在引入 BOOTSTRA.386 源码之前重新赋值来覆盖默认值。

与其他部分的联动

• Reboot 联动：如上所述，Reboot 移除了iframe边框，因此配合比例类使用时无需再写frameborder="0"。
• 从旧版本迁移：如果你的项目此前使用 Bootstrap 4 风格的响应式嵌入辅助类（.embed-responsive），可以参考迁移文档 v5.3.1/site/content/docs/5.3/migration.md 中的说明：类名由.ratio-16by9改为.ratio-16x9；移除了.embed-responsive-item与元素组选择器，改用更简洁的> *选择器，且不再需要额外的子元素类名；Sass 映射$embed-responsive-aspect-ratios更名为$aspect-ratios，值简化为key: value（类名与百分比）形式；每个映射值都会生成对应的 CSS 变量，通过修改--bs-aspect-ratio即可实现任意自定义比例。
• 编译链路：比例辅助类通过 v5.3.1/scss/_helpers.scss 的@import "helpers/ratio";被引入，而_helpers.scss又由 v5.3.1/scss/bootstrap.scss 引入。若只需辅助类部分，也可以按需引入_helpers.scss或直接使用编译产物中的完整 CSS。

小结

BOOTSTRA.386（v5.3.1）的比例辅助类以"父容器伪元素 + CSS 变量"为核心：::before通过padding-top读取--bs-aspect-ratio撑出高度，> *选择器让子元素填满容器，$aspect-ratios映射驱动默认比例类的生成。实际使用中，你既可以放心选用ratio-1x1、ratio-4x3、ratio-16x9、ratio-21x9四个内置类，也可以随时用--bs-aspect-ratio变量按 高度/宽度×100% 的公式定制任意比例，甚至结合断点混合宏实现响应式比例切换。这套机制让视频、幻灯片等嵌入内容在任何容器宽度下都能保持稳定、不溢出的布局。

• 前端
• UI组件