bootstrapのtoggleにstyleを適用させる

5253 ワード
jQuery bootstrap4 jQuery テキストリンク

bootstrapでcheckboxをtoggleで作った時にstyleの変更の仕方が複数あったのでまとめておきます。
今回はボタンの角を丸くして、toggle-handleを白くします。

環境

bootstrap4
jQuery

留意点

html,cssはそれぞれhaml,scssで記述しています。

コード

方法としては3パターンありました。
1.html内にcssを記述する場合

new.html.haml
:css
  .toggle.check, .toggle-on.check, .toggle-off.check { border-radius: 20rem; }
  .toggle .toggle-handle { border-radius: 20rem; background-color: white;}
%input#passcheck{:type => "checkbox", "data-style" => "check"}

Bootstrap ToggleのCustom Styleの<style>〜</style>の部分をhamlに直すと上のcss: の記述になるみたいです。

2.cssを別で準備する場合

new.html.haml
%input#passcheck{:type => "checkbox", "data-style" => "check"}
sign.scss
.toggle.check, .toggle-on.check, .toggle-off.check {
    border-radius: 20rem;
  }
.toggle-handle {
    border-radius: 20rem;
    background-color: white;
  }

3.jQueryで読み込ませる場合

new.html.haml
%input#passcheck{:type => "checkbox"}
sign.scss
.toggle.check, .toggle-on.check, .toggle-off.check {
    border-radius: 20rem;
  }
.toggle-handle {
    border-radius: 20rem;
    background-color: white;
  }
sign_up.js
$('#passcheck').bootstrapToggle({ // パスワードのtoggleボタン
   style: 'check'
});

styleの記述で、読み込ませたいtoggle.〇〇を指定している感じですね。

実行結果