SuperAPI AI 工具集

bootstrap-helpers

通用与其它

查看项目

更新于 10-16 02:30

技能介绍

用途:该技能面向 Bootstrap 5.3 的辅助类(Helpers),当用户询问 Bootstrap helpers、clearfix、颜色与背景辅助类、彩色链接等内容时使用,提供常见辅助模式的类名与用法说明。

主要能力:涵盖 clearfix 清除浮动;text-bg-* 组合颜色与背景并自动保证文字对比度;link-* 彩色链接及 link-opacity-、link-underline-、link-offset-* 与 hover 变体;focus-ring 焦点环及 focus-ring-{color};icon-link 图标链接与 icon-link-hover;fixed-top/fixed-bottom 固定定位与 sticky-*-top/bottom 粘性定位;ratio 比例容器(16x9、21x9、4x3、1x1 及 --bs-aspect-ratio 自定义);vstack/hstack 堆叠布局与 gap、vr 垂直分隔线;stretched-link 拉伸链接;text-truncate 文本截断;visually-hidden 与 visually-hidden-focusable 视觉隐藏。

使用方式:在 HTML 元素上直接添加对应类名即可,例如 clearfix、text-bg-primary、link-primary、focus-ring、ratio ratio-16x9、vstack gap-3、stretched-link、text-truncate、visually-hidden。部分功能依赖父元素 position: relative(卡片默认具备),拉伸链接需注意 transform、perspective、filter、will-change 等属性会创建包含块。可通过 Sass 变量定制焦点环、图标链接与比例等,也可用 visually-hidden mixin 自定义类。

适用场景:需要快速实现对比色块、链接样式、响应式视频嵌入、粘性导航、卡片整体可点击、无障碍隐藏文本等常见界面模式。

限制:gap 工具类在 Safari 14.5 之前与 flexbox 配合支持不完整,网格布局不受影响,可改用 margin 工具类;链接下划线透明度类需先应用 link-underline 或 link-underline-{color} 基础类;下划线偏移可直接与链接颜色配合。资料未提供安装命令、版本依赖或收费信息。