BOOTSTRA.386 指南：Bootstrap 5.3 Vertical Rule（垂直分隔线）Helper 的用法与源码解析

前端UI组件【免费下载链接】BOOTSTRA.386A vintage 1980s DOS inspired Twitter Bootstrap theme项目地址https://gitcode.com/gh_mirrors/bo/BOOTSTRA.386点击查看免费下载本文围绕 BOOTSTRA.386 主题所基于的 Bootstrap 5.3 文档中的 Vertical rule垂直分隔线Helper 展开系统讲解.vr类的设计原理、基础与高级用法含 flex 布局自适应高度、与 Stacks 组合、以及底层 Sass 变量$vr-border-width的定制方法并结合仓库内v5.3.1/scss的真实实现给出源码级佐证。读完本文你将能够在 BOOTSTRA.386 项目中用一行div classvr/div快速实现水平分隔线的垂直版本并掌握自定义宽度与样式的手段。Vertical rule 是什么hr的垂直化Vertical rule 是 Bootstrap 5.1 版本起加入的 Helper 工具类对应文档位于 v5.3.1/site/content/docs/5.3/helpers/vertical-rule.md它的设计灵感直接来自 HTML 的hr元素hr在页面上渲染一条水平分隔线而.vr则渲染一条垂直分隔线用于在常见布局中分割左右区块。两者的样式规则保持一致.vr具备与hr相同的三个视觉特征宽度为1px其宽度取值自边框宽度变量默认解析为1px最小高度为1em保证即使在内容为空的情况下也有一条可见的分隔线颜色由currentColor与opacity共同决定默认跟随父元素文本颜色透明度与hr共享同一变量。由于currentColor的引入.vr的颜色会随上下文文字颜色自动变化无需单独设置颜色类必要时也可通过自定义样式进一步调整。基础用法一行代码插入垂直分隔线在 BOOTSTRA.386 项目中只要页面引入了 Bootstrap 5.3 的样式就可以直接使用.vr类div classvr/div渲染效果等同于一条高度为1em、宽度1px的垂直短线颜色继承当前文字颜色。它最常见的应用场景是放在文本段落之间、导航链接之间或两列内容之间作为视觉分割。在 flex 布局中自动拉伸高度.vr的一大特性是能够随 flex 容器的高度自动伸缩。将.vr放入设置了display: flex的容器中并给容器指定高度分隔线便会撑满整个容器高度div classd-flex styleheight: 200px; div classvr/div /div以上代码中.vr会从1em的最小高度拉伸到与容器相同的200px。这一行为由源码中的align-self: stretch属性保证详见下文源码解析。与 Stacks 组合使用hstack 横向堆叠中的分割Vertical rule 的典型实战场景是配合 Stacks堆叠布局工具类使用相关文档见 v5.3.1/site/content/docs/5.3/helpers/stacks.md。Stacks 是一组基于 flexbox 的速记工具类.hstack生成横向布局、.vstack生成纵向布局源码见 scss/helpers/_stacks.scss。在.hstack中.vr与gap-*、ms-auto等间距工具类配合可以构建带分隔线的横向工具栏div classhstack gap-3 div classp-2First item/div div classp-2 ms-autoSecond item/div div classvr/div div classp-2Third item/div /div其中ms-auto将第二项推到行首方向.vr作为第三、四项之间的垂直分割。同理.vr也可用于构建行内表单inline form的分隔例如在输入框与提交按钮之间、或不同操作按钮之间插入垂直分割线div classhstack gap-3 input classform-control me-auto typetext placeholderAdd your item here... aria-labelAdd your item here... button typebutton classbtn btn-secondarySubmit/button div classvr/div button typebutton classbtn btn-outline-dangerReset/button /div从 stacks.md 中的多个示例可以看出.vr在.hstack中默认会被 flex 布局拉伸至与其他子项等高从而实现整齐一致的分割效果。CSS 源码解析.vr的完整实现BOOTSTRA.386 仓库中.vr的完整样式定义位于 scss/helpers/_vr.scss.vr { display: inline-block; align-self: stretch; width: $vr-border-width; min-height: 1em; background-color: currentcolor; opacity: $hr-opacity; }逐行拆解其工作原理display: inline-block使分隔线可以像行内元素一样嵌入文本流同时保留宽高可设置的能力align-self: stretch在 flex/grid 容器中自动拉伸高度这是上一节flex 布局自动伸缩的关键width: $vr-border-width宽度交给 Sass 变量控制默认等价于1pxmin-height: 1em保证无内容时也有最小可见高度background-color: currentcolor以当前文字颜色作为分隔线颜色实现自动跟随主题opacity: $hr-opacity与hr共享同一个透明度变量保证视觉上的一致性。此外.vr通过 scss/_helpers.scss 中的import helpers/vr;被整体引入主题样式体系因此只要正常编译 BOOTSTRA.386 的 Sass.vr即可开箱即用。与hr样式的一致性Bootstrap 5.3 对hr的 Reboot 样式位于 scss/_reboot.scsshr { margin: $hr-margin-y 0; color: $hr-color; border: 0; border-top: $hr-border-width solid $hr-border-color; opacity: $hr-opacity; }可以看到.vr与hr确实共享了同一套视觉变量体系两者都使用$hr-opacity控制透明度宽度则分别由$hr-border-width与$vr-border-width控制。这正是文档所称styled just likehrelements的源码依据。Sass 变量定制修改分隔线宽度想要调整.vr的默认宽度需要覆盖其专用 Sass 变量$vr-border-width。该变量定义在 scss/_variables.scss 的vr-variables区块中// scss-docs-start vr-variables $vr-border-width: var(--#{$prefix}border-width) !default; // scss-docs-end vr-variables这里的默认值并非直接写死的像素值而是一个 CSS 变量引用var(--bs-border-width)$prefix默认为bs-见 scss/_variables.scss。而--bs-border-width来源于基础边框宽度变量$border-width: 1px !default见 scss/_variables.scss因此在默认情况下.vr宽度即为文档所述的1px。定制方式一覆盖 Sass 变量在导入 BOOTSTRA.386 的bootstrap.scss之前先定义自己的变量值即可全局改变分隔线宽度// 在你的自定义 SCSS 中位于 import 之前 $vr-border-width: 2px; import bootstrap;注意!default标志的含义是仅在变量尚未定义时才使用默认值因此提前赋值即可完成覆盖。定制方式二覆盖 CSS 自定义属性由于默认值直接引用--bs-border-width也可以不改 Sass而是直接修改 CSS 自定义属性来影响.vr以及所有引用该变量的组件边框:root { --bs-border-width: 2px; }这种方式会同时影响其他使用var(--bs-border-width)的组件如表格、按钮、卡片边框等从 scss/_variables.scss 中可以找到大量此类引用因此更适合作为全局性的粗边框主题定制手段。若只想单独调整.vr优先选用 Sass 变量方式。BOOTSTRA.386 主题中的特殊取值作为一款 1980 年代 DOS 风格主题BOOTSTRA.386 在分隔线相关变量上与原版 Bootstrap 5.3 存在一个值得注意的差异透明度变量$hr-opacity。在 BOOTSTRA.386 的 scss/_variables.scss 中$hr-opacity: 1即分隔线完全不透明、呈现清晰的实线效果而在仓库内保存的原版参考文件 scss-ref/_variables.scss 中$hr-opacity: .25原版默认为 25% 透明度。从这一对比可以推断BOOTSTRA.386 有意去除了分隔线的半透明效果让.vr与hr都以更醒目、更硬朗的实线呈现契合其复古 CRT/DOS 的视觉风格。由于.vr的opacity直接引用$hr-opacity这一差异会同时作用于垂直分隔线无需额外配置。使用建议与注意事项最小高度依赖字号min-height: 1em意味着分隔线的最小高度跟随父元素font-size变化在 BOOTSTRA.386 中字号被统一固定见 scss/_reboot.scss 的全局字体规则因此.vr的最小高度在主题内保持一致。垂直方向需要容器配合若将.vr放在普通块级容器中非 flex它只会显示1em高的短线要获得撑满容器高度的效果请将其放入 flex 容器如.d-flex或.hstack中。颜色跟随文字.vr使用currentcolor着色因此给父元素设置text-*颜色工具类即可联动改变分隔线颜色无需额外 CSS。与 Stacks 组合是最佳实践官方文档在 stacks.md 中展示了.hstack.vr的多种组合包括按钮堆叠、行内表单分隔等是垂直分隔线最典型的落地场景。小结Vertical rule 是 Bootstrap 5.3 中实现成本极低、应用场景清晰的 Helperdiv classvr/div一行即可获得与hr同源的垂直分隔线借助align-self: stretch在 flex 布局中自动撑高配合.hstack可快速搭建带分割的工具栏与表单而$vr-border-width与--bs-border-width提供了 Sass 与 CSS 两个层面的定制入口。结合 BOOTSTRA.386 对$hr-opacity: 1的取值调整垂直分隔线在该主题下呈现出更贴合 DOS 审美的实线效果可直接用于复古风格界面的分区设计。赞分享前端UI组件【免费下载链接】BOOTSTRA.386A vintage 1980s DOS inspired Twitter Bootstrap theme项目地址https://gitcode.com/gh_mirrors/bo/BOOTSTRA.386点击查看免费下载相关推荐Ant Design Divider 垂直分割线完整指南orientationvertical 与 vertical 用法详解Ant Design Divider 垂直分割线完整指南 orientationvertical 与 vertical 用法详解 导读 在 Ant De前端UI组件设计系统ngx-bootstrap Tabs 垂直胶囊页签Vertical Pills实战[vertical]true 与 typepills 的完整用法ngx bootstrap Tabs 垂直胶囊页签Vertical Pills实战 vertical true 与 typepills 的完整UI组件前端Ant Design Divider 垂直分割线typevertical完整实战指南行内分隔、源码原理与样式定制Ant Design Divider 垂直分割线typevertical完整实战指南行内分隔、源码原理与样式定制 导读 typevertic前端UI组件设计系统上一篇Data Engineering Zoomcamp 之 Terraform 入门用 IaC 为 GCP 数据湖与数据仓库搭建基础设施下一篇FlatBuffers 贡献指南从 CLA 签署、代码评审到文档本地构建与发布创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考