企业官网建设流程全解析

• 前端
• UI组件

本文围绕 BOOTSTRA.386（基于 Bootstrap 5.3.1 的 DOS 复古主题）中的 Visibility 工具类展开，讲解.visible与.invisible的语义、与display类（如.d-none）的本质区别、无障碍行为，以及它们如何通过 Sass utilities API 生成与定制。读完本文，你将掌握在不改变文档流、不丢失元素占位的前提下控制显隐的正确姿势，并能在 Sass 源码层面理解并扩展这套工具类。

一、核心概念：控制 visibility 而不动 display

BOOTSTRA.386 的 Visibility 工具类由两个类组成：.visible和.invisible。它们的作用非常纯粹——只修改 CSS 的visibility属性，完全不会触碰display值。这意味着：

• .invisible元素虽然不可见，但依然占据页面空间，参与正常的文档流布局；
• 元素占位、间距、兄弟元素的位置均不受影响；
• 隐藏与显示之间不会引发"布局抖动"（layout shift）。

文档中的原话是："These utility classes do not modify thedisplayvalue at all and do not affect layout –.invisibleelements still take up space in the page." 这正是它与display: none类工具（如.d-none）最关键的差异：display: none会把元素从布局中彻底移除，而visibility: hidden只负责"看不见"。

在 HTML 中按需应用即可：

<div class="visible">...</div> <div class="invisible">...</div>

二、无障碍（屏幕阅读器）行为警示

使用.invisible前必须先明确一个重要的无障碍后果：带有.invisible类的元素，不仅视觉上被隐藏，也会从辅助技术（如屏幕阅读器）的可访问树中被移除。

文档中通过 callout 明确警示了这一点（见 visibility.md）。这带来两层含义：

1. 如果你希望"视觉隐藏但保留给屏幕阅读器朗读"（常见的sr-only场景），不要使用.invisible，而应使用 BOOTSTRA.386 的.visually-hidden类；
2. 反过来，如果你希望"彻底隐藏，连读屏软件也不朗读"，.invisible是符合预期的选择。

三、底层实现：编译后的 CSS 究竟长什么样

文档给出了.visible/.invisible的源码定义：

// Class .visible { visibility: visible !important; } .invisible { visibility: hidden !important; }

两个规则都带上了!important，以保证工具类能够压过组件内部更具体或更靠后的样式。编译产物可以在仓库的构建结果中直接验证，例如 bootstrap-utilities.rtl.css 中对应输出为：

.visible { visibility: visible !important; } .invisible { visibility: hidden !important; }

四、Sass utilities API：这两个类是从哪来的

在 Bootstrap 5.x（BOOTSTRA.386 同样如此）中，绝大多数工具类不再是手写的 CSS，而是由一个统一的utilities API驱动的。Visibility 工具类正是其中的一个典型案例。

4.1 定义位置与 map 结构

在 scss/_utilities.scss 中，visibility 被定义为一个工具条目：

// scss-docs-start utils-visibility "visibility": ( property: visibility, class: null, values: ( visible: visible, invisible: hidden, ) ), // scss-docs-end utils-visibility

逐项拆解这个 Sass map：

其中class: null是关键。文档在 utilities/api.md 中专门用 visibility 作为示例解释了这一点：当class为null时，API 会为values的每个键直接生成类，即.visible与.invisible，而不会产出类似.visibility-visible的中间命名。

4.2 generate-utility mixin 的生成逻辑

这些工具类由 scss/mixins/_utilities.scss 中的generate-utility()mixin 统一生成。核心逻辑可以概括为：

1. 读取values，若传入的是列表或字符串则自动转为 map；
2. 读取property（支持多个属性，这里只有一个visibility）；
3. 根据class决定类名前缀，为null时置为空字符串；
4. 遍历每个key => value，拼接出完整类名并输出规则；
5. 规则中的!important由全局开关$enable-important-utilities决定（mixin 中对应#{$property}: $value if($enable-important-utilities, !important, null)这一行）。

该开关定义在 scss/_variables.scss：$enable-important-utilities: true !default;，默认开启。因此编译产物中.visible/.invisible都带!important；如果你在自定义编译时将此变量设为false，这两条规则会退化为无!important的普通规则。

五、测试验证：从仓库测试看预期行为

BOOTSTRA.386 的源码树中包含针对 utilities API 的 Sass 测试，可以印证 Visibility 工具类的真实生成行为。

在 scss/tests/mixins/_utilities.test.scss 中，测试明确断言了class: null情况下应生成：

.visible { visibility: visible; } .invisible { visibility: hidden; }

同一文件的另一组测试（第 371-391 行）验证了class: null与响应式 infix 组合时，会去掉多余的前导连字符，产出.sm-visible、.sm-invisible这类断点前缀类——这从侧面说明，你可以通过为 visibility 工具增加responsive: true选项来获得响应式版本。

六、与其他隐藏手段的对比与选型

BOOTSTRA.386 中隐藏元素的手段不止一种，理解各自语义才能选对：

文档在 reboot.md 中给出了重要提示：HTML5 的[hidden]属性默认样式为display: none，Bootstrap（及本主题）将其加强为[hidden] { display: none !important; }以防止 display 被意外覆盖；同时指出[hidden]与 jQuery 的hide()/show()不兼容，因此并不特别推荐。如果只是想切换元素的可见性而不改变其文档流位置，应改用.invisible类。

七、实战场景与使用建议

综合以上语义，.invisible的典型适用场景包括：

1. 平滑显隐过渡：visibility是可参与 CSS transition 的属性，可以配合opacity实现"淡入淡出但保留占位"的效果；而display无法参与过渡动画。例如：

   <div class="toast invisible"> 提示内容... </div>

2. 需要保底的布局占位：当删除元素会导致周围布局跳变时（如表格列、表单校验信息区），用.invisible预占空间比display: none更合适。

3. 与 JS 配合的简单切换：通过给元素添加/移除.invisible类即可完成显隐切换，且不依赖任何插件。注意此类对读屏软件同样隐藏，若需要读屏可见请改用.visually-hidden。

八、通过 utilities API 扩展与定制

既然 Visibility 工具类来自 utilities API，你就可以用同样机制按需调整：

• 新增值：例如为 visibility 添加更多中间态（虽然 CSS 本身只有visible/hidden/collapse）；
• 加响应式前缀：给该 map 增加responsive: true生成.sm-invisible、.md-visible等断点版本；
• 移除该工具：通过map-remove($utilities, "visibility")从编译产物中剔除，减小 CSS 体积。

具体写法可参考 utilities/api.md 中"Override / Add / Modify / Remove utilities"各小节给出的map-merge、map-get模式，本文不再赘述。需要说明的是，BOOTSTRA.386 仓库本身已保留了完整的scss/源码（含 scss/_utilities.scss 与 scss/mixins/_utilities.scss），你可以直接参考这些文件进行二次开发。

小结

BOOTSTRA.386 的 Visibility 工具类用两个极简的类名解决了"只隐藏、不动布局"的常见需求：.visible对应visibility: visible !important，.invisible对应visibility: hidden !important。其背后的 utilities API 与generate-utility()mixin 保证了生成的规范性、可测试性与可扩展性。理解它与.d-none、[hidden]、.visually-hidden的差异，能帮助你在 DOS 复古风格的界面中精确控制元素显隐，既不破坏精心设计的像素级布局，也不牺牲无障碍体验。

• 前端
• UI组件