Inizialmente ho creato un'app web in HTML, CSS e JavaScript, poi mi è stato chiesto di crearla di nuovo anche in Bootstrap. Ho fatto tutto bene, ma avevo i pulsanti di attivazione / disattivazione nell'app Web che sono tornati ai pulsanti della radio (originariamente casella di controllo) invece dei pulsanti di attivazione che avevo originariamente.

Il codice per i pulsanti è:

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

ei file JavaScript e CSS a cui è collegata la pagina HTML sono:

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

C'è un modo per modificare il codice in modo da poter riavere il pulsante di attivazione / disattivazione?

Risposta iniziale del 2013

È disponibile un eccellente (non ufficiale) Bootstrap Switch .

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

Utilizza i tipi di radio o le caselle di controllo come interruttori. Un typeattributo è stato aggiunto dalla V.1.8.

Il codice sorgente è disponibile su Github .

Nota del 2018

Non consiglierei di utilizzare quel tipo di vecchi pulsanti Switch ora, poiché sembravano sempre soffrire di problemi di usabilità come indicato da molte persone.

Si prega di considerare di dare un'occhiata agli Switch moderni come questo dal framework React Component (non correlato a Bootstrap, ma può essere integrato nella griglia e nell'interfaccia utente di Bootstrap).

Esistono altre implementazioni per Angular, View o 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'))

Switch bootstrap nativi

Vedi la risposta di ohkts11 di seguito sugli interruttori Bootstrap nativi .

Se non ti dispiace cambiare il tuo HTML, puoi usare l' data-toggleattributo su <button>s. Vedere la sezione Attivazione / disattivazione singola degli esempi di pulsanti :

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

Bootstrap 3 ha opzioni per creare pulsanti di attivazione / disattivazione basati su caselle di controllo o pulsanti di opzione: http://getbootstrap.com/javascript/#buttons

Caselle di controllo

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

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

Affinché funzionino, è necessario inizializzare .btns con il Javascript di Bootstrap:

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

Ho provato ad attivare manualmente la classe "attiva" con javascript. Non è utilizzabile come una libreria completa, ma per casi facili sembra essere sufficiente:

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

Se pensi attentamente, la classe "attiva" viene utilizzata da bootstrap quando il pulsante viene premuto, non prima o dopo (il nostro caso), quindi non c'è conflitto nel riutilizzare la stessa classe.

Prova questo esempio e dimmi se fallisce: http://jsbin.com/oYoSALI/1/edit?html,js,output

Se si desidera mantenere una piccola base di codice e sarà necessario il pulsante di attivazione / disattivazione solo per una piccola parte dell'applicazione. Suggerirei invece di mantenere il codice javascript da solo (angularjs, javascript, jquery) e utilizzare semplicemente CSS.

Buon generatore di pulsanti di attivazione / disattivazione: https://proto.io/freebies/onoff/

Qui questo molto utile per Bootstrap Toggle Button . Esempio nello snippet di codice !! e jsfiddle di seguito.

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

Aggiorna 2020 per Bootstrap 4

Ho consigliato bootstrap4-toggle nel 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>

Puoi usare la libreria CSS Toggle Switch. Basta includere il CSS e programmare il JS da soli: http://ghinda.net/css-toggle-switch/bootstrap.html

È possibile utilizzare il Material Design Switch per Bootstrap 3.3.0

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

Soluzione Bootstrap 4

bootstrap 4 navi interruttore integrato. Ecco la documentazione. https://getbootstrap.com/docs/4.3/components/forms/#switches

Nel caso in cui qualcuno stia ancora cercando un bel pulsante di commutazione / attivazione / disattivazione, ho seguito il suggerimento di Rick e ho creato una semplice direttiva angolare attorno ad esso, interruttore angolare . Oltre a preferire uno switch in stile Windows, il download totale è anche molto più piccolo (2kb vs 23kb minified css + js) rispetto a angular-bootstrap-switch e bootstrap-switch menzionati sopra insieme.

Lo useresti come segue. Prima includi il file js e css richiesto:

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

E abilitalo nella tua app angolare:

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

Ora sei pronto per usarlo come segue:

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