Bootstrap 按钮
Bootstrap 5 按钮
Section titled “Bootstrap 5 按钮”按钮是用户交互的基石。Bootstrap 5 提供了一套多功能的按钮样式和尺寸，它们具有响应性和可访问性。
Bootstrap 提供了几种预定义的按钮样式，每种样式都传达了不同的[语义]（Semantic）目的：
[主要]（Primary）(btn-primary) [次要]（Secondary）(btn-secondary) [成功]（Success）(btn-success) [信息]（Info）(btn-info) [警告]（Warning）(btn-warning) [危险]（Danger）(btn-danger) [浅色]（Light）(btn-light) [深色]（Dark）(btn-dark) [链接]（Link）(btn-link)
要应用这些样式，请使用基础类 .btn 以及特定的样式类（例如，.btn-primary）。
- .btn-primary（用于主要操作）
- .btn-secondary（用于次要操作，取代了旧的 .btn-default）
- .btn-success（用于积极操作，例如保存或提交）
- .btn-info（用于信息性操作）
- .btn-warning（用于需要谨慎的操作）
- .btn-danger（用于破坏性操作，例如删除）
- .btn-light（浅色按钮）
- .btn-dark（深色按钮）
- .btn-link（使按钮看起来像链接）
以下示例显示了这些按钮样式的代码：
<div> <button type="button" class="btn btn-primary me-1 mb-1">Primary</button> <button type="button" class="btn btn-secondary me-1 mb-1">Secondary</button> <button type="button" class="btn btn-success me-1 mb-1">Success</button> <button type="button" class="btn btn-info me-1 mb-1">Info</button> <button type="button" class="btn btn-warning me-1 mb-1">Warning</button> <button type="button" class="btn btn-danger me-1 mb-1">Danger</button> <button type="button" class="btn btn-light me-1 mb-1">Light</button> <button type="button" class="btn btn-dark me-1 mb-1">Dark</button> <button type="button" class="btn btn-link me-1 mb-1">Link</button></div>
<!-- 提示：当显示多个按钮时，添加边距工具类，例如 me-1（末端边距）和 mb-1（底部边距）以进行间隔。 -->[轮廓按钮]（Outline Buttons）：Bootstrap 5 还包含轮廓按钮样式（例如，.btn-outline-primary）。这些按钮在鼠标悬停或获得焦点之前具有透明背景。
<div> <button type="button" class="btn btn-outline-primary me-1 mb-1">Primary Outline</button> <button type="button" class="btn btn-outline-secondary me-1 mb-1">Secondary Outline</button></div>按钮类可以使用在 <a>、<button> 或 <input type="button">（或 type="submit", type="reset"）元素上：
<div> <a class="btn btn-info me-1 mb-1" href="#" role="button">Link Button</a> <button class="btn btn-info me-1 mb-1" type="button">Button Element</button> <input class="btn btn-info me-1 mb-1" type="button" value="Input Button"> <input class="btn btn-info me-1 mb-1" type="submit" value="Submit Input"></div>
<!-- 可访问性说明：当使用 <a> 元素作为按钮时，始终包含 role="button" 属性，以便[辅助技术]（Assistive Technologies）了解其用途。 -->为什么链接按钮使用 href="#"？当 <a> 标签充当按钮但不导航到不同页面或部分时，href="#" 是一个常见的占位符。在 JavaScript 驱动的应用中，您可以使用 href="javascript:void(0);" 或者（更优选的方式）附加[事件监听器]（Event Listeners）并在必要时阻止默认导航。对于不需要导航的真正按钮功能，<button> 元素通常在语义上更正确。 |
|---|
应用场景：按钮用于表单提交、导航、触发操作（例如打开[模态框]（Modal））以及网页上的通用[行动号召]（Calls to Action）。
Bootstrap 提供了三种主要按钮尺寸：[大]（Large）、[默认]（Default）（中等）和[小]（Small）。旧版本中的超小尺寸（.btn-xs）已不再可用；请使用 .btn-sm 或自定义 CSS 来实现更小的按钮。
大 默认 小
定义不同尺寸的类是：
- .btn-lg（大按钮）
- 默认/中等按钮没有尺寸类
- .btn-sm（小按钮）
以下示例显示了不同按钮尺寸的代码：
<div> <button type="button" class="btn btn-primary btn-lg me-1 mb-1">Large button</button> <button type="button" class="btn btn-primary me-1 mb-1">Default button</button> <button type="button" class="btn btn-primary btn-sm me-1 mb-1">Small button</button></div>[块级按钮]（Block Level Buttons）（全宽）
Section titled “[块级按钮]（Block Level Buttons）（全宽）”要使按钮跨越其父元素的整个宽度，可以使用 Bootstrap 的[网格系统]（Grid System）或[显示工具类]（Display Utilities）。旧版的 .btn-block 类已被优先使用工具类的方法取代。
按钮 1（使用网格全宽） 按钮 2（使用 d-grid 全宽）
使用 .d-grid 工具类实现全宽按钮的示例：
<div class="d-grid gap-2"> <button class="btn btn-primary" type="button">Button 1 (Full width)</button> <button class="btn btn-secondary" type="button">Button 2 (Full width)</button></div>
<!-- 提示：d-grid 创建一个网格容器。如果存在多个块级按钮，gap-2 会在它们之间添加一个小的间隙。对于单个块级按钮，可以将 d-grid 应用于包装器，或者如果它是唯一需要全宽的子元素，则直接应用于按钮的父元素。 -->[激活/禁用]（Active/Disabled）按钮
Section titled “[激活/禁用]（Active/Disabled）按钮”按钮可以设置为[激活状态]（Active State）（看起来被按下）或[禁用状态]（Disabled State）（不可点击）。
主要激活 主要禁用
.active 类使按钮看起来被按下。disabled [属性]（Attribute）（用于 <button> 元素）或 .disabled [类]（Class）（用于 <a> 元素）使按钮不可点击且视觉上呈[静默]（Muted）状态。
<div> <button type="button" class="btn btn-primary active me-1 mb-1">Active Primary Button</button> <button type="button" class="btn btn-primary me-1 mb-1" disabled>Disabled Primary Button</button> <a href="#" class="btn btn-secondary disabled me-1 mb-1" tabindex="-1" role="button" aria-disabled="true">Disabled Secondary Link</a></div>
<!-- 关于禁用链接的注意事项：<a> 标签上的 .disabled 类仅提供视觉样式。如果 href 属性存在且处于激活状态，您可能需要 JavaScript 来阻止导航。tabindex="-1" 和 aria-disabled="true" 属性提高了禁用链接的可访问性。 -->有关所有按钮功能的完整指南，包括[按钮组]（Button Groups）和[切换状态]（Toggle States），请参阅 Bootstrap 5 官方文档：https://getbootstrap.com/docs/5.3/components/buttons/