web-dev-qa-db-ja.com

ブートストラップでトグルボタンを作成する方法

私はもともとHTML、CSS、およびJavaScriptで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">

トグルボタンを元に戻すことができるようにコードを変更する方法はありますか？

javascriptjquerycsstwitter-bootstrapjqtouch
88
Megan Sime

2013年からの最初の回答

優れた（非公式） ブートストラップスイッチが利用可能です 。

Classic 2013 Switch

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

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

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

2018年からのメモ

多くの人が指摘しているように、これらはいつも ユーザビリティの問題に苦しんでいる のように思われるので、今はそのような古いスイッチボタンを使用することはお勧めしません。

React Componentフレームワーク （Bootstrap関連ではありませんが、BootstrapグリッドとUIに統合することもできます）からの このような最新のスイッチ を見てみてください。

Angular、View、またはjQueryには他の実装もあります。

Modern 2018 Switch

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'))
79
smonff

HTMLを変更しても構わない場合は、data-togglesの<button>属性を使用できます。 ボタンの例 のシングルトグルセクションを参照してください。

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

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>

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

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

私はJavaScriptを使って手動で 'active'クラスを有効にしようとしています。完全なライブラリほど使い勝手がよくありませんが、簡単な場合には十分なようです。

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

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

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

7
p2kmgcl

あなたが小さなコードベースを維持したいなら、あなたはアプリケーションのごく一部のためにトグルボタンを必要とすることになるでしょう。私は代わりにあなたがあなた自身のjavascriptコードを自分で維持し（AngularJS、Javascript、Jquery）そして普通のCSSを使うことをお勧めします。

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

5
Rick

CSS切り替えスイッチライブラリを使用できます。 CSSを含めてJSを自分でプログラムしてください。 http://ghinda.net/css-toggle-switch/bootstrap.html

2
OMA

Bootstrap 3.3.0の材料設計スイッチを使用できます。

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

2
Ivan Rodriguez