前端UI组件【免费下载链接】BOOTSTRA.386A vintage 1980s DOS inspired Twitter Bootstrap theme项目地址https://gitcode.com/gh_mirrors/bo/BOOTSTRA.386点击查看免费下载本文围绕 BOOTSTRA.386基于 Bootstrap 5.3.1 的 DOS 复古主题中的 Visibility 工具类展开讲解.visible与.invisible的语义、与display类如.d-none的本质区别、无障碍行为以及它们如何通过 Sass utilities API 生成与定制。读完本文你将掌握在不改变文档流、不丢失元素占位的前提下控制显隐的正确姿势并能在 Sass 源码层面理解并扩展这套工具类。一、核心概念控制 visibility 而不动 displayBOOTSTRA.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 classvisible.../div div classinvisible.../div二、无障碍屏幕阅读器行为警示使用.invisible前必须先明确一个重要的无障碍后果带有.invisible类的元素不仅视觉上被隐藏也会从辅助技术如屏幕阅读器的可访问树中被移除。文档中通过 callout 明确警示了这一点见 visibility.md。这带来两层含义如果你希望视觉隐藏但保留给屏幕阅读器朗读常见的sr-only场景不要使用.invisible而应使用 BOOTSTRA.386 的.visually-hidden类反过来如果你希望彻底隐藏连读屏软件也不朗读.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.xBOOTSTRA.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键值含义propertyvisibility生成的规则将设置 CSS 属性visibilityclassnull类名前缀为 null表示直接使用 values 的键作为完整类名不再拼接前缀valuesvisible: visible、invisible: hidden键visible/invisible生成类名值visible/hidden生成属性值其中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 统一生成。核心逻辑可以概括为读取values若传入的是列表或字符串则自动转为 map读取property支持多个属性这里只有一个visibility根据class决定类名前缀为null时置为空字符串遍历每个key value拼接出完整类名并输出规则规则中的!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 中隐藏元素的手段不止一种理解各自语义才能选对手段效果是否占位读屏软件.invisiblevisibility: hidden是隐藏.d-nonedisplay: none否隐藏.visually-hidden绝对定位裁切否可见朗读HTML[hidden]display: none !important否隐藏文档在 reboot.md 中给出了重要提示HTML5 的[hidden]属性默认样式为display: noneBootstrap及本主题将其加强为[hidden] { display: none !important; }以防止 display 被意外覆盖同时指出[hidden]与 jQuery 的hide()/show()不兼容因此并不特别推荐。如果只是想切换元素的可见性而不改变其文档流位置应改用.invisible类。七、实战场景与使用建议综合以上语义.invisible的典型适用场景包括平滑显隐过渡visibility是可参与 CSS transition 的属性可以配合opacity实现淡入淡出但保留占位的效果而display无法参与过渡动画。例如div classtoast invisible 提示内容... /div需要保底的布局占位当删除元素会导致周围布局跳变时如表格列、表单校验信息区用.invisible预占空间比display: none更合适。与 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组件【免费下载链接】BOOTSTRA.386A vintage 1980s DOS inspired Twitter Bootstrap theme项目地址https://gitcode.com/gh_mirrors/bo/BOOTSTRA.386点击查看免费下载相关推荐Gamut 感知与 Tailwind v4基于 oklch 的宽色域配色与主题迁移实战指南Gamut 感知与 Tailwind v4基于 oklch 的宽色域配色与主题迁移实战指南 导读 本指南系统讲解颜色色域Gamut的基础知识与 oklch前端UI组件BOOTSTRA.386 显示工具类Display Utilities实战.d-* 响应式显隐与打印控制BOOTSTRA.386 显示工具类Display Utilities实战.d 响应式显隐与打印控制 本文基于 BOOTSTRA.386 v5.3.1 官前端UI组件BOOTSTRA.386 元素透明度工具类详解基于 Bootstrap 5.3 .opacity-* 与 Sass 工具类 API 的控制方案BOOTSTRA.386 元素透明度工具类详解基于 Bootstrap 5.3 .opacity 与 Sass 工具类 API 的控制方案 BOOTSTRA.前端UI组件上一篇ComfyUI-MimicMotionWrapper3分钟学会视频动作迁移让任何人跳同一支舞下一篇ComfyUI-VideoHelperSuite中VHS_VideoCombine节点缺失问题的解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考