bootstrap_ref_js_button

Bootstrap JS 按钮

JS 按钮功能 (button.js)

Bootstrap 的 button 插件提供了对按钮状态更强的控制，例如切换激活状态或创建行为类似于复选框或单选按钮的按钮组。这些功能大部分可以通过数据属性（data attributes）实现。

有关按钮样式和按钮组的教程，请阅读我们的 Bootstrap 按钮教程。

按钮样式类（回顾）

这些类可用于对任何 <a>、<button> 或 <input type="button"> 元素进行样式设置：

Class 描述 示例 (概念)

.btn 按钮样式的基本类。 Try it

.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark 情境颜色类。.btn-secondary 是新的默认类似样式。 Try it

.btn-outline-primary, etc. 每种情境颜色的描边按钮样式。 Try it

.btn-link 使按钮看起来像链接，同时保留按钮的内边距和行为。 Try it

.btn-lg, .btn-sm 用于更大或更小按钮的尺寸修饰符。.btn-xs 在 Bootstrap 4+ 中已移除。 Try it

.btn-block (在 B5 中移除) 对于块级按钮，请使用网格列类或宽度工具类（.w-100）。 Try it

.active 为按钮应用激活（按下）外观。 Try it

.disabled, disabled attribute 使按钮看起来和表现为已禁用。在 <button> 元素上使用 disabled 属性。 Try it

使用数据属性切换状态

添加 data-bs-toggle="button" 以激活单个按钮上的切换功能。这将以编程方式切换按钮上的 .active 类和 aria-pressed 属性。

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">
  Toggle button
</button>

对于按钮组中类似于复选框或单选按钮的行为，您通常需要将按钮包裹在 div.btn-group 中，并在需要时使用 JavaScript 或更复杂的数据属性设置。请参阅主要的按钮和按钮组教程。

通过 JavaScript

您可以编程控制按钮状态：

// Get the button element
var myButtonElement = document.getElementById('myToggleButton');

// Create a Bootstrap Button instance if you need to call methods
var bsButton = new bootstrap.Button(myButtonElement);

// To toggle its state (if it has data-bs-toggle="button")
// bsButton.toggle(); // This method is available on the instance

然而，对于简单的切换，data-bs-toggle="button" 属性通常就足够了，无需自定义 JavaScript。

按钮选项

	Bootstrap 5 中的 button 组件主要使用数据属性来控制其行为。对于基本的切换功能，在实例化时没有特定的 JavaScript 选项可传递。

按钮方法

下表列出了 button 组件可用的 JavaScript 方法。

注意：旧的 jQuery 风格方法，例如 .button('loading') 或 .button('reset')，不是 Bootstrap 5 JavaScript API 的一部分。管理加载状态或更改文本需要手动进行 DOM 操作。

方法 描述 示例

toggle() 切换按下状态（active 类和 aria-pressed 属性）。假定按钮具有 data-bs-toggle="button"。 var bsButton = new bootstrap.Button(myButtonEl); bsButton.toggle();

dispose() 销毁按钮实例，移除事件监听器和数据。 var bsButton = new bootstrap.Button(myButtonEl); bsButton.dispose();

getInstance(element) 静态方法，获取与 DOM 元素关联的按钮实例。 var instance = bootstrap.Button.getInstance(myButtonEl);

getOrCreateInstance(element, [config]) 静态方法，获取一个按钮实例，如果不存在则创建一个新实例。 var instance = bootstrap.Button.getOrCreateInstance(myButtonEl);

要创建“加载”状态，通常需要禁用按钮并使用 JavaScript 手动更改其文本内容，例如：

var mySubmitButton = document.getElementById('submitBtn');
mySubmitButton.disabled = true;
mySubmitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...';