Comment créer un bouton basculant dans Bootstrap ?

Question

J'ai initialement créé une application web en HTML, CSS et JavaScript, puis on m'a demandé de la recréer en Bootstrap également. J'ai tout fait correctement, mais j'avais des boutons à bascule dans la web app qui sont redevenus des boutons radio (initialement des cases à cocher) au lieu des boutons à bascule que j'avais à l'origine.

Le code pour les boutons est ;

<label>Notifications<span class='toggle'><input type='radio' class='notifications' name='notifications' id='notifications' /></span></li>
<label>Preview<span class='toggle'><input type='radio' class='preview' name='preview' id='preview' /></span></li>

et les fichiers JavaScript et CSS auxquels la page HTML est liée le sont ;

<script src = 'jqtouch.js'></script>
<script src="jquery.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

Y a-t-il un moyen de modifier le code pour que je puisse récupérer le bouton de basculement ?

Si vous avez besoin d'un autre code, faites-le moi savoir, merci beaucoup par avance.

Answer 1

Je ne sais pas si cela peut vous aider, mais il existe un excellent site (non officiel). Le commutateur d'amorçage est disponible . Il utilise cependant des types de radio.

Mise à jour : vous pouvez désormais utiliser des boutons radio ou les cases à cocher comme des interrupteurs. A type a été ajouté depuis la V.1.8.

Answer 2

Si cela ne vous dérange pas de modifier votre code HTML, vous pouvez utiliser la fonction data-toggle l'attribut <button> s. Voir le Bascule simple section de les exemples de boutons :

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>

Answer 3

Bootstrap 3 offre la possibilité de créer des boutons à bascule basés sur des cases à cocher ou des boutons radio : http://getbootstrap.com/javascript/#buttons

Cases à cocher

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

Boutons radio

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

Pour qu'ils fonctionnent, vous devez initialiser .btn avec le Javascript de Bootstrap :

$('.btn').button();

Answer 4

En voici un que j'ai réalisé pour un projet récent : http://minhur.github.io/bootstrap-toggle/

Answer 5

J'ai essayé d'activer la classe "active" manuellement avec javascript. Ce n'est pas aussi utilisable qu'une bibliothèque complète, mais pour les cas simples, cela semble suffisant :

var button = $('#myToggleButton');
button.on('click', function () {
  $(this).toggleClass('active');
});

Si vous réfléchissez bien, la classe 'active' est utilisée par bootstrap lorsque le bouton est pressé, pas avant ou après (notre cas), il n'y a donc pas de conflit dans la réutilisation de la même classe.

Essayez cet exemple et dites-moi s'il échoue : http://jsbin.com/oYoSALI/1/edit?html,js,output