Ich habe ursprünglich eine Web-App in HTML, CSS und JavaScript erstellt und wurde dann gebeten, sie auch in Bootstrap erneut zu erstellen. Ich habe alles gut gemacht, aber ich hatte Schaltflächen in der Web-App, die wieder zu Radio-Schaltflächen (ursprünglich Kontrollkästchen) anstatt zu den Schaltflächen geändert wurden, die ich ursprünglich hatte.

Der Code für die Schaltflächen lautet:

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

Die JavaScript- und CSS-Dateien, mit denen die HTML-Seite verknüpft ist, sind:

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

Gibt es eine Möglichkeit, den Code zu ändern, damit ich die Umschalttaste zurück bekomme?

Erste Antwort von 2013

Ein ausgezeichneter (inoffizieller) Bootstrap-Switch ist verfügbar .

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

Es werden Funktypen oder Kontrollkästchen als Schalter verwendet. Ein typeAttribut wurde seit V.1.8 hinzugefügt.

Der Quellcode ist auf Github verfügbar .

Anmerkung von 2018

Ich würde nicht empfehlen, diese Art von alten Switch-Tasten jetzt zu verwenden, da sie immer unter Usability-Problemen zu leiden schienen, wie von vielen Leuten angegeben.

Bitte schauen Sie sich moderne Switches wie diesen aus dem React Component-Framework an (nicht Bootstrap-bezogen, kann aber in das Bootstrap-Grid und die Benutzeroberfläche integriert werden).

Es gibt andere Implementierungen für Angular, View oder 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'))

Native Bootstrap-Switches

Siehe die Antwort von ohkts11 unten zu den nativen Bootstrap-Switches .

Wenn es Ihnen nichts ausmacht, Ihren HTML-Code zu ändern, können Sie das data-toggleAttribut für <button>s verwenden. Weitere Informationen finden Sie im Abschnitt zum einfachen Umschalten der Schaltflächenbeispiele :

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

Bootstrap 3 bietet Optionen zum Erstellen von Umschaltflächen basierend auf Kontrollkästchen oder Optionsfeldern: http://getbootstrap.com/javascript/#buttons

Kontrollkästchen

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

Radio Knöpfe

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

Damit diese funktionieren, müssen Sie .btns mit Bootstraps Javascript initialisieren :

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

Ich habe versucht, die 'aktive' Klasse manuell mit Javascript zu aktivieren. Es ist nicht so benutzerfreundlich wie eine komplette Bibliothek, aber für einfache Fälle scheint es genug zu sein:

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

Wenn Sie sorgfältig überlegen, wird die 'aktive' Klasse vom Bootstrap verwendet, wenn die Taste gedrückt wird, nicht vorher oder nachher (in unserem Fall), sodass es keinen Konflikt bei der Wiederverwendung derselben Klasse gibt.

Probieren Sie dieses Beispiel aus und sagen Sie mir, ob es fehlschlägt: http://jsbin.com/oYoSALI/1/edit?html,js,output

Wenn Sie eine kleine Codebasis beibehalten möchten und nur die Umschalttaste für einen kleinen Teil der Anwendung benötigen. Ich würde vorschlagen, stattdessen zu behaupten, dass Sie selbst Javascript-Code sind (AngularJS, Javascript, JQuery) und einfach nur CSS verwenden.

Guter Umschaltknopfgenerator: https://proto.io/freebies/onoff/

Hier diese sehr nützliche For Bootstrap Toggle Button . Beispiel im Code-Snippet !! und jsfiddle unten.

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

Update 2020 für Bootstrap 4

Ich habe bootstrap4-toggle im Jahr 2020 empfohlen .

<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/[email protected]/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/[email protected]/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/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>

Sie können die CSS Toggle Switch-Bibliothek verwenden. Fügen Sie einfach das CSS hinzu und programmieren Sie das JS selbst: http://ghinda.net/css-toggle-switch/bootstrap.html

Sie können den Material Design Switch für Bootstrap 3.3.0 verwenden

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

Bootstrap 4-Lösung

Bootstrap 4 Schiffe eingebaut umschalten. Hier ist die Dokumentation. https://getbootstrap.com/docs/4.3/components/forms/#switches

Für den Fall, dass noch jemand nach einem netten Schalter / Kippknopf sucht, folgte ich Ricks Vorschlag und erstellte eine einfache Winkelanweisung, den Winkelschalter . Abgesehen davon, dass ein Windows-Switch bevorzugt wird, ist der Gesamt-Download auch viel geringer (2 KB gegenüber 23 KB minimiertem CSS + JS) als der oben erwähnte Winkel-Bootstrap-Switch und Bootstrap-Switch zusammen.

Sie würden es wie folgt verwenden. Fügen Sie zunächst die erforderlichen js- und css-Dateien hinzu:

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

Und aktivieren Sie es in Ihrer eckigen App:

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

Jetzt können Sie es wie folgt verwenden:

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