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> 

2. Plusieurs groupes de boutons
Placez plusieurs

dans

.

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

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

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

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> 

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> 

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> 

3.JavaScript

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

Copier le code Le code est le suivant :

État de chargement

Changer de statut. Ajoutez data-toggle="bouton".

Copier le code Le code est le suivant :

Bascule unique

Case à cocher. Ajoutez data-toggle="buttons-checkbox" après btn-group.

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

Choix unique. Ajoutez data-toggle="buttons-radio" après btn-group.

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

Utilisation
Le code JavaScript déclenche l'état du commutateur.
$().button("toggle")
Vous pouvez également ajouter l'attribut data-toggle pour un déclenchement automatique.
… Utilisez le code JavaScript pour déclencher l'état de chargement et le bouton affiche la valeur spécifiée par l'attribut data-loading-text.

$().button("chargement")

...

Remarque : Firefox gardera le bouton désactivé pendant le chargement de la page. La solution de contournement consiste à appliquer autocomplete="off" sur le bouton.
Réinitialiser l'état du bouton à l'aide du code JavaScript.

$().button("reset")
Réinitialisez l'état du bouton et remplacez le texte du bouton par le texte spécifié. Le complet dans l'exemple suivant n'est qu'un exemple et peut être remplacé.

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.