この記事では、まずボタングループの使用方法を共有します。特定のコンテンツは次のとおりです
1。ボタングループ
1。シングルボタングループ
.btn-groupを使用して、.btnを使用して複数の<ボタン>をカプセル化します
<div> <butth> 1 </button> <butth> 2 </button> <butth> 3 </button> </div>
2。複数のボタングループ
複数の<div>を<div>に入れます。
<div> <div> ... </div> <div> ... </div> </div> </div>
3。垂直ボタングループ
.btn-group-verticalを.btn-groupに追加します。
<div> ... </div>
2。プルダウンボタン（ボタンドロップダウン）
例
<div> <a data-toggle = "dropdown" href = "＃"> action <span> </span> </a> <ul> <！ - ドロップダウンメニューリンク - > </ul> </div>
1。サイズを制御します
また、.btn-large、.btn-small、および.btn-miniを使用してサイズを制御します。
2。プルダウンボタンを分割します
<div> <butth> action </button> <button data-toggle = "ドロップダウン"> <span> </span> </button> <ul> <！ - ドロップダウンメニューリンク - > </ul> </div>
3.上に表示されるメニュー
<div> <butth> dropup </button> <ボタンデータトグル= "ドロップダウン"> <span> </span> </button> <ul> <！ - ドロップダウンメニューリンク - > </ul> </div>
3。JavaScript
例
読み込みステータス。 Data-loading-text = "Loading ..."を追加します。
コードを次のようにコピーします。<ボタンタイプ= "ボタン" data-loading-text = "loading ..."> loading state </button>
スイッチステータス。 Data-Toggle = "ボタン"を追加します。
次のようにコードをコピーします。<ボタンタイプ= "ボタン" data-toggle = "button">シングルトグル</button>
チェックボックス。 btn-groupの後にdata-toggle = "bottons-checkbox"を追加します。
<div data-toggle = "bottons-checkbox"> <button type = "button"> left </button> <button type = "button"> middle </button> <button type = "button"> right </button> </div>
単一の選択。 btn-groupの後にdata-toggle = "bottons-radio"を追加します。
<div data-toggle = "bottons-radio"> <button type = "button"> left </button> <button type = "button"> middle </button> <button type = "button"> right </button> </div>
使用法
JavaScriptコードはスイッチステータスをトリガーします。
$（）。ボタン（ "トグル"）
Data-Toggle属性を自動的にトリガーすることもできます。
<ボタンタイプ= "button" data-toggle = "button">…</button>
JavaScriptコードを使用してロード状態をトリガーすると、ボタンにデータロードテキストプロパティによって指定された値が表示されます。
$（）。ボタン（ "読み込み"）
<button type = "button" data-loading-text = "ロードスタッフ..."> ... </button>
注：Firefoxは、ページが読み込まれたときにボタンを無効に保ちます。回避策は、ボタンにAutoComplete = "Off"を適用することです。
JavaScriptコードを使用してボタンステータスをリセットします。
$（）。ボタン（ "リセット"）
ボタンステータスをリセットし、ボタンテキストを指定されたテキストに変換します。次の例の完全なものは例のみであり、置き換えることができます。
<ボタンData-Complete-Text = "finite！" > ... </button> <script> $（ '。btn'）。ボタン（ 'complete'）</script>
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。