★ FEATURED ARTICLE 前端UI组件【免费下载链接】BOOTSTRA.386A vintage 1980s DOS inspired Twitter Bootstrap theme项目地址https://gitcode.com/gh_mirrors/bo/BOOTSTRA.386点击查看免费下载导读本文以 BOOTSTRA.386 仓库 v5.3.1 目录下官方文档 components/buttons.md 为核心系统讲解 Bootstrap 5 按钮组件的基础类、语义变体、尺寸与禁用态、区块布局以及 toggle 按钮插件并结合仓库内 scss/_buttons.scss、scss/mixins/_buttons.scss 与 js/src/button.js 等源码深入剖析其底层 CSS 变量机制与 Sass 混入生成原理。读完本文你将能够在 BOOTSTRA.386 复古 DOS 主题下熟练使用、扩展与自定义按钮掌握从data-bs-toggle声明式用法到编程式 API 的完整技能。BOOTSTRA.386 是一款以 1980 年代 DOS 界面为灵感、横跨 Bootstrap v2/v3/v4/v5 的主题本文内容基于仓库中的 v5.3.1 版本目录所有路径均以仓库根目录为基准。Base class.btn基础类Bootstrap 为按钮提供了一个基础类.btn负责设置内边距、内容对齐等基础样式。默认情况下.btn控件的边框和背景色都是透明的并且没有显式的 focus 与 hover 样式button typebutton classbtnBase class/button从源码看这些默认值正是通过 CSS 变量在 scss/_buttons.scss 中声明的.btn { --#{$prefix}btn-padding-x: #{$btn-padding-x}; --#{$prefix}btn-padding-y: #{$btn-padding-y}; --#{$prefix}btn-font-family: #{$btn-font-family}; include rfs($btn-font-size, --#{$prefix}btn-font-size); --#{$prefix}btn-font-weight: #{$btn-font-weight}; --#{$prefix}btn-line-height: #{$btn-line-height}; --#{$prefix}btn-color: #{$btn-color}; --#{$prefix}btn-bg: transparent; --#{$prefix}btn-border-width: #{$btn-border-width}; --#{$prefix}btn-border-color: transparent; --#{$prefix}btn-border-radius: #{$btn-border-radius}; --#{$prefix}btn-hover-border-color: transparent; --#{$prefix}btn-box-shadow: #{$btn-box-shadow}; --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5); }.btn类被设计为与各种按钮变体类配合使用或者作为你自定义样式的起点。官方文档特别给出了一条 warning 提示如果单独使用.btn类请务必至少定义一些显式的:focus和/或:focus-visible样式。这是因为裸.btn没有内置焦点可见样式键盘可达性是自定义按钮时需要自行补齐的底线。Variants语义变体Bootstrap 内置了多种按钮变体每种变体服务于各自的语义用途button typebutton classbtn btn-primaryPrimary/button button typebutton classbtn btn-secondarySecondary/button button typebutton classbtn btn-successSuccess/button button typebutton classbtn btn-dangerDanger/button button typebutton classbtn btn-warningWarning/button button typebutton classbtn btn-infoInfo/button button typebutton classbtn btn-lightLight/button button typebutton classbtn btn-darkDark/button button typebutton classbtn btn-linkLink/button以上示例中的主题色循环对应官方文档中的{{ range $theme-colors }}模板写法渲染结果即上面的完整变体集。从源码看变体类并不是手写的而是由 Sass 循环批量生成的。在 scss/_buttons.scss 的btn-variant-loops代码块中each $color, $value in $theme-colors { .btn-#{$color} { if $color light { include button-variant( $value, $value, $hover-background: shade-color($value, $btn-hover-bg-shade-amount), $hover-border: shade-color($value, $btn-hover-border-shade-amount), $active-background: shade-color($value, $btn-active-bg-shade-amount), $active-border: shade-color($value, $btn-active-border-shade-amount) ); } else if $color dark { include button-variant( $value, $value, $hover-background: tint-color($value, $btn-hover-bg-tint-amount), $hover-border: tint-color($value, $btn-hover-border-tint-amount), $active-background: tint-color($value, $btn-active-bg-tint-amount), $active-border: tint-color($value, $btn-active-border-tint-amount) ); } else { include button-variant($value, $value); } } }注意其中的细节light变体的 hover/active 使用shade-color()加深dark变体使用tint-color()提亮其余颜色走默认分支。这保证了深色与浅色按钮在交互态下都能保持足够的对比度。官方文档还附带一条关于无障碍的提示部分按钮样式的前景色相对较浅只应在深色背景上使用以保证足够的对比度assistive technologies 提示原文见 buttons.md 中的 callout。禁用文本换行如果不想让按钮文本换行可以给按钮追加.text-nowrap工具类。在 Sass 中则可以通过设置$btn-white-space: nowrap来全局禁用按钮文本换行。对应的 Sass 变量定义位于 scss/_variables.scss$btn-white-space: null !default; // Set to nowrap to prevent text wrapping默认值为null即允许换行在 scss/_buttons.scss 中以white-space: $btn-white-space;的形式注入.btn基础类。Button tags在a与input上使用按钮类.btn类设计上主要面向button元素但同样可以用于a或input元素部分浏览器渲染效果可能略有差异a classbtn btn-primary href# rolebuttonLink/a button classbtn btn-primary typesubmitButton/button input classbtn btn-primary typebutton valueInput input classbtn btn-primary typesubmit valueSubmit input classbtn btn-primary typereset valueReset官方文档特别强调当把按钮类用在a元素上、且该链接用于触发页内功能如折叠内容而非跳转到新页面时应当为链接添加rolebutton以便屏幕阅读器等辅助技术正确理解其语义。Outline buttons描边按钮如果你需要按钮但又不想要厚重的背景色可以把默认的修饰类替换为.btn-outline-*系列它们会移除按钮上的所有背景图片和背景颜色只保留描边与文字色button typebutton classbtn btn-outline-primaryPrimary/button button typebutton classbtn btn-outline-secondarySecondary/button button typebutton classbtn btn-outline-successSuccess/button button typebutton classbtn btn-outline-dangerDanger/button button typebutton classbtn btn-outline-warningWarning/button button typebutton classbtn btn-outline-infoInfo/button button typebutton classbtn btn-outline-lightLight/button button typebutton classbtn btn-outline-darkDark/button描边变体同样由 Sass 循环生成见 scss/_buttons.scsseach $color, $value in $theme-colors { .btn-outline-#{$color} { include button-outline-variant($value); } }配套的button-outline-variant()混入定义在 scss/mixins/_buttons.scss它通过重写 CSS 变量实现透明背景 彩色描边并在 hover 时填充背景色mixin button-outline-variant( $color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color, $active-color: color-contrast($active-background) ) { --#{$prefix}btn-color: #{$color}; --#{$prefix}btn-border-color: #{$color}; --#{$prefix}btn-hover-color: #{$color-hover}; --#{$prefix}btn-hover-bg: #{$active-background}; --#{$prefix}btn-hover-border-color: #{$active-border}; --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)}; --#{$prefix}btn-active-color: #{$active-color}; --#{$prefix}btn-active-bg: #{$active-background}; --#{$prefix}btn-active-border-color: #{$active-border}; --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; --#{$prefix}btn-disabled-color: #{$color}; --#{$prefix}btn-disabled-bg: transparent; --#{$prefix}btn-disabled-border-color: #{$color}; --#{$prefix}gradient: none; }Sizes按钮尺寸想用更大或更小的按钮追加.btn-lg或.btn-sm即可button typebutton classbtn btn-primary btn-lgLarge button/button button typebutton classbtn btn-secondary btn-lgLarge button/button button typebutton classbtn btn-primary btn-smSmall button/button button typebutton classbtn btn-secondary btn-smSmall button/button底层实现同样不复杂——scss/_buttons.scss 只是调用button-size()混入.btn-lg { include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); } .btn-sm { include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); }除了内置尺寸你还可以用 CSS 变量完全自定义按钮尺寸无需重写整段样式button typebutton classbtn btn-primary style--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem; Custom button /button这得益于button-size()混入同样只设置 CSS 变量scss/mixins/_buttons.scssmixin button-size($padding-y, $padding-x, $font-size, $border-radius) { --#{$prefix}btn-padding-y: #{$padding-y}; --#{$prefix}btn-padding-x: #{$padding-x}; include rfs($font-size, --#{$prefix}btn-font-size); --#{$prefix}btn-border-radius: #{$border-radius}; }提示.btn-lg/.btn-sm中字号部分使用了 RFSResponsive Font Size机制字号会随视口宽度平滑缩放该机制由 scss/_variables.scss 中的$enable-rfs: true控制。Disabled state禁用状态给button元素加上disabled布尔属性即可让按钮呈现禁用外观。禁用按钮被应用了pointer-events: nonehover 与 active 状态都不会触发button typebutton classbtn btn-primary disabledPrimary button/button button typebutton classbtn btn-secondary disabledButton/button button typebutton classbtn btn-outline-primary disabledPrimary button/button button typebutton classbtn btn-outline-secondary disabledButton/button在 scss/_buttons.scss 中禁用态通过以下选择器实现同时支持fieldset:disabled场景:disabled, .disabled, fieldset:disabled { color: var(--#{$prefix}btn-disabled-color); pointer-events: none; background-color: var(--#{$prefix}btn-disabled-bg); background-image: if($enable-gradients, none, null); border-color: var(--#{$prefix}btn-disabled-border-color); opacity: var(--#{$prefix}btn-disabled-opacity); include box-shadow(none); }默认的禁用透明度为$btn-disabled-opacity: .65见 scss/_variables.scss。用于a的禁用按钮行为差异使用a元素的禁用按钮表现略有不同官方文档列出了 4 个要点a元素不支持disabled属性因此必须添加.disabled类才能使其在视觉上呈现禁用状态内置了一些面向未来的样式用于禁用锚点按钮上的所有pointer-events使用a的禁用按钮应添加aria-disabledtrue属性向辅助技术表明元素状态使用a的禁用按钮不应包含href属性。a classbtn btn-primary disabled rolebutton aria-disabledtruePrimary link/a a classbtn btn-secondary disabled rolebutton aria-disabledtrueLink/a链接功能未完全禁用的隐患Link functionality caveat有些场景下你必须在禁用链接上保留href属性。此时.disabled类依靠pointer-events: none试图禁用a的链接功能。需要注意该 CSS 属性目前还不是 HTML 标准的一部分尽管所有现代浏览器都支持更重要的是即便在支持pointer-events: none的浏览器中键盘导航仍然不受影响——视力正常的键盘用户和辅助技术用户依然能够激活这些链接。因此官方文档给出的稳妥做法是除aria-disabledtrue外再为这些链接添加tabindex-1阻止其获得键盘焦点并使用自定义 JavaScript 彻底禁用其功能a href# classbtn btn-primary disabled tabindex-1 rolebutton aria-disabledtruePrimary link/a a href# classbtn btn-secondary disabled tabindex-1 rolebutton aria-disabledtrueLink/aBlock buttons块级按钮通过 display 工具类与 gap 工具类的组合可以像 Bootstrap 4 那样创建响应式全宽块按钮。相比按钮专用类工具类方案在间距、对齐和响应式行为上拥有更大的控制力。基础的全宽堆叠按钮div classd-grid gap-2 button classbtn btn-primary typebuttonButton/button button classbtn btn-primary typebuttonButton/button /div响应式变体按钮在md断点以下垂直堆叠在md断点及以上用.d-md-block替换.d-grid从而抵消gap-2工具类使按钮变为水平排布div classd-grid gap-2 d-md-block button classbtn btn-primary typebuttonButton/button button classbtn btn-primary typebuttonButton/button /div调整块按钮宽度配合网格列宽工具类。例如做一个半宽块按钮用.col-6再用.mx-auto水平居中div classd-grid gap-2 col-6 mx-auto button classbtn btn-primary typebuttonButton/button button classbtn btn-primary typebuttonButton/button /div更多工具类可微调水平排列时的对齐下面的示例在之前响应式示例基础上叠加 flex 工具类与 margin 工具类让按钮在不再堆叠时右对齐div classd-grid gap-2 d-md-flex justify-content-md-end button classbtn btn-primary me-md-2 typebuttonButton/button button classbtn btn-primary typebuttonButton/button /divButton plugin开关toggle按钮插件按钮插件允许你创建简单的开/关切换按钮。官方文档特别指出视觉上这些 toggle 按钮与 复选框切换按钮checkbox toggle buttons完全一致但二者在辅助技术上传达的信息不同复选框切换按钮会被屏幕阅读器播报为已勾选/未勾选因为其本质仍是 checkbox而插件 toggle 按钮会被播报为按钮/按钮已按下。选择哪种方案取决于你的切换场景对用户以复选框还是实际按钮播报更有意义。Toggle states给按钮添加data-bs-togglebutton即可切换其active状态。如果按钮需要预置为激活态必须手动同时添加.active类和aria-pressedtrue以确保辅助技术能正确传达状态p classd-inline-flex gap-1 button typebutton classbtn>p classd-inline-flex gap-1 a href# classbtn rolebutton>EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event { event.preventDefault() const button event.target.closest(SELECTOR_DATA_TOGGLE) const data Button.getOrCreateInstance(button) data.toggle() })核心的toggle()方法只有几行它切换active类并同步aria-pressed属性为切换后的布尔值js/src/button.jstoggle() { // Toggle class and sync the aria-pressed attribute with the return value of the .toggle() method this._element.setAttribute(aria-pressed, this._element.classList.toggle(CLASS_NAME_ACTIVE)) }Methods你可以通过按钮构造函数创建按钮实例const bsButton new bootstrap.Button(#myButton)插件提供以下方法详见 js/src/button.js方法描述dispose销毁元素的按钮实例移除 DOM 元素上存储的数据getInstance静态方法获取与 DOM 元素关联的按钮实例用法bootstrap.Button.getInstance(element)getOrCreateInstance静态方法返回与 DOM 元素关联的按钮实例若未初始化则创建一个新实例用法bootstrap.Button.getOrCreateInstance(element)toggle切换按压状态让按钮呈现已被激活的外观例如批量切换页面上所有按钮document.querySelectorAll(.btn).forEach(buttonElement { const button bootstrap.Button.getOrCreateInstance(buttonElement) button.toggle() })插件同样通过defineJQueryPlugin(Button)注册了 jQuery 接口若项目同时引入 jQuery并支持data-toggle风格的调用见 js/src/button.js。CSS变量、Sass 变量、混入与循环CSS 变量自 5.2.0 引入作为 Bootstrap 持续演进 CSS 变量方案的一部分按钮现在使用.btn上的局部 CSS 变量实现实时定制。这些 CSS 变量的值由 Sass 设置因此 Sass 定制依然可用。.btn上声明的整套变量见上文Base class一节的源码片段。每个.btn-*修饰类都会更新对应的 CSS 变量从而以最少的 CSS 规则实现样式差异——这得益于button-variant()、button-outline-variant()和button-size()三个混入。以下是官方文档演示的、构建自定义.btn-*修饰类的完整示例完整定义见 site/assets/scss/_buttons.scss.btn-bd-primary { --bs-btn-font-weight: 600; --bs-btn-color: var(--bs-white); --bs-btn-bg: var(--bd-violet-bg); --bs-btn-border-color: var(--bd-violet-bg); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)}; --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)}; --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); --bs-btn-active-color: var(--bs-btn-hover-color); --bs-btn-active-bg: #{shade-color($bd-violet, 20%)}; --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)}; }使用它时只需button typebutton classbtn btn-bd-primaryCustom button/button这种重写 CSS 变量的定制方式不需要任何额外样式规则hover、active、focus 等状态全部自动生效。Sass 变量按钮相关的全部 Sass 变量集中在 scss/_variables.scss 的btn-variables代码块中要点如下变量默认值说明$btn-colorvar(--#{$prefix}body-color)按钮文字颜色$btn-padding-y/$btn-padding-x继承自$input-btn-*基础内边距BOOTSTRA.386 中$input-btn-padding-y/x均为0$btn-font-size/$btn-font-weight$input-btn-font-size/$font-weight-normal字号与字重$btn-white-spacenull设为nowrap可禁用文本换行$btn-border-width/$btn-border-radius$input-btn-border-width/var(--#{$prefix}border-radius)边框与圆角$btn-disabled-opacity.65禁用态透明度$btn-box-shadowinset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075)基础阴影$btn-active-box-shadowinset 0 3px 5px rgba($black, .125)激活态阴影$btn-link-color/$btn-link-hover-color/$btn-link-disabled-color链接相关变量Link 变体的三态颜色$btn-hover-bg-shade-amount15%hover 背景加深比例$btn-hover-border-shade-amount20%hover 边框加深比例$btn-active-bg-shade-amount/$btn-active-border-shade-amount20%/25%激活态加深比例$btn-hover-bg-tint-amount/$btn-active-bg-tint-amount15%/20%hover/active 提亮比例值得注意的 BOOTSTRA.386 特色在 scss/_variables.scss 中$input-btn-padding-y与$input-btn-padding-x被设为0这与 Bootstrap 官方的默认值不同——它服务于主题扁平、紧凑的 DOS 复古视觉风格。Sass 混入按钮相关共有三个混入全部定义在 scss/mixins/_buttons.scssbutton-variant()L7-L35实心变体混入基于$theme-colors生成.btn-*。它只负责写 CSS 变量——包括--bs-btn-color、--bs-btn-bg、--bs-btn-border-color以及 hover/active/disabled 全套状态变量hover/active 背景默认通过color-contrast()判断前景色后选择shade-color()或tint-color()生成。button-outline-variant()L38-L61描边变体混入用于.btn-outline-*额外设置--#{$prefix}gradient: none以去除渐变背景。button-size()L63-L69尺寸混入只写padding、font-size经 RFS与border-radius三个 CSS 变量供.btn-lg/.btn-sm及自定义尺寸复用。Sass 循环常规与描边两种按钮变体分别在 scss/_buttons.scss 的btn-variant-loops代码块中用各自对应的混入配合$theme-colorsmap 批量生成修饰类。这样当你在自己的主题中向$theme-colors增删颜色时.btn-*与.btn-outline-*会同步生成或消失无需手工维护。小结与进一步阅读BOOTSTRA.386 v5 的按钮组件完整继承了 Bootstrap 5.3 的设计体系.btn基础类 CSS 变量定制、$theme-colors驱动的变体与描边变体、.btn-lg/.btn-sm尺寸、禁用态的无障碍规范、工具类组合的块按钮布局以及基于 Data API 的 toggle 插件。理解 scss/_buttons.scss、scss/mixins/_buttons.scss 与 js/src/button.js 三份源码是你在复古 DOS 主题下定制按钮的最短路径。相关文档可继续深入按钮组 button-group按钮的水平分组与工具栏用法复选框与单选按钮切换toggle buttons与按钮插件视觉一致但语义不同的表单切换按钮项目根目录 README.md了解 BOOTSTRA.386 各版本概况与全局_386配置。赞分享前端UI组件【免费下载链接】BOOTSTRA.386A vintage 1980s DOS inspired Twitter Bootstrap theme项目地址https://gitcode.com/gh_mirrors/bo/BOOTSTRA.386点击查看免费下载相关推荐BOOTSTRA.386 主题定制指南用 Sass 变量、Map 与函数深度改造 Bootstrap 4 的 DOS 复古主题BOOTSTRA.386 主题定制指南用 Sass 变量、Map 与函数深度改造 Bootstrap 4 的 DOS 复古主题 BOOTSTRA.386 是一前端UI组件Varlet Button 按钮组件完全指南五种形态、加载与异步状态、按钮组模式与主题定制Varlet Button 按钮组件完全指南五种形态、加载与异步状态、按钮组模式与主题定制 本指南以 VarletMaterial Design 2/3 风UI组件前端上一篇抖音视频批量下载指南10 分钟从链接到无水印归档下一篇MPh让 60 组参数表从手动点按变成一段 Python 脚本创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
