So erstellen Sie eine Umschaltfläche in Bootstrap

Ich ursprünglich erstellt eine web-app in HTML, CSS und JavaScript, dann war gefragt, um es wieder zu schaffen in der Bootstrap zu. Ich habe es getan, alles in Ordnung, aber ich hatte die toggle-buttons in der web-app, die geändert wurden, zurück zum radio (ursprünglich checkbox) Tasten anstelle des toggle-buttons hatte ich ursprünglich.

Den code für die buttons:

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

und die JavaScript und CSS Dateien, die HTML-Seite verknüpft 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, also ich kann mit der toggle-button zurück?

InformationsquelleAutor der Frage Megan Sime | 2012-11-22

  1. 75

    Erste Antwort von 2013

    Ausgezeichnete (inoffizielle) Bootstrap-Schalter ist verfügbar.

    So erstellen Sie eine Umschaltfläche in Bootstrap

    Verwendet es radio-Typen oder Checkboxen als Schalter. Ein type Attribut Hinzugefügt wurde, da V. 1.8.

    Source-code ist verfügbar auf Github.

    Hinweis von 2018

    Ich würde nicht empfehlen, diese Art von alten Switch-buttons, wie Sie schien immer zu leiden der usability-Probleme wie bereits von vielen Menschen.

    Bitte erwägen Sie, einen Blick auf moderne Switches wie die (nicht Bootstrap verwandt aber doch).

    So erstellen Sie eine Umschaltfläche in Bootstrap

    InformationsquelleAutor der Antwort smonff

  2. 56

    Wenn Euch das nichts ausmacht änderung Ihrer HTML, können Sie die data-toggle Attribut auf <button>s. Finden Sie die Single toggle Abschnitt der button Beispiele:

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

    InformationsquelleAutor der Antwort Sam

  3. 28

    Bootstrap 3 bietet Optionen zum erstellen von Schaltflächen auf Basis von Checkboxen oder radio-buttons: http://getbootstrap.com/javascript/#buttons

    Checkboxen

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

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

    Für diese zu arbeiten, müssen Sie initialisieren .btns mit Bootstrap Javascript:

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

    InformationsquelleAutor der Antwort StriplingWarrior

  4. 6

    Habe ich versucht zu aktivieren, 'active' - Klasse manuell mit javascript. Es ist nicht so nutzbar wie eine ganze Bibliothek, aber für einfache Fälle genug zu sein scheint:

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

    Wenn Sie denken Sie sorgfältig, 'active' - Klasse wird verwendet, indem bootstrap-wenn der button gedrückt wird, nicht vor oder nach diesem (unseren Fall), so gibt es keinen Konflikt in der Wiederverwendung der gleichen Klasse.

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

    InformationsquelleAutor der Antwort p2kmgcl

  5. 5

    Wenn Sie möchten, halten Sie einen kleinen code-Basis, und Sie sind nur gehen, um sein müssen der toggle-button für einen kleinen Teil der Anwendung. Ich würde vorschlagen, stattdessen pflegen Sie javascript-code selbst (angularjs, javascript, jquery) und nur mit normal-CSS.

    Gut toggle-button-generator: https://proto.io/freebies/onoff/

    InformationsquelleAutor der Antwort Rick

  6. 2

    Können Sie die CSS-Toggle-Switch library. Nur sind die CSS-und die JS selbst:
    http://ghinda.net/css-toggle-switch/bootstrap.html

    InformationsquelleAutor der Antwort OMA

  7. 2

    Können Sie die Material-Design-Schalter für Bootstrap 3.3.0

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

    InformationsquelleAutor der Antwort Ivan Rodriguez

  8. -1

    Falls jemand noch auf der Suche nach einem schönen Schalter/toggle-button, folgte ich Rick ' s Vorschlag und erstellte eine einfache Winkel-Richtlinie um, Winkel-Schalter. Außerdem lieber ein Windows-Stil wechseln, wird die gesamte download ist auch viel kleiner (2kb vs 23kb minified css+js) im Vergleich zu eckig, bootstrap-switch und bootstrap-Schalter oben genannten zusammen.

    Verwenden Sie es wie folgt. Zuerst gehören die benötigten js-und css-Datei: 

    <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 in Ihre Winkel-app:

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

    Sind Sie jetzt bereit, es zu benutzen, wie folgt: 

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

    So erstellen Sie eine Umschaltfläche in Bootstrap

    InformationsquelleAutor der Antwort Erik Vullings

Schreibe einen Kommentar