JSコンポーネントの詳細説明 ブートストラップボタングループとドロップダウンボタン_javascriptスキル

この記事では、まずボタン グループの使用方法について説明します。具体的な内容は次のとおりです。

1. ボタン グループ

1. 単一ボタン グループ
.btn-group を使用して、複数の を .btn でカプセル化します

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div> 

2. 複数のボタン グループ

に複数の

を入れます。

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div> 

3. 垂直ボタン グループ
.btn-group-vertical を .btn-group に追加します。

<div class="btn-group btn-group-vertical"> 
 ... 
</div> 

2. ボタンのドロップダウン

例

<div class="btn-group"> 
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
  action 
  <span class="caret"></span> 
 </a> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

1. サイズの制御
サイズを制御するには、.btn-large、.btn-small、および .btn-mini も使用します。

2. 分割ドロップダウン ボタン

<div class="btn-group"> 
 <button class="btn">action</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

3. 上向きに表示されるメニュー

<div class="btn-group dropup"> 
 <button class="btn">dropup</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

3. javascript

例
読み込みステータス。 data-loading-text="読み込み中..." を追加します。

コピーコード コードは次のとおりです。

状態読み込み中

スイッチのステータス。 data-toggle="button" を追加します。

コピーコード コードは次のとおりです。

single toggle

チェックボックス。 btn-group の後に data-toggle="buttons-checkbox" を追加します。

<div class="btn-group" data-toggle="buttons-checkbox"> 
 <button type="button" class="btn btn-primary">left</button> 
 <button type="button" class="btn btn-primary">middle</button> 
 <button type="button" class="btn btn-primary">right</button> 
</div> 

単一の選択肢。 btn-group の後に data-toggle="buttons-radio" を追加します。

<div class="btn-group" data-toggle="buttons-radio"> 
 <button type="button" class="btn btn-primary">left</button> 
 <button type="button" class="btn btn-primary">middle</button> 
 <button type="button" class="btn btn-primary">right</button> 
</div> 

使用法
javascript コードがスイッチ状態をトリガーします。
$().button("トグル")
data-toggle 属性を追加して、自動的にトリガーすることもできます。
…

javascript コードを使用して読み込み状態をトリガーすると、ボタンには data-loading-text 属性で指定された値が表示されます。

$().button("loading")

... 注: firefox は、ページの読み込み中、ボタンを無効のままにします。回避策は、ボタンに autocomplete="off" を適用することです。

javascript コードを使用してボタンの状態をリセットします。
$().button("reset")

ボタンの状態をリセットし、ボタンのテキストを指定されたテキストに変更します。次の例の complete は一例であり、置き換えることができます。

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

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。