Bootstrapのチェックボックスの使い方をサンプルコード付き解説！
チェックボックスのデフォルトデザインが味気なくて、オシャレなチェックボックスを実装したいと考えたことのある方も多いかと思います。この記事ではBootstrapを使って洗礼されたデザインのチェックボックスを実装する方法を解説しています。
「フォームのチェックボックスをもっとオシャレなデザインに変えたいな。」と思ったことはないでしょうか？
ですが、チェックボックスのデザインを変更するには意外と手間がかかります。
そこでBootstrapを活用することで洗礼されたデザインのチェックボックスを簡単に実装することができます。
Bootstrapのチェックボックスの使い方
Bootstrapで実装できる２種類のデザインのチェックボックスの使い方をサンプルコード付きで紹介していきます。
シンプルなチェックボックス
inputタグにはform-check-inputクラスを与え、labelタグにはform-check-labelクラスを与えます。また、inputタグとlabelタグは兄弟要素になるように配置します。
その上でinputタグとlabelタグが一組となるようにform-checkクラスを付けたdivタグで囲んであげます。
シンプルなデザインですが、クリックした際には縁が青くなり、全体的に少しふわっと表示が切り替わるアニメーションが付いていることが分かります。
もちろん、inputタグのid属性とlabelタグのfor属性を同じにすることで、ラベルをクリックすることでもチェックボックスが選択できます。
また、checked属性を付けておくことで選択済みであることを分かるように、デフォルトで青いチェックが付きます。
オシャレなチェックボックス
先ほど実装したシンプルなチェックボックスとほとんど同じですが、inputタグとlabelタグを一組にしているdivタグにform-checkクラスに加え、form-switchクラスを与えてあげます。
チェックボックスがスイッチのような見た目になり、かなりオシャレになりましたね。
これを１から実装しようとすると、かなり大変な作業になりますが、Bootstrapを使うことでクラスを追加するだけでオシャレなチェックボックスを実装することができてしまいます。
おまけにラジオボタン
Bootstrapでラジオボタンを実装するのも、チェックボックスの時と全く同じです。
type属性とname属性が違うだけで同じform-checkクラス、form-check-inputクラス、form-check-labelクラスが与えられているのが分かります。
同じクラスを使用しているにも関わらず、見た目はチェックボックスのものと違いラジオボタンらしく丸く青い洗礼されたデザインのものになっていますね。
まとめ
Bootstrapではチェックボックスやラジオボタン以外にもフォーム要素をオシャレにするデザインが用意されています。
簡単に実装できるのでぜひ活用してみてくださいね。
