J'ai initialement créé une application Web en HTML, CSS et JavaScript, puis on m'a demandé de la créer à nouveau dans Bootstrap. J'ai tout fait très bien, mais j'avais des boutons à bascule dans l'application Web qui sont revenus à des boutons radio (case à cocher à l'origine) au lieu des boutons à bascule que j'avais à l'origine.

Le code des 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 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">

Existe-t-il un moyen de modifier le code afin que je puisse récupérer le bouton bascule?

Réponse initiale de 2013

Un excellent commutateur Bootstrap (non officiel) est disponible .

<input type="checkbox" name="my-checkbox" checked>
$("[name='my-checkbox']").bootstrapSwitch();

Il utilise des types de radio ou des cases à cocher comme commutateurs. Un typeattribut a été ajouté depuis V.1.8.

Le code source est disponible sur Github .

Note de 2018

Je ne recommanderais pas d'utiliser ce type d'anciens boutons Switch maintenant, car ils semblaient toujours souffrir de problèmes d'utilisation, comme l'ont souligné de nombreuses personnes.

Veuillez envisager de jeter un œil aux commutateurs modernes comme celui-ci à partir du framework React Component (non liés à Bootstrap, mais peuvent être intégrés dans la grille Bootstrap et l'interface utilisateur).

D'autres implémentations existent pour Angular, View ou jQuery.

import '../assets/index.less'
import React from 'react'
import ReactDOM from 'react-dom'
import Switch from 'rc-switch'

class Switcher extends React.Component {
  state = {
    disabled: false,
  }

  toggle = () => {
    this.setState({
      disabled: !this.state.disabled,
    })
  }

  render() {
    return (
      <div style={{ margin: 20 }}>
        <Switch
          disabled={this.state.disabled}
          checkedChildren={'开'}
          unCheckedChildren={'关'}
        />
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Switcher />, document.getElementById('__react-content'))

Commutateurs d'amorçage natifs

Voir la réponse de ohkts11 ci-dessous à propos des commutateurs Bootstrap natifs .

Si cela ne vous dérange pas de changer votre code HTML, vous pouvez utiliser l' data-toggleattribut sur <button>s. Voir la section Bascule unique des exemples de bouton :

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

Bootstrap 3 propose des options pour 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 que cela fonctionne, vous devez initialiser .btns avec le Javascript de Bootstrap:

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

J'ai essayé d'activer manuellement la classe «active» 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 vous appuyez sur le bouton, pas avant ou après (notre cas), donc il n'y a 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

Si vous souhaitez conserver une petite base de code et que vous n'aurez besoin du bouton bascule que pour une petite partie de l'application. Je suggérerais plutôt de maintenir votre code javascript vous-même (angularjs, javascript, jquery) et d'utiliser simplement du CSS.

Bon générateur de bouton à bascule: https://proto.io/freebies/onoff/

Voici ce très utile pour Bootstrap Toggle Button . Exemple d'extrait de code !! et jsfiddle ci-dessous.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <input id="toggle-trigger" type="checkbox" checked data-toggle="toggle">
    <button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>
<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>

Mise à jour 2020 pour Bootstrap 4

J'ai recommandé bootstrap4-toggle en 2020.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

<input id="toggle-trigger" type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>

<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>

Vous pouvez utiliser la bibliothèque CSS Toggle Switch. Incluez simplement le CSS et programmez le JS vous-même: http://ghinda.net/css-toggle-switch/bootstrap.html

Vous pouvez utiliser le commutateur de conception de matériaux pour Bootstrap 3.3.0

http://bootsnipp.com/snippets/featured/material-design-switch

Solution Bootstrap 4

bootstrap 4 navires à bascule intégré. Voici la documentation. https://getbootstrap.com/docs/4.3/components/forms/#switches

Au cas où quelqu'un serait toujours à la recherche d'un bon bouton interrupteur / bascule, j'ai suivi la suggestion de Rick et créé une simple directive angulaire autour de lui, angular-switch . En plus de préférer un commutateur de style Windows, le téléchargement total est également beaucoup plus petit (2kb vs 23kb minified css + js) par rapport à angular-bootstrap-switch et bootstrap-switch mentionnés ci-dessus ensemble.

Vous l'utiliseriez comme suit. Incluez d'abord les fichiers js et css requis:

<script src="./bower_components/angular-switch/dist/switch.js"></script>
<link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"></link>

Et activez-le dans votre application angulaire:

angular.module('yourModule', ['csComp'
    // other dependencies
]);

Vous êtes maintenant prêt à l'utiliser comme suit:

<switch state="vm.isSelected" 
    textlabel="Switch" 
    changed="vm.changed()"
    isdisabled="{{isDisabled}}">
</switch>