Bootstrapのチェックボックス【現役エンジニアが解説】

PROGRAM

今回は、Bootstrapのチェックボックスについて、簡単に解説していきます。

基本のHTML

Bootstrapではチェックボックスをdiv要素で囲んでみましょう。

チェックボックスを囲んだdiv要素のクラス名にはform-checkを付与します。

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="agreeCheck">
  <label class="form-check-label" for="agreeCheck">
    同意する
  </label>
</div>

上記のコードでは、約款等に同意するためのチェックボックスを実装しています。

横並びにする

チェックボックスを横並びにすることもできます。

div要素のクラス名に、form-checkもさることながら、form-check-inlineを付与します。

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="hamburgerCheck">
  <label class="form-check-label" for="hamburgerCheck">ハンバーガー</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="nuggetCheck">
  <label class="form-check-label" for="nuggetCheck">ナゲット</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="potatoCheck" disabled>
  <label class="form-check-label" for="potatoCheck">ポテト</label>
</div>

上記のコードの例では、ハンバーガーショップを想定し、商品ごとにチェックボックスを用意しています。(ポテトは品切れ)

スイッチにする

Bootstrapではチェックボックスをスイッチにできます。

スイッチにするには、form-checkとform-switchのクラスを与えたdiv要素で囲います。

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="hideSwitchCheck">
  <label class="form-check-label" for="hideSwitchCheck">ログイン状態を隠す</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="informSwitchCheck" checked>
  <label class="form-check-label" for="informSwitchCheck">メンバーにログイン情報を通知する</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="alertSwitchCheck" checked>
  <label class="form-check-label" for="alertSwitchCheck">メールでログインアラートを通知する(推奨)</label>
</div>

上記の例では、ログイン関連の設定のチェックボックスをスイッチ表示で実装しています。