Ban đầu tôi đã tạo một ứng dụng web bằng HTML, CSS và JavaScript, sau đó cũng được yêu cầu tạo lại nó trong Bootstrap. Tôi đã làm tất cả tốt, nhưng tôi có các nút chuyển đổi trong ứng dụng web đã thay đổi trở lại các nút radio (hộp kiểm ban đầu) thay vì các nút chuyển đổi mà tôi đã có ban đầu.

Mã cho các nút là:

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

và các tệp JavaScript và CSS mà trang HTML được liên kết là:

<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ó cách nào để thay đổi mã để tôi có thể lấy lại nút bật tắt không?

Câu trả lời ban đầu từ năm 2013

Có sẵn một Switch Bootstrap tuyệt vời (không chính thức) .

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

Nó sử dụng các loại radio hoặc hộp kiểm làm công tắc. Một typethuộc tính đã được thêm vào kể từ V.1.8.

Mã nguồn có sẵn trên Github .

Lưu ý từ năm 2018

Tôi không khuyên bạn nên sử dụng các loại nút Switch cũ như vậy ngay bây giờ, vì chúng dường như luôn gặp phải các vấn đề về khả năng sử dụng như nhiều người đã chỉ ra.

Vui lòng xem xét các thiết bị chuyển mạch hiện đại như thế này từ khung công tác Thành phần React (không liên quan đến Bootstrap, nhưng có thể được tích hợp trong lưới Bootstrap và giao diện người dùng).

Các triển khai khác tồn tại cho Angular, View hoặc 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'))

Công tắc Bootstrap gốc

Xem câu trả lời của ohkts11 bên dưới về các công tắc Bootstrap gốc .

Nếu bạn không ngại thay đổi HTML của mình, bạn có thể sử dụng data-togglethuộc tính trên <button>s. Xem phần Chuyển đổi đơn của các ví dụ về nút :

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

Bootstrap 3 có các tùy chọn để tạo các nút bật tắt dựa trên các hộp kiểm hoặc nút radio: http://getbootstrap.com/javascript/#buttons

Hộp kiểm

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

Các nút 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>

Để những thứ này hoạt động, bạn phải khởi tạo .btns bằng Javascript của Bootstrap:

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

Tôi đã cố gắng kích hoạt lớp 'hoạt động' theo cách thủ công bằng javascript. Nó không thể sử dụng được như một thư viện hoàn chỉnh, nhưng đối với những trường hợp đơn giản thì dường như là đủ:

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

Nếu bạn suy nghĩ kỹ, lớp 'hoạt động' được bootstrap sử dụng khi nút đang được nhấn, không phải trước hoặc sau đó (trường hợp của chúng tôi), vì vậy không có xung đột khi sử dụng lại cùng một lớp.

Hãy thử ví dụ này và cho tôi biết nếu nó không thành công: http://jsbin.com/oYoSALI/1/edit?html,js,output

Nếu bạn muốn giữ một cơ sở mã nhỏ và bạn sẽ chỉ cần nút bật tắt cho một phần nhỏ của ứng dụng. Thay vào đó, tôi khuyên bạn nên duy trì mã javascript của chính bạn (anglejs, javascript, jquery) và chỉ sử dụng CSS thuần túy.

Trình tạo nút bật tắt tốt: https://proto.io/freebies/onoff/

Đây là nút chuyển đổi rất hữu ích cho Bootstrap . Ví dụ trong đoạn mã !! và jsfiddle bên dưới.

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

Cập nhật 2020 cho Bootstrap 4

Tôi đã đề xuất bootstrap4-toggle vào năm 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>

Bạn có thể sử dụng thư viện CSS Toggle Switch. Chỉ cần bao gồm CSS và tự lập trình JS: http://ghinda.net/css-toggle-switch/bootstrap.html

Bạn có thể sử dụng Material Design Switch cho Bootstrap 3.3.0

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

Giải pháp Bootstrap 4

bootstrap 4 tàu chuyển đổi tích hợp sẵn. Đây là tài liệu. https://getbootstrap.com/docs/4.3/components/forms/#switches

Trong trường hợp ai đó vẫn đang tìm kiếm một nút chuyển đổi / chuyển đổi đẹp, tôi đã làm theo gợi ý của Rick và tạo một chỉ thị góc đơn giản xung quanh nó, công tắc góc . Bên cạnh việc thích chuyển đổi theo kiểu Windows, tổng tải xuống cũng nhỏ hơn nhiều (2kb so với 23kb css + js được rút gọn) so với góc-bootstrap-switch và bootstrap-switch được đề cập ở trên cùng nhau.

Bạn sẽ sử dụng nó như sau. Đầu tiên, hãy bao gồm tệp js và css được yêu cầu:

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

Và kích hoạt nó trong ứng dụng góc cạnh của bạn:

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

Bây giờ bạn đã sẵn sàng để sử dụng nó như sau:

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