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

in

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:

Ladezustand

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

Code kopieren Der Code lautet wie folgt:

Single Toggle

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.
… 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")

...

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.