Bootstrap5 状态按钮

在上一节中，您已经了解了 Bootstrap 按钮样式和修改ootstrap5-button)以及如何创建按钮组和工具栏。 使用 Bootstrap，您可以使用按钮执行更多操作，例如控制按钮的状态、使复选框和单选输入的行为类似于切换按钮等。 在下一节中，我们将详细讨论它们。

创建单个切换按钮

我们可以通过简单地添加数据属性 data-bs-toggle="button" 在单个按钮上激活切换（即将按钮的正常状态更改为按下状态，反之亦然）。

如果您要预先切换按钮，则必须手动添加 .active 类。

<button type="button" class="btn btn-outline-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-outline-primary active" data-bs-toggle="button" autocomplete="off">Active toggle button</button>
<button type="button" class="btn btn-outline-primary" data-bs-toggle="button" autocomplete="off" disabled>Disabled toggle button</button>

尝试一下

上面示例结果如下所示

注意 ：Mozilla Firefox 浏览器在页面加载时保持按钮状态，为了防止这种行为，您可以简单地在包含按钮的表单上设置属性 autocomplete="off"，或者直接设置到输入或按钮元素。

创建复选框按钮组

您还可以组合复选框以在按钮组上创建复选框样式切换。 让我们尝试以下示例来了解它的基本工作原理：

<div class="btn-group">
    <input type="checkbox" class="btn-check" name="options" id="check1" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="check1">Checkbox 1</label>
    
    <input type="checkbox" class="btn-check" name="options" id="check2" autocomplete="off">
    <label class="btn btn-outline-primary" for="check2">Checkbox 2</label>
    
    <input type="checkbox" class="btn-check" name="options" id="check3" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="check3">Checkbox 3</label>
</div>

尝试一下

上面示例结果如下所示

**注意**：不要使用 .active 类来预选按钮组中的复选框或单选框，因为它只会改变视觉外观，使它们看起来像被选中。 要实际预选它们，您需要自己在 input 元素上应用 checked 属性。

创建单选按钮组

同样，我们可以在按钮组上创建单选按钮样式，如下所示：

<div class="btn-group">
    <input type="radio" class="btn-check" name="options" id="radio1" autocomplete="off">
    <label class="btn btn-outline-primary" for="radio1">Radio 1</label>

    <input type="radio" class="btn-check" name="options" id="radio2" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="radio2">Radio 2</label>

    <input type="radio" class="btn-check" name="options" id="radio3" autocomplete="off">
    <label class="btn btn-outline-primary" for="radio3">Radio 3</label>
</div>

尝试一下

上面示例结果如下所示