원래 HTML, CSS 및 JavaScript로 웹 앱을 만든 다음 부트 스트랩에서도 다시 만들도록 요청 받았습니다. 나는 모든 것을 잘했지만 웹 앱에 원래 있던 토글 버튼 대신 라디오 (원래 확인란) 버튼으로 다시 변경된 토글 버튼이있었습니다.

버튼의 코드는 다음과 같습니다.

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

HTML 페이지가 링크 된 JavaScript 및 CSS 파일은 다음과 같습니다.

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

토글 버튼을 다시 가져올 수 있도록 코드를 변경하는 방법이 있습니까?

2013 년의 초기 답변

우수한 (비공식) 부트 스트랩 스위치를 사용할 수 있습니다 .

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

라디오 유형 또는 확인란을 스위치로 사용합니다. type속성은 V.1.8 이후 추가되었습니다.

소스 코드는 Github에서 사용할 수 있습니다 .

2018 년 메모

많은 사람들이 지적하는 것처럼 항상 사용성 문제 로 고통받는 것처럼 보였기 때문에 지금은 그런 종류의 이전 스위치 버튼을 사용하지 않는 것이 좋습니다 .

React Component 프레임 워크 에서 이와 같은 최신 스위치를 살펴보십시오 (부트 스트랩과 관련이 없지만 부트 스트랩 그리드 및 UI에 통합 될 수 있음).

Angular, View 또는 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'))

기본 부트 스트랩 스위치

네이티브 Bootstrap 스위치 에 대한 아래 의 ohkts11의 답변을 참조하십시오 .

HTML을 변경해도 괜찮다 data-toggle면 <button>s 의 속성을 사용할 수 있습니다 . 버튼 예제 의 단일 토글 섹션을 참조하십시오 .

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

Bootstrap 3에는 확인란 또는 라디오 버튼을 기반으로 토글 버튼을 만드는 옵션이 있습니다. http://getbootstrap.com/javascript/#buttons

체크 박스

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

라디오 버튼

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

이것이 작동하려면 .btnBootstrap의 Javascript로 s를 초기화해야합니다 .

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

나는 자바 스크립트를 사용하여 수동으로 '활성'클래스를 활성화하려고했습니다. 완전한 라이브러리만큼 유용하지는 않지만 쉬운 경우에는 충분합니다.

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

신중하게 생각하면 'active'클래스는 버튼을 눌렀을 때 부트 스트랩에서 사용되며 그 전후 (우리의 경우)가 아니라 동일한 클래스를 재사용 할 때 충돌이 없습니다.

이 예제를 시도하고 실패하면 알려주세요 : http://jsbin.com/oYoSALI/1/edit?html,js,output

작은 코드베이스를 유지하고 싶은 경우 응용 프로그램의 작은 부분에만 토글 버튼이 필요합니다. 대신에 당신이 자바 스크립트 코드를 유지하고 (angularjs, javascript, jquery) 평범한 CSS를 사용하는 것이 좋습니다.

좋은 토글 버튼 생성기 : https://proto.io/freebies/onoff/

여기에 이것은 부트 스트랩 토글 버튼에 매우 유용 합니다. 코드 스 니펫의 예 !! 아래 jsfiddle.

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

2020 년 부트 스트랩 4 업데이트

2020 년에 bootstrap4-toggle 을 권장했습니다 .

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

CSS Toggle Switch 라이브러리를 사용할 수 있습니다. CSS를 포함하고 JS를 직접 프로그래밍하십시오. http://ghinda.net/css-toggle-switch/bootstrap.html

Bootstrap 3.3.0에 Material Design Switch를 사용할 수 있습니다.

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

부트 스트랩 4 솔루션

부트 스트랩 4는 내장 토글을 제공합니다. 다음은 문서입니다. https://getbootstrap.com/docs/4.3/components/forms/#switches

누군가가 여전히 멋진 스위치 / 토글 버튼을 찾고 있다면 Rick의 제안을 따랐고 그 주위에 간단한 각도 지시문 angular-switch를 만들었습니다 . Windows 스타일 스위치를 선호하는 것 외에도 전체 다운로드는 위에서 언급 한 angular-bootstrap-switch 및 bootstrap-switch에 비해 훨씬 더 작습니다 (2kb vs 23kb 축소 된 css + js).

다음과 같이 사용합니다. 먼저 필요한 js 및 css 파일을 포함합니다.

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

그리고 각도 앱에서 활성화하십시오.

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

이제 다음과 같이 사용할 준비가되었습니다.

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