Bootstrap 2 Button（按钮） - Bootstrap 2 基础教程

Bootstrap Button（按钮）JavaScript 插件加强了按钮的功能

我们可以控制按钮的状态，也可以为组件创建按钮组，比如工具条

什么是必需的

必须引入 jquery.js 和 bootstrap.min.js

<script src="/static/lib/bootstrap/2.3.2/docs/assets/js/jquery.js"></script>
<script src="/static/lib/bootstrap/2.3.2/docs/assets/js/bootstrap.min.js"></script>

如何使用它

我们可以不编写任何 JavaScript 只通过标记使用该插件，也可以通过 JavaScript 启用按钮

范例

下面这个范例演示了如何不通过 JavaScript 使用按钮插件

<div class="container">
    <div class="row">
        <div class="span8">
            <h2>Bootstrap 按钮 JavaScript 插件实例</h2>
            <h3>控制状态</h3>
            <p><button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">Loading State</button></p>
            <h3>单项切换</h3>
            <p><button class="btn btn-primary" data-toggle="button">Single Toggle</button></p>
            <h3>确认框</h3>
            <p><div class="btn-group" data-toggle="buttons-checkbox">
                <button class="btn btn-primary">Left</button>
                <button class="btn btn-primary">Middle</button>
                <button class="btn btn-primary">Right</button>
            </div></p>
            <h3>单选框</h3>
            <p><div class="btn-group" data-toggle="buttons-radio">
                <button class="btn btn-primary">Left</button>
                <button class="btn btn-primary">Middle</button>
                <button class="btn btn-primary">Right</button>
            </div></p>
        </div>
    </div>
</div>
<script src="/static/lib/bootstrap/2.3.2/docs/assets/js/jquery.js"></script>
<script src="/static/lib/bootstrap/2.3.2/docs/assets/js/bootstrap.min.js"></script>

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 collapse demo

通过 javascript 启用按钮

如果想要通过 JavaScript 启用按钮，可以使用下面的 JavaScript 代码

其中 .nav-tabs 是包含按钮的 div 的 CSS 类

$('.nav-tabs').button()

方法

该插件有一些方法

接下来我们通过用法代码进行讨论

$().button('toggle')
```
<button class="btn" data-toggle="button" >…</button>
```
该方法切换按钮状态

赋予按钮被激活时的状态和外观

使用 'data-toggle="button"' 自动切换按钮为激活状态
$().button('loading')
```
<button class="btn" data-loading-text="loading stuff..." >...</button>
```
该方法设置按钮状态为 loading - 即将按钮置为禁用状态并将文字内容切换为 loading

通过使用 'data-loading-text' 属性可以在按钮元素上定义 loading 文本

但在 Firefox 浏览器上，在页面加载之后，禁用状态不会自动解除，此时需要使用 'autocomplete="off"' 来避免这个问题
$().button('reset')

该方法重置按钮状态，并将按钮上的文本还原为原始值

$().button(string)

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

该方法重置按钮状态，并将按钮上的文本重置为传入的值

<button class="btn" data-complete-text="finished!" >...</button>
<script>
    $('.btn').button('complete')
</script>