Ausführliche Erläuterung der Bootstrap-Schaltflächengruppe und der Dropdown-Button_Javascript-Fähigkeiten der JS-Komponente

In diesem Artikel erfahren Sie zunächst, wie Sie die Button-Gruppe verwenden. Der spezifische Inhalt ist wie folgt

1. Schaltflächengruppen

1. Einzeltastengruppe
Verwenden Sie .btn-group, um mehrere bb9345e55eb71822850ff156dfde57c8
mit .btn zu kapseln

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

2. Mehrere Tastengruppen
Fügen Sie mehrere 684627b214c81cfd3ae37c425ce03d42 in efce18deda7b1499fa22da873b78ebdc ein.

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

3. Vertikale Tastengruppe
Fügen Sie .btn-group-vertical zu .btn-group hinzu.

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

2. Schaltflächen-Dropdowns

Beispiel

<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. Kontrollgröße
Verwenden Sie auch .btn-large, .btn-small und .btn-mini, um die Größe zu steuern.

2. Dropdown-Schaltfläche „Teilen“

<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. Menü, das nach oben erscheint

<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

Beispiel
Ladestatus. Fügen Sie data-loading-text="Loading..." hinzu.

Code kopieren Der Code lautet wie folgt:

9f64b82607846bfa2b3a52749a92b489Ladezustand65281c5ac262bf6d81768915a4a77ac0

Status wechseln. Fügen Sie data-toggle="button" hinzu.

Code kopieren Der Code lautet wie folgt:

cdb79c501104136df062df1ef56efd9cSingle Toggle65281c5ac262bf6d81768915a4a77ac0

Kontrollkästchen. Fügen Sie data-toggle="buttons-checkbox" nach btn-group hinzu.

<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> 

Einzelauswahl. Fügen Sie data-toggle="buttons-radio" nach btn-group hinzu.

<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> 

Nutzung
JavaScript-Code löst den Schaltzustand aus.
$().button("toggle")
Sie können auch das Datenumschaltattribut hinzufügen, um es automatisch auszulösen.
80de50797c035e4b05e5c13cbd950a75…65281c5ac262bf6d81768915a4a77ac0 Verwenden Sie JavaScript-Code, um den Ladezustand auszulösen, und die Schaltfläche zeigt den durch das Attribut data-loading-text angegebenen Wert an.

$().button("loading")

cf8abd368a2a023f5909892da2d92c6d...65281c5ac262bf6d81768915a4a77ac0

Hinweis: Firefox lässt die Schaltfläche deaktiviert, während die Seite geladen wird. Die Problemumgehung besteht darin, autocomplete="off" auf die Schaltfläche anzuwenden.
Schaltflächenstatus mithilfe von JavaScript-Code zurücksetzen.

$().button("reset")
Setzen Sie den Schaltflächenstatus zurück und ändern Sie den Schaltflächentext in den angegebenen Text. Das Complete im folgenden Beispiel ist nur ein Beispiel und kann ersetzt werden.

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.