Bootstrap 状态按钮
在本教程中，您将学习如何使用 Bootstrap 创建切换按钮。
控制按钮状态
在上一节中，您了解了 Bootstrap 按钮样式和修改 以及如何创建 按钮组和工具栏。 使用 Bootstrap，您可以使用按钮执行更多操作，例如控制按钮的状态、使复选框和单选输入的行为类似于切换按钮等等。 在下一节中，我们将详细讨论它们。
创建单个切换按钮
您可以通过简单地添加数据属性 data-toggle="button" 在单个按钮上激活切换（即，将按钮的正常状态更改为按下状态，反之亦然）。
<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">Single Toggle Button</button>— 单击时的切换按钮将如下所示：
注意： Mozilla Firefox 浏览器会在页面加载时保持按钮状态，为了防止这种行为，您可以简单地在包含按钮的表单上设置属性 autocomplete="off" ，或直接到输入或按钮元素。
创建按钮复选框
您可以将属性 data-toggle="buttons" 添加到一组复选框，以在按钮组上切换复选框样式。 如果您希望默认情况下预先检查选项，您还可以在输入的 <label> 上添加类 .active。 试试下面的例子，看看它是如何工作的：
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" name="options" autocomplete="off" checked> Option A
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" autocomplete="off"> Option B
</label>
<label class="btn btn-primary active">
<input type="checkbox" name="options" autocomplete="off" checked> Option C
</label>
</div>— 上面示例的输出将如下所示：
注意： .active 类只会改变单选按钮和复选框的视觉外观，使它们看起来像是被选中的。 要实际预选它们，您需要自己在输入元素上应用 checked 属性。
创建按钮单选
同样，您可以将属性 data-toggle="buttons" 添加到一组单选输入中，以便在按钮组上切换单选按钮样式，如下例所示：
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" autocomplete="off"> Option A
</label>
<label class="btn btn-primary active">
<input type="radio" name="options" autocomplete="off" checked> Option B
</label>
<label class="btn btn-primary">
<input type="radio" name="options" autocomplete="off"> Option C
</label>
</div>— 上面示例的输出将如下所示：
方法
这些是标准 Bootstrap 程序的按钮方法：
$().button('toggle')
此方法切换按钮的按下状态。 它改变了按钮的外观，使它看起来像是被激活了。 您还可以通过简单地使用 data-toggle 属性来启用按钮的自动切换。 我们来看下面的例子：
<script>
$(document).ready(function(){
$("#myButton").click(function(){
$(this).button('toggle');
});
});
</script>Advertisements