Bootstrap框架学习(五）——Bootstrap插件设计之按钮

五、Bootstrap插件设计

6、Bootstrap按钮（Button）插件

    Bootstrap框架按钮，包括状态按钮、复选按钮和单选按钮等。

    状态按钮    

    点击后按钮状态将会自动改变，通过JS代码可以实现按钮状态的重置。

<div class="bs-example">
    <button type="button" id="loading-example-btn" data-loading-text="加载中..." class="btn btn-primary" autocomplete="off">
        测试状态按钮
    </button>
    <span id="id-span-info"></span>
</div><!-- /example -->
<script type="text/javascript">
    $('#loading-example-btn').on('click', function () {
        var $btn = $(this).button('loading');
        // business logic...
        $btn.button('reset');
        $('#id-span-info').html('already reset.');
    });
</script>

   单选按钮

    Bootstrap框架提供了自定义风格的单选按钮，主要通过将<input>标签定义为radio类来实现。

<div class="bs-example">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="radio" name="options" id="option1" autocomplete="off" checked>单选按钮1 (checked)
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="option2" autocomplete="off">单选按钮2
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="option3" autocomplete="off">单选按钮3
        </label>
    </div>
</div><!-- /example -->

    复选按钮

    Bootstrap框架提供了自定义风格的复选按钮，主要通过将<input>标签定义为checkbox类来实现。

<div class="bs-example">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="checkbox" checked autocomplete="off">复选按钮1 (checked)
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off">复选按钮2
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off">复选按钮3
        </label>
    </div>
</div><!-- /example -->