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

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



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

ラジオボタンをトグルボタンとして利用する場合は、

Buttons
参考
Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Buttons

を参照します。

<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>
.btn:not(.active){
  cursor: pointer;
}

今日はここまで

関連する記事



こちらはいかが?


コメントを残す