Explication détaillée du groupe de boutons Bootstrap du composant JS et des compétences déroulantes button_javascript

Cet article vous expliquera d'abord comment utiliser le Groupe de boutons Le contenu spécifique est le suivant

1. Groupes de boutons

1. Groupe de boutons uniques
Utilisez .btn-group pour encapsuler plusieurs
avec .btn

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

Copier après la connexion

2. Plusieurs groupes de boutons
Placez plusieurs

dans

.

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

Copier après la connexion

3. Groupe de boutons verticaux
Ajoutez .btn-group-vertical à .btn-group.

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

Copier après la connexion

2. Listes déroulantes des boutons

Exemple

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

Copier après la connexion

1. Taille du contrôle
Utilisez également .btn-large, .btn-small et .btn-mini pour contrôler la taille.

2. Bouton déroulant Split

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

Copier après la connexion

3. Menu qui apparaît vers le haut

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

Copier après la connexion

3.JavaScript

Exemple
Statut de chargement. Ajoutez data-loading-text="Chargement...".

Copier le code Le code est le suivant :

État de chargement