【Bootstrap】Like / Dislikeをトグルボタンで実装する
作成日：
2019年10月27日
📝 はじめに
本記事はBootstrapの使用をベースにしています。
コメントやアンケートで、該当項目を「 好き 」「 嫌い 」、「 いいね！ 」「 どうだろう... 」のような二者択一の選択ラジオボタンをアイコン付きボタンをBootstrapで実装します。
ラジオボタンをトグルボタンとして利用する仕様は、以下を参照しました。
Buttons
https://getbootstrap.com/docs/4.3/components/buttons/#checkbox-and-radio-buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
コードサンプル
HTML
<style>
.btn:not(.active){
cursor: pointer;
}
</style>
<div class="container">
<div class="row">
<div class="col py-3">
<div class="btn-group-toggle row" data-toggle="buttons">
<label class="btn btn-outline-success col mr-2">
<input type="radio" name="like" value="1"> <i class="fa fa-fw fa-thumbs-up"></i>好き!
</label>
<label class="btn btn-outline-danger col ml-2">
<input type="radio" name="like" value="-1" > <i class="fa fa-fw fa-thumbs-down"></i>嫌い!
</label>
</div>
</div>
</div>
</div>実装サンプル
物草 灸太郎
WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。
コメントをどうぞ