Bootstrap 按钮

最后更新于：2022-03-26 23:05:13

Bootstrap Button（按钮）

描述

Bootstrap Button（按钮）JavaScript 插件允许您加强按钮的功能。您可以控制按钮的状态，也可以为组件创建按钮组，比如工具条。

什么是必需的

您必须引用 jquery.js 和 bootstrap-button.js – 这两个 JavaScript 文件。它们都位于 docs/assets/js 文件夹内。

如何使用它

您可以不编写任何 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>
<!–Except     ‘Control state’, other buttons require only jquery.js and bootstrap-button.js JavaScript files–>
<script type=”text/javascript” src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js”></script>
<script src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/assets/js/bootstrap-transition.js”></script>
<script src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js”></script>
<script src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js”></script>
<script src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js”></script>
<script src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js”></script>
<script src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js”></script>
<script src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js”></script>
<script src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js”></script>
<script src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js”></script>
<script src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js”></script>
<script src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js”></script>
<script src=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js”></script>

在线查看实例

通过 javascript 启用按钮

如需通过 JavaScript 启用按钮，请使用下面的 JavaScript 代码，其中 ‘ .nav-tabs ‘ 是包含按钮的 div 的 class。

$('.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>

点击这里，下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。