Bootstrap Button（按钮）

描述

Bootstrap Button（ボタン）JavaScript プラグインを使用すると、ボタンの機能を強化できます。ボタンの状態を制御したり、コンポーネントのボタングループ（ツールバーなど）を作成したりできます。

必須のものは何ですか

jquery.js と bootstrap-button.js の2つの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>

<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/assets/js/bootstrap-transition.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js.html"></script>

オンラインでサンプルを見る

JavaScript でボタンを有効にする

JavaScript でボタンを有効にするには、以下の JavaScript コードを使用してください。ここで、' .nav-tabs ' はボタンを含む div のクラスです。

$('.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および画像ファイルをダウンロードしてください。

其他扩展