web-dev-qa-db-ger.com

Wie erstelle ich eine Umschaltfläche in Bootstrap

Ich habe ursprünglich eine Web-App in HTML, CSS und JavaScript erstellt und wurde dann gebeten, sie in Bootstrap ebenfalls neu zu erstellen. Ich habe alles in Ordnung gebracht, aber ich musste die Schaltflächen in der Web-App umschalten Das hat sich zurück zu Radio-Buttons (ursprünglich Checkbox) geändert, anstatt zu den Toggle-Buttons, 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>

und 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 den Umschaltknopf zurückbekomme?

90
Megan Sime

Erstbeantwortung ab 2013

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

Classic 2013 Switch

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

Es werden die Kontrollkästchen für die Funktypen oder als Schalter verwendet. Ein type Attribut wurde seit V.1.8 hinzugefügt.

Der Quellcode ist verfügbar auf Github .

Notiz von 2018

Ich würde nicht empfehlen, diese alten Schaltertasten jetzt zu verwenden, da sie immer anscheinend nter Usability-Problemen litten, wie dies von vielen Leuten betont wurde.

Bitte schauen Sie sich moderne Switches wie diese aus dem React Component Framework (nicht Bootstrap) an, kann aber in = integriert werden Bootstrap Grid und UI).

Andere Implementierungen existieren für Angular, View oder 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

Wenn es Ihnen nichts ausmacht, Ihren HTML-Code zu ändern, können Sie das data-toggle Attribut auf <button>s. Siehe den Abschnitt Single toggle in Beispiele für Schaltflächen :

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

Bootstrap 3 bietet Optionen zum Erstellen von Schaltflä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 dies funktioniert, müssen Sie .btn Mit Bootstraps Javascript initialisieren:

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

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

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

Wenn Sie genau überlegen, wird die Klasse 'active' von bootstrap beim Drücken der Schaltfläche, nicht davor oder danach (in unserem Fall), verwendet, sodass es keinen Konflikt bei der Wiederverwendung derselben Klasse gibt.

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

7
p2kmgcl

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

Guter Toggle-Button-Generator: https://proto.io/freebies/onoff/

5
Rick

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

2
OMA

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

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

2
Ivan Rodriguez