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> 

Nach dem Login kopieren

2. Mehrere Tastengruppen
Fügen Sie mehrere

in

ein.

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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> 

Nach dem Login kopieren

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> 

Nach dem Login kopieren

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> 

Nach dem Login kopieren

3. JavaScript

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

Code kopieren Der Code lautet wie folgt:

Ladezustand