[Bootstrap] かっこ良いチェックボックスにカスタマイズしたい時はBootstrap Multiselectプラグインを使うと超便利!

Bootstrapのチェックボックスってちょっと見た目普通ですよね。
他のBootstrapのフォーム部品と比べると浮いて見えちゃいますよね。
かといって自分でカスタマイズするのはちょっと面倒。
今日はそんなチェックボックスをプルダウン形式でかっこ良くカスタマイズしてくれる「Bootstrap Multiselect」プラグインを紹介します。

ちなみにファイルインプットをかっこ良くしたい場合はこちらの
Bootstrap3でかっこ良いファイルインプットフォームをつくる
の記事を参考にしてくださいね。

プログラミングやWordPressを習得するのに一番近道な方法とは?

Bootsrap Multiselectを使うとどうかっこ良くなるか

① セレクトボックスがかっこ良いプルダウン形式に

02_Bootstrap_Multiselect
見てもらえれば分かるが、セレクトボックスがプルダウン形式になり、3個までは選択したValueがしっかり表示されユーザーにも分かりやすい
デフォルトでは4個以上になるとまとめて表示されるがサイトのその他の例でまとめずに表示する方法も書かれていますよ。
「全て選択」も付いていて嬉しい。

 
03_Bootstrap_Multiselect-7

 
04_Bootstrap_Multiselect-4

 

② 便利な検索機能もオシャレに装備できる

05_Bootstrap_Multiselect-3
かっこ良い検索機能も付けられます。
日本語検索がそのままでいけるかどうかはまだ試せてません。
すみません。
恐らくそのままだと日本語は厳しい気がしますが、英数字で検索させたい時は是非。

 

③ ラジオボタンもかっこ良くなる

01_Bootstrap_Multiselect

チェックボタンだけではありません。
ラジオボタンもかっこ良くカスタマイズ出来るのです。
ラジオボタンなので当然一つしか選べないのですが、選択したValueがちゃんと表示されるのでユーザーも迷いませんね。

 

Bootsrap Multiselectの使い方

① まずはサイトへ行ってGitHubからダウンロード

■ サイトはこちら

07_Bootstrap_Multiselect

■ ダウンロード
08_davidstutz_bootstrap-multiselect_·_GitHub-12

 

② ダウンロードしたファイルを任意の場所に設置

09_bootstrap-multiselect-master-9
ダウンロードしたファイルの中で実際に使うのは「bootstrap-multiselect.css」と「bootstrap-multiselect.js」の二つです。
もちろんBootstrap本体とjQueryは入っている前提です。

 

③ 基本的なコーディング

ちなみにサイトにあるGetting Startedの基本コードをそのまま書いてます。

 

まとめ

本家サイトに行けば例に挙げたものやそれ以外にもチェック出来る数を制限したり、などなどの使い方も事細かに書いてあるので、是非いろいろ使いこなしてかっこ良いチェックボックスを作って下さい。
作成者に感謝ですね。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA