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 bb9345e55eb71822850ff156dfde57c8
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 684627b214c81cfd3ae37c425ce03d42 dans efce18deda7b1499fa22da873b78ebdc.

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

6cf43015aa5ef521073ef0cee2e505bdÉtat de chargementcce482c2fcc38d1c9412c7edea96d6e9

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

Copier le code Le code est le suivant :

3a54dd58e4d5720f1ab9a08c7a2ebb9eBascule uniquecce482c2fcc38d1c9412c7edea96d6e9

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.
80de50797c035e4b05e5c13cbd950a75…65281c5ac262bf6d81768915a4a77ac0 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")

b60525618f0d2bb28a1e82cbbc5dc59f...65281c5ac262bf6d81768915a4a77ac0

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.