web-dev-qa-db-fra.com

Comment créer un bouton bascule dans Bootstrap

À l'origine, j'ai créé une application Web en HTML, CSS et JavaScript, puis il m'a été demandé de la créer à nouveau dans Bootstrap. Je me suis bien débrouillé, mais j'avais dans mon application Web des boutons permettant de basculer qui ont été remplacés par des boutons radio (à l'origine cochés) au lieu des boutons 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 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 at-il un moyen de changer le code afin que je puisse récupérer le bouton bascule?

javascriptjquerycsstwitter-bootstrapjqtouch
90
Megan Sime

Réponse initiale de 2013

Un excellent (non officiel) Bootstrap Switch est disponible .

Classic 2013 Switch

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

Il utilise les types de radio ou comme cases à cocher comme commutateurs. Un attribut type a été ajouté depuis la version V.1.8.

Le code source est disponible sur Github .

Note de 2018

Je ne recommanderais pas d’utiliser ce type de vieux boutons d’interrupteur maintenant, car ils semblaient toujours avoir souffrir de problèmes d’utilisabilité , comme indiqué par de nombreuses personnes.

Veuillez envisager de jeter un œil à commutateurs modernes comme celui-ci à partir du cadre de React Component (pas lié à Bootstrap, mais peut être intégré à Bootstrap grille et interface utilisateur cependant).

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

Modern 2018 Switch

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'))
79
smonff

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

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

Bootstrap 3 a 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 code Javascript de Bootstrap:

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

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 des cas faciles, cela semble suffire:

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

Si vous y réfléchissez bien, la classe 'active' est utilisée par bootstrap lorsque vous appuyez sur le bouton, pas avant ni après (notre cas), il n'y a donc aucun conflit lors de 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

7
p2kmgcl

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 conserver le code javascript vous-même (angularjs, javascript, jquery) et d'utiliser simplement du CSS simple.

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

5
Rick

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

2
OMA

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

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

2
Ivan Rodriguez