【Bootstrap】Like / Dislikeをトグルボタンで実装する

作成日:
📝 はじめに 本記事はBootstrapの使用をベースにしています。

コメントやアンケートで、該当項目を「 好き 」「 嫌い 」、「 いいね! 」「 どうだろう... 」のような二者択一の選択ラジオボタンをアイコン付きボタンをBootstrapで実装します。

ラジオボタンをトグルボタンとして利用する仕様は、以下を参照しました。

favicon
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を楽しんでいます。

Loading...

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。