21:00概要Bootstrapのバージョン4のベータ版が終わり、正式にリリースされました。v4でinputタグで作ることができるラジオボタンを横並びにして、さらにボタン風にする方法について紹介します。方法さっそくやってみましょう。実は、ドキュメントにやり方が書いてあるのでそれにそってやるとこのようになります。</label></div>ここで重要な部分は、data-toggle="buttons"という部分です。これは、BootstrapのJavaScriptに関係するもので、これを設定することでJavaScriptでいい感じにラジオボタンをボタン風にしてくれます。このようにJavaScriptを使っていることから、私の場合Vue.jsと組み合わせてみると、うまくVue.jsが反応しなくなりました。次にdata-toggle="buttons"を書かない方法、JavaScriptを使わない方法を紹介します。JavaScriptを使わない方法JavaScriptを使わない場合、別にスタイルシートを記述する必要があります。#fff;}cssで指定しているカラーコードは好きなものに変えてください。重要な部分は、labelタグのforです。このforに対応するラジオボタンのidを指定することでラベルのクリックでラジオボタンの選択をしたことになります。することでラベルのクリックとラジオボタンのボタンが関連づけられ、cssでラジオボタンがチェックされた時に、+を使ってラジオボタンの直後にあるlabelの色を変えるようにしています。まとめ通常であれば、最初に紹介した方法でやるべきなのでしょうが、私のように別のライブラリと組み合わせると相性が悪くなるということがあります。このような時は、JavaScriptを使わない方法で実現することをお勧めします。