私は最初にHTML、CSS、JavaScriptでWebアプリを作成しましたが、Bootstrapでも再度作成するよう求められました。私はそれですべてうまく行きましたが、元々持っていたトグルボタンの代わりにラジオ（元はチェックボックス）ボタンに戻ったWebアプリのトグルボタンがありました。

ボタンのコードは次のとおりです。

<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フレームワークからこのような最新のスイッチを確認することを検討してください（Bootstrap関連ではありませんが、Bootstrapグリッドと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>

これらが機能するためには.btn、BootstrapのJavaScriptでを初期化する必要があります。

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

私はjavascriptを使用して「アクティブ」クラスを手動でアクティブにしようとしています。それは完全なライブラリーとして使用可能ではありませんが、簡単な場合には十分であるようです：

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

注意深く考えると、「アクティブ」クラスはボタンが押されているときにその前後ではなく（私たちの場合）ブートストラップによって使用されるため、同じクラスを再利用しても競合はありません。

この例を試して、失敗したかどうかを教えてください：http : //jsbin.com/oYoSALI/1/edit?html,js,output

小さなコードベースを維持したい場合、アプリケーションのごく一部のトグルボタンだけが必要になります。代わりに、JavaScriptコードを自分で維持し（angularjs、javascript、jquery）、プレーンCSSを使用することをお勧めします。

良いトグルボタンジェネレーター：https : //proto.io/freebies/onoff/

ここで、これはBootstrap Toggle Buttonに非常に役立ちます。コードスニペットの例!! 以下の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>

Bootstrap 4の2020を更新

私は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のマテリアルデザインスイッチを使用できます

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

Bootstrap 4ソリューション

ブートストラップ4には組み込みのトグルが付属しています。ここにドキュメントがあります。 https://getbootstrap.com/docs/4.3/components/forms/#switches

誰かがまだ素敵なスイッチ/トグルボタンを探している場合に備えて、私はリックの提案に従い、その周りに単純な角度ディレクティブ、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>