Bootstrap-Switchプラグインは、ブートストラップ用に実装されたスイッチボタンコントロールであり、寸法、色、その他の属性のカスタマイズをサポートできます。国内のウェブサイトで使用されるスイッチタイプのボタンはあまりありません。 Bootstrapは海外で非常に人気があります。気に入らないのか、ウェブサイトに使用するのが面倒で難しいのかはわかりません。ただし、この開くボタンは、携帯電話などのモバイルデバイスで最も広く使用されており、画面の特性により、より良く発達するように促進します。
機能の説明：
2つのフォームのChekboxとRadioの簡単な使用を導入すると、デモを閲覧するためのより多くの効果と機能があり、ボタンをクリックしてスライドの方法でオン/オフを切り替えます。
使用の手順：
1. CSSおよびJSファイルを紹介します
<link rel = "styleSheet" href = "static/styleSheets/bootstrap-switch.css"/> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js src = "static/js/bootstrap-switch.js"> </script>
2.HTMLコンテンツが追加されました
<div data-on = "info" data-off = "success"> <入力タイプ= "チェックボックス" checked> </div> <div data-on = "success data off ="警告 "> <入力タイプ="チェックボックス "checked> </div> <div dato-on =" dat data "=" danger "> <inputタイプ="チェックボックス "チェック="> <div div "off> <" "> <div" off> < </div>
1）。 DIVは、チェックボックスにスタイルを追加することを完全に意図しています。
2）。入力は非常にシンプルで、通常のラベルです。
3）.make-switch：プラグインを使用してチェックボックスにCSSスタイルを追加します。
4）.data-on：CSSスタイルが州にあるとき。
5）.Data-Off：オフ状態があるときのCSSスタイル。
3。ラジオボックスの使用：
<ラベル= "option11"> option 1 </label> <div> <input id = "option11" type = "radio" name "name =" radio2 "bulation =" option11 "> div> <label for =" option12 "> option 2 </label> <div> <input id =" option12 "type =" radio name "name" ladio2 "optipted" 3 </label> <div> <入力ID = "option13" type = "Radio" name = "Radio2" value = "option13"> </div>
ラジオボックスの1つを最初に変更する必要があるため、ラジオラジオボックスも同じ方法で使用されるため、対応するJSコードを追加する必要があります。
<Script> $（'。Radio2 '）
4。開始
$（ "div [class = 'switch']"） $ this.attr（ "labeltext"）;
1）。 jQueryを介してすべてのスイッチDIVを取得し、それにより、それらのプロパティをオンコラー、オフカラーなどを取得します。
2）。その後すぐに、divに含まれる子要素の入力を取得します。
3）。 Bootstrapswitchメソッドを介して入力をロードします。
このようにして、必要なスイッチボタン効果を単純に実現できます。
まだ詳細に勉強したい場合は、ここをクリックして素晴らしいトピックを学び、添付してください：Bootstrap Learningチュートリアル
上記は、ブートストラップスイッチ（スイッチ）コントロールの使用方法に関するものです。すべての人の学習に役立つことを願っています。