부트스트랩에서 토글 버튼을 만드는 방법

부트스트랩에서 토글 버튼을 만드는 방법

저는 원래 HTML, CSS, 자바스크립트로 웹앱을 만들다가 부트스트랩에서도 다시 만들어달라는 요청을 받았습니다.잘 해냈지만 웹 앱에 원래 있던 토글 버튼 대신 라디오(원래 확인란) 버튼으로 다시 바뀐 토글 버튼이 있었습니다.

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

<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 페이지가 링크되는 자바스크립트와 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();

라디오 타입이나 체크박스를 스위치로 사용합니다. Atype속성은 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'))

네이티브 부트스트랩 스위치

네이티브 부트스트랩 스위치에 대한 ohkts11의 답변은 아래를 참조하십시오.

HTML을 변경하는 것이 괜찮다면, 당신은 사용할 수 있습니다.data-toggle에 책임을 돌리다<button>s. 버튼 예제의 Single toggle 섹션을 참조하십시오.

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

부트스트랩 3에는 체크박스나 라디오 버튼에 따라 토글 버튼을 만들 수 있는 옵션이 있습니다. http://getbootstrap.com/javascript/ #

체크박스

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

이 작업을 수행하려면 초기화해야 합니다..btns와 부트스트랩의 자바스크립트:

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

javascript로 수동으로 'active' 클래스를 활성화하려고 했습니다.완전한 라이브러리만큼 사용할 수 있는 것은 아니지만 쉬운 경우에는 충분할 것으로 보입니다.

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

신중하게 생각해보면, '액티브' 수업은 버튼을 누를 때 부트스트랩으로 사용하는 것이지, 그 전이나 후가 아니기 때문에 같은 수업을 재사용하는 데 충돌이 없습니다.

이 예를 사용해 보고 실패할 경우 알려주십시오. http://jsbin.com/oYoSALI/1/edit?html,js,output

작은 코드 기반을 유지하려면 애플리케이션의 작은 부분에만 전환 버튼이 필요합니다.대신 당신이 스스로 자바스크립트 코드(angularjs, javascript, jquery)로 유지하고 그냥 평범한 CSS를 사용하는 것을 제안합니다.

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

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

  <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은여기서 소스코드는깃허브에서 이용 가능합니다.

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

2020년에 부츠트랩 4토글을 추천했습니다.

<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

부트스트랩 3.3.0에 대한 재질 디자인 스위치를 사용할 수 있습니다.

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

부트스트랩 4 솔루션

부트스트랩 4척 내장 토글여기 서류가 있습니다.https://getbootstrap.com/docs/4.3/components/forms/ #

누군가가 여전히 좋은 스위치/토글 버튼을 찾고 있다면, 저는 릭의 제안에 따라 그 주변에 간단한 각도 지시문인 각도 스위치를 만들었습니다.Windows 스타일의 스위치를 선호하는 것 외에도 위에서 함께 언급한 각도 부트스트랩-스위치 및 부트스트랩-스위치에 비해 총 다운로드 수가 훨씬 적습니다(2kb vs 23kb minized 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