Bootstrap에서 토글 버튼을 만드는 방법

Bootstrap에서 토글 버튼을 만드는 방법

---

원래 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'))

---

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>

For these to work you must initialize .btns with Bootstrap's Javascript:

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

---

I've been trying to activate 'active' class manually with javascript. It's not as usable as a complete library, but for easy cases seems to be enough:

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

If you think carefully, 'active' class is used by bootstrap when the button is being pressed, not before or after that (our case), so there's no conflict in reuse the same class.

Try this example and tell me if it fails: http://jsbin.com/oYoSALI/1/edit?html,js,output

---

If you want to keep a small code base, and you are only going to be needing the toggle button for a small part of the application. I would suggest instead maintain you're javascript code your self (angularjs, javascript, jquery) and just use plain 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>

위에서 몇 가지 예를 보여 드렸습니다. 도움이되기를 바랍니다. Js Fiddle이 여기 있습니다. 소스 코드는 GitHub에서 사용할 수 있습니다.

---

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

---

누군가가 여전히 멋진 스위치 / 토글 버튼을 찾고 있다면 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>

참고 URL : https://stackoverflow.com/questions/13511368/how-to-create-a-toggle-button-in-bootstrap