bootstrap - stateful buttons

2024年2月28日 184次阅读 来源: 1000copy

按钮一般用来执行操作，但是也可以设置状态。

状态按钮

单一的按钮可以通过data-toggle=”button”设置切换状态：

<button type="button" class="btn" data-toggle="button">Button</button>

点击一次，按钮切换一次状态，外观因此不同。

或者点击一次显示loading，然后切换回原来的标题。只要加入html：

<button type="button" class="btn" data-loading-text="Loading...">button</button>

和代码：

$(function() { 
    $(".btn").click(function(){
        $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
            $(this).dequeue();
        });        
    });
});

多选式按钮组

通过属性data-toggle=”buttons”可以把几个checkbox构成一个组合，可以设置可以多选的按钮组：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="checkbox" name="options"> Option 1
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options"> Option 2
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options"> Option 3
    </label>
</div>

单选式按钮组

通过属性data-toggle=”buttons”可以把几个radio构成一个组合，可以设置可以单选的按钮组：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options"> Option 1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options"> Option 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options"> Option 3
    </label>
</div>
    原文作者：1000copy
    原文地址: https://segmentfault.com/a/1190000006831168
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞