質問

私はもともと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年当初の回答

優れた（非公式な） Bootstrap Switch が利用可能です。 .

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

ラジオタイプを使っている または のチェックボックスをスイッチとして使用します。A type 属性がV.1.8から追加されました。

ソースコードは Githubで入手可能です。 .

2018年からの注意事項

私は、その種の古いSwitchボタンを今使うことはお勧めしません、彼らは常に、次のように見えました。 はユーザビリティの問題に悩まされています。 という指摘があります。

をご覧になってみてください。 のようなモダンなスイッチ から 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'))

ネイティブブートストラップスイッチ

参照 ohkts11 の回答 をご覧ください。 ネイティブの Bootstrap スイッチ .