Saya awalnya membuat aplikasi web dalam HTML, CSS dan JavaScript, kemudian diminta untuk membuatnya lagi di Bootstrap juga. Saya telah melakukan semuanya dengan baik, tetapi saya memiliki tombol sakelar di aplikasi web yang telah berubah kembali ke tombol radio (awalnya kotak centang) alih-alih tombol sakelar yang saya miliki sebelumnya.

Kode untuk tombolnya adalah:

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

dan file JavaScript dan CSS yang ditautkan ke halaman HTML adalah:

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

Apakah ada cara untuk mengubah kode agar saya bisa mendapatkan tombol sakelar kembali?

Jawaban awal dari 2013

Switch Bootstrap yang sangat baik (tidak resmi) tersedia .

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

Ini menggunakan jenis radio atau kotak centang sebagai sakelar. Sebuah typeatribut telah ditambahkan sejak V.1.8.

Kode sumber tersedia di Github .

Catatan dari 2018

Saya tidak akan merekomendasikan untuk menggunakan tombol Sakelar lama semacam itu sekarang, karena mereka sepertinya selalu mengalami masalah kegunaan seperti yang ditunjukkan oleh banyak orang.

Harap pertimbangkan untuk melihat Switch modern seperti ini dari kerangka kerja Komponen React (tidak terkait Bootstrap, tetapi dapat diintegrasikan dalam kisi Bootstrap dan UI).

Implementasi lain ada untuk Angular, View atau 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'))

Sakelar Bootstrap Asli

Lihat jawaban ohkts11 di bawah ini tentang sakelar Bootstrap asli .

Jika Anda tidak keberatan mengubah HTML, Anda dapat menggunakan data-toggleatribut di <button>s. Lihat bagian Sakelar tunggal dari contoh tombol :

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

Bootstrap 3 memiliki opsi untuk membuat tombol sakelar berdasarkan kotak centang atau tombol radio: http://getbootstrap.com/javascript/#buttons

Kotak centang

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

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

Agar ini bekerja, Anda harus menginisialisasi .btns dengan Javascript Bootstrap:

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

Saya sudah mencoba mengaktifkan kelas 'aktif' secara manual dengan javascript. Ini tidak dapat digunakan sebagai perpustakaan lengkap, tetapi untuk kasus yang mudah tampaknya sudah cukup:

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

Jika dipikir dengan hati-hati, kelas 'aktif' digunakan oleh bootstrap saat tombol ditekan, bukan sebelum atau sesudah itu (kasus kami), jadi tidak ada konflik dalam menggunakan kembali kelas yang sama.

Coba contoh ini dan beri tahu saya jika gagal: http://jsbin.com/oYoSALI/1/edit?html,js,output

Jika Anda ingin mempertahankan basis kode kecil, dan Anda hanya akan memerlukan tombol sakelar untuk sebagian kecil aplikasi. Saya akan menyarankan sebagai gantinya pertahankan kode javascript Anda sendiri (angularjs, javascript, jquery) dan cukup gunakan CSS biasa.

Generator tombol sakelar yang bagus: https://proto.io/freebies/onoff/

Di sini ini sangat berguna untuk Tombol Toggle Bootstrap . Contoh dalam potongan kode !! dan jsfiddle di bawah.

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

Perbarui 2020 Untuk Bootstrap 4

Saya merekomendasikan bootstrap4-toggle pada tahun 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/[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>

Anda dapat menggunakan pustaka Sakelar Toggle CSS. Cukup sertakan CSS dan program JS sendiri: http://ghinda.net/css-toggle-switch/bootstrap.html

Anda dapat menggunakan Material Design Switch untuk Bootstrap 3.3.0

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

Solusi bootstrap 4

bootstrap 4 mengirimkan sakelar bawaan. Berikut dokumentasinya. https://getbootstrap.com/docs/4.3/components/forms/#switches

Jika seseorang masih mencari tombol sakelar / sakelar yang bagus, saya mengikuti saran Rick dan membuat arahan sudut sederhana di sekitarnya, sakelar sudut . Selain lebih memilih saklar bergaya Windows, total unduhan juga jauh lebih kecil (2kb vs 23kb minified css + js) dibandingkan dengan angular-bootstrap-switch dan bootstrap-switch yang disebutkan di atas bersama-sama.

Anda akan menggunakannya sebagai berikut. Pertama, sertakan file js dan css yang diperlukan:

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

Dan aktifkan di aplikasi sudut Anda:

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

Sekarang Anda siap menggunakannya sebagai berikut:

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