ブートストラップボタン（ボタン）ウィジェット
中ボタン（ボタン） ブートストラップボタン章で紹介。 ボタン（ボタン）プラグインは、あなたはいくつかのような、インタラクティブなコントロールボタンの状態を追加したり、（ツールバーなど）の他のコンポーネントのためのボタンのグループを作成することができます。
あなたは、個々のプラグイン機能を参照したい場合は、button.jsを参照する必要があります。 または、 ブートストラッププラグインの概要章で述べたように、あなたはbootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照することができます。
負荷状態
ボタンの負荷状態に追加するには、単に「ロードボタン要素のデータローディング・テキスト=を追加...」そのプロパティとして缶、次の例のように：
例
<ボタン ID = "脂肪BTN」 クラス = "BTNのBTN-プライマリ」 データ・ローディング・テキスト= "読み込み中 ..."
タイプ = "ボタン"> の読み込み状態 </ button>の
<スクリプト> $（関数（） {$（ "。BTN」）。クリックします（関数（）{$（この）.button（ 'ロード'）。ディレイ（1000）.queue（関数（）{// $（ この）.button（）「リセット」 ;}）;}）;}）; </ script>の
»をお試しください
結果は以下の通りであります：
単一スイッチ
シングルボタンスイッチを有効にするには、単にデータトグル= "ボタン"その特性として、ボタンの要素を追加する（すなわち、ボタンの通常の状態は状態およびその逆を押された変更）することができ、次の例のように：
結果は以下の通りであります：
チェックボックス（チェックボックス）
あなたがチェックボックスグループを作成し、スイッチボックスのグループを追加するには、BTN-グループは = "ボタン"にデータ属性データトグルを追加することによってできます。
例
<DIV クラス = "BTN-グループ」 データトグル = "ボタン">
<ラベル クラス= "BTNのBTN-プライマリ」 >
<入力 = "チェックボックスを">を入力 オプション1 </ label>は
<ラベル クラス= "BTNのBTN-プライマリ」 >
<入力 = "チェックボックスを">を入力 オプション2 </ label>は
<ラベル クラス= "BTNのBTN-プライマリ」 >
<入力 = "チェックボックスを">を入力 オプション3 </ label>は
</ DIV>
»をお試しください
結果は以下の通りであります：
ラジオボタン（ラジオ）
同様に、あなたはラジオ・グループを作成し、ラジオボタングループを切り替えるには、BTN-グループを追加するために、データ属性データトグル= "ボタン"を追加することによってできます。
例
<DIV クラス = "BTN-グループ」 データトグル = "ボタン">
<ラベル クラス= "BTNのBTN-プライマリ」 >
<入力 タイプ = "ラジオ" 名前 = "オプション" ID = "オプション1"> オプション1 </ label>は
<ラベル クラス= "BTNのBTN-プライマリ」 >
<入力 タイプ = "ラジオ" 名前 = "オプション" ID = "オプション2"> オプション2 </ label>は
<ラベル クラス= "BTNのBTN-プライマリ」 >
<入力 タイプ = "ラジオ" 名前 = "オプション" ID = "オプション3"> オプション3 </ label>は
</ DIV>
»をお試しください
結果は以下の通りであります：
使用法
あなたは次のように、JavaScriptを介して接続ボタン（ボタン）を有効にすることができます。
$（ '。BTN'）。ボタン（）
オプション
オプションはありません。
ウェイ
次のボタン（ボタン）のいくつかであるプラグインの便利な方法：
| 方法 | 描述 | 实例 |
|---|---|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 |
$().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 |
$().button(string) |
例
次の例では、上記の方法の使用を示しています。
例
<H2> メソッド </ H2> の効果を確認するために、各ボタンをクリックしてください
<H4> デモ.button（ 'トグル'）メソッド </ H4>
<DIV ID = "myButtons1" クラス = "BS-例">
<ボタン = "ボタン"を入力 クラス= "BTN BTN-プライマリ」 > 元 </ button>の
</ DIV>
<H4> デモ.button（ 'ロード'）メソッド </ H4>
<DIV ID = "myButtons2" クラス = "BS-例">
<ボタン = "ボタン"を入力 クラス = "BTNのBTN-プライマリ」
データ・ローディング・テキスト= "読み込み中 ..."> 元 </ button>の
</ DIV>
<H4> デモ.button（「リセット」）メソッド </ H4>
<DIV ID = "myButtons3" クラス = "BS-例">
<ボタン = "ボタン"を入力 クラス = "BTNのBTN-プライマリ」
データ・ローディング・テキスト= "読み込み中 ..."> 元 </ button>の
</ DIV>
<H4> デモ.button（文字列）メソッド </ H4>
<ボタン = "ボタン"を入力 クラス = "BTNのBTN-プライマリ」 ID = "myButton4"
データの完全なテキスト=「ロードが終わっ"> I </ button>の クリック
<スクリプト>
$（ファンクション （） {$（ "＃MyButtons1 .btn」 ）をクリックします（関数（）{$（この）ボタン（ 'トグル'）;.}）;.}）; $（関数（） {$（ "＃MyButtons2 .btn」 ）。（関数（）{$（this）をクリックしてください。ボタン（「ロード」）。ディレイ（1000）。キュー（関数（） {
}）;}）;}） ; $（関数（） {$（ "＃MyButtons3 .btn」 ）。（関数（）{$（this）をクリックしてください。ボタン（「ロード」）。ディレイ（1000）。キュー（関数（） {$（この）ボタン（ 'リセット'）;.}）;}）;}）; $（関数（） {$（ "＃MyButton4」） 。クリックします（関数（）{$（この）。ボタン（「ロード」）。ディレイ（1000）。キュー（関数（） {。$（（この）ボタン '完全'）;}）;}）;}）;
</スクリプト>
»をお試しください
結果は以下の通りであります：
