【Bootstrap】フォーム・ボタンのコンポーネントの使い方を紹介

Bootstrap

今回は、フォームやボタンコンポーネントの使い方を紹介していきます(^^)

  1. フォーム
    1. 基本的な使い方
      1. 入力フォームのサイズ変更
      2. レンジ入力の作成
      3. 読み取り専用テキストの枠を非表示
    2. チェックボックス・ラジオボタン
      1. 基本的な使い方
      2. 項目を横並びにする
    3. レイアウトの調整
      1. グリッドレイアウト
      2. カラム間隔をコンパクトに
      3. 水平配置のフォームの作成
      4. ラベルのサイズ変更
      5. カラム幅を自動調整
  2. 横並びのフォームを作成
    1. ヘルプテキストの表示
    2. フォームグループをまとめて無効化する
    3. カスタムフォームの使用
      1. カスタムフォームのチェックボックス・ラジオボタン
      2. カスタムフォームのプルダウンメニュー
      3. カスタムフォームのファイル選択
      4. カスタムフォームのレンジ入力
  3. 入力グループ
    1. 基本的な使い方
      1. ラベル付き入力グループ
    2. 入力グループのサイズ変更
    3. チェックボックス・ラジオボタンのアドオン
    4. 入力グループに複数の入力フォーム
    5. ボタン付きアドオン
    6. ドロップダウン付きアドオン
      1. 標準的なドロップダウン
      2. スプリットボタンのドロップダウン
  4. ボタン
    1. 基本的な使い方
      1. button 要素のボタン
      2. a 要素、input 要素のボタン
    2. アウトラインボタンの作成
    3. ボタンサイズの変更
    4. ブロックレベルのボタンの作成
    5. ボタンの状態の変更
    6. 切り替えボタンの作成
    7. チェックボックス・ラジオボタンをボタン風に
  5. ボタングループ
    1. 基本的な使い方
    2. ボタンツールバーの作成
    3. ボタングループのサイズ変更
    4. 垂直方向のボタングループの作成
  6. ドロップダウン
    1. 基本的な使い方
    2. ドロップダウンの方向を変える
    3. メニューの整列の変更
    4. ドロップダウンメニューに様々な要素を組み込む
    5. ドロップダウンにリンクなしのメニュー項目を追加
    6. ドロップダウンのオプション
      1. offset オプション
      2. flip オプション
      3. boundary オプション

フォーム

基本的な使い方

まずは外枠となるフォームグループを作成するため、form-group クラスを設定した div 要素を配置します。

入力フォームに form-control クラスを追加することで、基本的なスタイリングをすることができます。

また、入力フォームにファイル選択の機能を持たせるには、form-control クラスの代わりに form-control-file クラスを追加することで、基本的なスタイリングをすることができます。

<form>
  <div class="form-group">
    <label for="myEmail">メールアドレス</label>
    <input type="email" class="form-control" id="myEmail" aria-describedby="emailhelp" placeholder="メールアドレスを入力">
  </div>
  <div class="form-group">
    <label for="myPassword">パスワード</label>
    <input type="password" class="form-control" id="myPassword" placeholder="パスワードを入力">
  </div>
  <div class="form-group">
    <label for="mySelect">プルダウンメニュー</label>
    <select class="form-control" id="mySelect">
      <option>項目1</option>
      <option>項目2</option>
      <option>項目3</option>
      <option>項目4</option>
      <option>項目5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="mySelect2">プルダウンメニュー</label>
    <select multiple class="form-control" id="mySelect2">
      <option>項目1</option>
      <option>項目2</option>
      <option>項目3</option>
      <option>項目4</option>
      <option>項目5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="myTextarea">テキストエリア</label>
    <textarea class="form-control" id="myTextarea" rows="5"></textarea>
  </div>
  <div class="form-group">
    <label for="myFile">ファイルを選択</label>
    <input type="file" class="form-control-file" id="myFile">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="myCheck">
    <label class="form-check-label" for="myCheck">チェックする</label>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

入力フォームのサイズ変更

form-control クラスが設定された要素に form-control-{ サイズ } クラス(”サイズ”には sm lg が入ります)を追加することで、入力フォームのサイズを変更することができます。

<form>
  <input type="text" class="form-control form-control-sm" placeholder="form-control-sm">
  <input type="text" class="form-control" placeholder="デフォルト">
  <input type="text" class="form-control form-control-lg" placeholder="form-control-lg">
</form>

レンジ入力の作成

<input type=”range”> タグに form-control-range クラスを追加することで、レンジ入力をつくることができます。

<div class="form-group">
  <input type="range" class="form-control-range">
</div>

読み取り専用テキストの枠を非表示

入力フォームに readonly 属性をつけると読み取り専用テキストになりますが、form-control-plaintext クラスを追加することで、その枠を非表示にすることができます。

<div class="form-group">
  <input type="text" class="form-control" readonly value="デフォルト">
</div>
<div class="form-group">
  <input type="text" class="form-control-plaintext" readonly value="form-control-plaintext クラス追加">
</div>

チェックボックス・ラジオボタン

基本的な使い方

form-check クラスを設定した div 要素の中に input 要素と label 要素を配置します。

label 要素には form-check-label クラスを、
input 要素には form-check-input クラスを追加します。


選択無効な項目を設定するには、form-check-input クラスが設定された要素に disabled 属性を追加します。

<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="check1">
  <label class="form-check-label" for="check1">チェックボックス1</label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="check2">
  <label class="form-check-label" for="check2">チェックボックス2</label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="check3" disabled>
  <label class="form-check-label" for="check3">チェックボックス3</label>
</div>
<br>
<div class="form-check">
  <input type="radio" class="form-check-input" name="myRadio" value="" id="radio1">
  <label class="form-check-label" for="radio1">ラジオボタン1</label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" name="myRadio" value="" id="radio2">
  <label class="form-check-label" for="radio2">ラジオボタン2</label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" name="myRadio" value="" id="radio3" disabled>
  <label class="form-check-label" for="radio3">ラジオボタン3</label>
</div>

項目を横並びにする

form-check クラスが設定された要素に form-check-inline クラスを追加することで、選択項目を横並びにすることができます。

<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" value="" id="check1">
  <label class="form-check-label" for="check1">チェックボックス1</label>
</div>
<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" value="" id="check2">
  <label class="form-check-label" for="check2">チェックボックス2</label>
</div>
<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" value="" id="check3" disabled>
  <label class="form-check-label" for="check3">チェックボックス3</label>
</div>

レイアウトの調整

グリッドレイアウト

row クラスを設定した要素で form-group クラスが設定された要素を囲み、それに col-* クラスcol-{ ブレイクポイント }-* クラスを追加することで、フォームをグリッドレイアウトで配置することができます。

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="性">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="名">
    </div>
  </div>
</form>

カラム間隔をコンパクトに

div 要素に設定した row クラスを form-row クラスに変更することで、カラム間隔をコンパクトにすることができます。

<h5>row クラス</h5>
<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="性">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="名">
    </div>
  </div>
</form>
<br>
<h5>form-row クラス</h5>
<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="性">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="名">
    </div>
  </div>
</form>

水平配置のフォームの作成

ラベルと入力フォームのレイアウトにもグリッドレイアウトを組み込むことができ、それらを水平に配置することができます。

まず、フォームグループに row クラスを追加して行をつくります。

そして、ラベルと入力フォームに col-{ ブレイクポイント }-* クラスを追加することで、幅とブレイクポイントを設定することができます。

  <form>
    <div class="form-group row">
      <label for="myEmail" class="col-sm-2 col-form-label">メールアドレス</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="myEmail" aria-describedby="emailhelp" placeholder="メールアドレスを入力">
      </div>
    </div>
    <div class="form-group row">
      <label for="myPassword" class="col-sm-2 col-form-label">パスワード</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="myPassword" placeholder="パスワードを入力">
      </div>
    </div>
    <div class="form-group row">
      <label for="mySelect" class="col-sm-2 col-form-label">プルダウンメニュー</label>
      <div class="col-sm-10">
        <select class="form-control" id="mySelect">
          <option>項目1</option>
          <option>項目2</option>
          <option>項目3</option>
          <option>項目4</option>
          <option>項目5</option>
        </select>
      </div>
    </div>
    <div class="form-group row">
      <label for="myTextarea" class="col-sm-2 col-form-label">テキストエリア</label>
      <div class="col-sm-10">
        <textarea class="form-control" id="myTextarea" rows="5"></textarea>
      </div>
    </div>
    <div class="form-group row">
      <label for="myFile" class="col-sm-2 col-form-label">ファイルを選択</label>
      <div class="col-sm-10">
        <input type="file" class="form-control-file" id="myFile">
      </div>
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
  </form>

ラベルのサイズ変更

label 要素に col-form-label-{ サイズ } クラスを追加することで、入力フォームのサイズに合わせてラベルのサイズを変更することができます。

<div class="form-group row">
  <label for="sm" class="col-sm-3 col-form-label col-form-label-sm">col-form-label-sm</label>
  <div class="col-sm-9">
    <input type="text" class="form-control form-control-sm" id="sm" placeholder="form-control-sm">
  </div>
</div>
<div class="form-group row">
  <label for="def" class="col-sm-3 col-form-label">デフォルト</label>
  <div class="col-sm-9">
    <input type="text" class="form-control" id="def" placeholder="デフォルト">
  </div>
</div>
<div class="form-group row">
  <label for="lg" class="col-sm-3 col-form-label col-form-label-lg">col-form-label-lg</label>
  <div class="col-sm-9">
    <input type="text" class="form-control form-control-lg" id="lg" placeholder="form-control-lg">
  </div>
</div>

カラム幅を自動調整

col-* クラスや col-{ ブレイクポイント }-* クラスの代わりに col-auto クラスを追加することで、内容にあわせて幅が自動調節されるカラムをつくることができます。

ラベルや入力フォームを垂直方向の中央に揃えるには、row または form-row クラスが設定された要素に align-items-center クラスを追加します。

<h5>デフォルト</h5>
<div class="form-group form-row">
  <div class="col">
    <label for="name" class="sr-only">氏名</label>
    <input type="text" class="form-control" id="name" placeholder="氏名">
  </div>
  <div class="col">
    <label for="username" class="sr-only">ユーザーネーム</label>
    <input type="text" class="form-control" id="username" placeholder="ユーザーネーム">
  </div>
  <div class="col">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check">
      <label for="check" class="form-check-label">チェック</label>
    </div>
  </div>
  <div class="col">
    <button type="submit" class="btn btn-primary">送信</button>
  </div>
</div>
<h5>col-auto クラス追加</h5>
<div class="form-group form-row">
  <div class="col-auto">
    <label for="name" class="sr-only">氏名</label>
    <input type="text" class="form-control" id="name" placeholder="氏名">
  </div>
  <div class="col-auto">
    <label for="username" class="sr-only">ユーザーネーム</label>
    <input type="text" class="form-control" id="username" placeholder="ユーザーネーム">
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check">
      <label for="check" class="form-check-label">チェック</label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">送信</button>
  </div>
</div>
<h5>col-auto クラス + align-items-center クラス追加</h5>
<div class="form-group form-row align-items-center">
  <div class="col-auto">
    <label for="name" class="sr-only">氏名</label>
    <input type="text" class="form-control" id="name" placeholder="氏名">
  </div>
  <div class="col-auto">
    <label for="username" class="sr-only">ユーザーネーム</label>
    <input type="text" class="form-control" id="username" placeholder="ユーザーネーム">
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="check">
      <label for="check" class="form-check-label">チェック</label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">送信</button>
  </div>
</div>

横並びのフォームを作成

form 要素に form-inline クラスを追加することで、画面幅576px以上のときに、ラベル、入力フォーム、ボタンをインライン表示にすることができます。

<form class="form-inline">
  <label for="name" class="sr-only">氏名</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名">
  <label for="username" class="sr-only">ユーザーネーム</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="username" placeholder="ユーザーネーム">
  <div class="form-check mb-2 mr-sm-2">
    <input type="checkbox" class="form-check-input" id="check">
    <label for="check" class="form-check-label">チェック</label>
  </div>
  <button type="submit" class="btn btn-primary mb-2">送信</button>
</form>

ヘルプテキストの表示

入力フォームの下にヘルプテキスト(パスワードを作る際の注意事項など)を配置するには、テキスト要素に form-text クラスを追加します。

text-muted クラスを追加すると、文字をグレーに変更することができます。


また、をつい入力フォームに aria-describedby=”(ヘルプテキストの id 名)”を追加することで、スクリーンリーダーにヘルプテキストと入力フォームの関連性を伝えます。

<form>
  <label for="password">パスワード</label>
  <input type="password" id="password" class="form-control" aria-describedby="passwordHelpBlock">
  <small id="passwordHelpBlock" class="form-text text-muted">パスワードは8文字以上で、文字と数字を含める必要があります。</small>
</form>

フォームグループをまとめて無効化する

グループ化されている一連の入力フォームをまとめて無効化する場合は、fieldset 要素に disabled 属性を追加します。

  <form>
    <div class="form-group">
      <label for="myEmail">メールアドレス</label>
      <input type="email" class="form-control" id="myEmail" placeholder="メールアドレスを入力">
    </div>
    <div class="form-group">
      <label for="myPassword">パスワード</label>
      <input type="password" class="form-control" id="myPassword" placeholder="パスワードを入力">
    </div>
    <hr>
    <fieldset disabled>
      <div class="form-group">
        <label for="myEmail">メールアドレス</label>
        <input type="email" class="form-control" id="myEmail" placeholder="無効">
      </div>
      <div class="form-group">
        <label for="myPassword">パスワード</label>
        <input type="password" class="form-control" id="myPassword" placeholder="無効">
      </div>
    </fieldset>
  </form>

カスタムフォームの使用

Bootstrap独自のスタイルを使ってフォームをカスタマイズする方法を紹介します。

カスタムフォームのチェックボックス・ラジオボタン

親要素となる div 要素に custom-control クラスを追加し、

チェックボックスの場合はさらに custom-checkbox クラスを、
ラジオボックスの場合はさらに custom-radio クラスを追加します。

次に、input 要素に custom-control-input クラスを、
label 要素に custom-control-label クラスを追加して独自スタイルを適用します。

  <form>
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="check1">
      <label for="check1" class="custom-control-label">チェックボックス</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" name="option" id="radio1">
      <label for="radio1" class="custom-control-label">ラジオボタン</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" name="option" id="radio2">
      <label for="radio2" class="custom-control-label">ラジオボタン</label>
    </div>
  </form>

カスタムフォームのプルダウンメニュー

select 要素に custom-select クラスを追加します。

<form>
  <select class="custom-select">
    <option selected>選択してください</option>
    <option value="項目1">項目1</option>
    <option value="項目2">項目2</option>
    <option value="項目3">項目3</option>
  </select>
</form>



サイズを変更するには、custom-select-{ サイズ } クラス(”サイズ”には smlg が入ります)をさらに追加します。

<form>
  <select class="custom-select custom-select-sm mb-3">
    <option selected>custom-select-sm</option>
    <option value="項目1">項目1</option>
    <option value="項目2">項目2</option>
    <option value="項目3">項目3</option>
  </select>
  <select class="custom-select mb-3">
    <option selected>標準サイズ</option>
    <option value="項目1">項目1</option>
    <option value="項目2">項目2</option>
    <option value="項目3">項目3</option>
  </select>
  <select class="custom-select custom-select-lg">
    <option selected>custom-select-lg</option>
    <option value="項目1">項目1</option>
    <option value="項目2">項目2</option>
    <option value="項目3">項目3</option>
  </select>
</form>



複数選択メニューを作るには、custom-select クラスが設定された要素に multiple 属性を追加し、
表示する選択肢の数を指定するには size 属性を追加します。

<form>
  <select class="custom-select mb-3" multiple size="3">
    <option value="項目1">項目1</option>
    <option value="項目2">項目2</option>
    <option value="項目3">項目3</option>
    <option value="項目4">項目4</option>
    <option value="項目5">項目5</option>
  </select>
</form>

カスタムフォームのファイル選択

custom-file クラスを設定した親要素の中の input 要素に custom-file-input クラスを追加します。

<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile" lang="ja">
    <label for="customFile" class="custom-file-label">ファイル選択</label>
  </div>  
</form>

カスタムフォームのレンジ入力

type=”range” が設定された input 要素に custom-range クラスを追加することで実装できます。


カスタムレンジ入力は、デフォルトで1~100の範囲の値を持っており、この範囲を変更するには min 属性(最小値)と max 属性(最大値)を使用します。

また、1ステップ移動するのにいくら動かす必要があるかを設定するには step 属性を用います。

<div class="form-group mb-5">
  <label for="customRange1">カスタムレンジ入力のデフォルト</label>
  <input type="range" class="custom-range" id="customRange1">
</div>
<div class="form-group mb-5">
  <label for="customRange2">min="0" max="10"</label>
  <input type="range" class="custom-range" min="0" max="10" id="customRange2">
</div>
<div class="form-group">
  <label for="customRange3">min="0" max="10" step="2"</label>
  <input type="range" class="custom-range" min="0" max="10" step="2" id="customRange3">
</div>

入力グループ

基本的な使い方

入力フォームの隣にアドオンを配置する場合、input-group クラスを設定した div 要素でアドオンと入力フォームを囲みます。


アドオンをつくるには、div 要素に input-group-{ 位置 } クラスを追加します。

アドオンを入力フォームの前に設置する場合は、”位置”に prepend を、
後ろに設置する場合は append を入れます。

そして、その子要素に input-group-text クラスを設定した span 要素を追加してアドオンを配置します。

<h5>input-group-prepend</h5>
<div class="input-group mb-5">
  <div class="input-group-prepend">
    <span class="input-group-text" id="myAddon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="myAddon1">
</div>
<h5>input-group-append</h5>
<div class="input-group">
  <input type="text" class="form-control" placeholder="メールアドレス" aria-label="メールアドレス" aria-describedby="myAddon2">
  <div class="input-group-append">
    <span class="input-group-text" id="myAddon2">@example.com</span>
  </div>
</div>

ラベル付き入力グループ

入力グループにラベルをつける場合は、入力グループのに label 要素を配置します。

<label for="myEmail">メールアドレス</label>
<div class="input-group">
  <input type="text" class="form-control" id="myEmail" aria-describedby="myAddon">
  <div class="input-group-append">
    <span class="input-group-text" id="myAddon">@example.com</span>
  </div>
</div>

入力グループのサイズ変更

input-group クラスを設定した要素に input-group-{ サイズ } クラス(”サイズ”には smlg が入ります)を追加することで、入力グループのサイズを変更することができます。

<h5>input-group-sm</h5>
<div class="input-group input-group-sm mb-5">
  <input type="text" class="form-control" placeholder="メールアドレス" aria-label="メールアドレス" aria-describedby="myAddon1">
  <div class="input-group-append">
    <span class="input-group-text" id="myAddon1">@example.com</span>
  </div>
</div>
<h5>デフォルト</h5>
<div class="input-group mb-5">
  <input type="text" class="form-control" placeholder="メールアドレス" aria-label="メールアドレス" aria-describedby="myAddon2">
  <div class="input-group-append">
    <span class="input-group-text" id="myAddon2">@example.com</span>
  </div>
</div>
<h5>input-group-lg</h5>
<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="メールアドレス" aria-label="メールアドレス" aria-describedby="myAddon3">
  <div class="input-group-append">
    <span class="input-group-text" id="myAddon3">@example.com</span>
  </div>
</div>

チェックボックス・ラジオボタンのアドオン

input-group-text クラスを設定した要素の子要素をチェックボックスやラジオボタンに変更することで、それらのアドオンをつくることができます。

<h5>チェックボックスのアドオン</h5>
<div class="input-group mb-5">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label="次のテキスト入力欄用のチェックボックス">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="チェックボックス付きテキスト入力欄">
</div>
<h5>ラジオボタンのアドオン</h5>
<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" aria-label="次のテキスト入力欄用のラジオボタン">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="ラジオボタン付きテキスト入力欄">
</div>

入力グループに複数の入力フォーム

入力グループに複数の input 要素を含めてグループ化することができます。

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">お名前</span>
  </div>
  <input type="text" class="form-control" placeholder="姓">
  <input type="text" class="form-control" placeholder="名">
</div>

ボタン付きアドオン

アドオンにはボタンのコンポーネントも組み込むことができます。

<div class="input-group">
  <input type="text" class="form-control" placeholder="検索キーワード" aria-label="検索キーワード" aria-describedby="myAddon">
  <div class="input-group-append">
    <button type="button" class="btn btn-primary">検索</button>
  </div>
</div>

ドロップダウン付きアドオン

アドオンにはドロップダウンのコンポーネントも組み込むことができます。

標準的なドロップダウン

<div class="input-group">
  <input type="text" class="form-control" aria-label="ドロップダウン付きテキスト入力欄">
  <div class="input-group-append">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item">項目1</a>
      <a href="#" class="dropdown-item">項目2</a>
      <a href="#" class="dropdown-item">項目3</a>
    </div>
  </div>
</div>

スプリットボタンのドロップダウン

ボタン本体とキャレットアイコン(▼)を分離したスプリットボタンをつくることができます。

本体となるボタンを配置した後、キャレットアイコンとなるボタンを配置し、そのボタンに dropdown-toggle クラスdropdown-toggle-split クラスを追加します。

<div class="input-group">
  <input type="text" class="form-control" aria-label="ドロップダウン付きテキスト入力欄">
  <div class="input-group-append">
    <button type="button" class="btn btn-primary">ドロップダウン</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">ドロップダウン切り替え</span>
    </button>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item">項目1</a>
      <a href="#" class="dropdown-item">項目2</a>
      <a href="#" class="dropdown-item">項目3</a>
    </div>
  </div>
</div>

ボタン

基本的な使い方

button 要素や a 要素、input 要素に btn クラスbtn-{ 色の種類 } クラスを追加してつくります。

button 要素のボタン

<button type="button" class="btn btn-primary">btn-primary</button>
<button type="button" class="btn btn-secondary">btn-secondary</button>
<button type="button" class="btn btn-success">btn-success</button>
<button type="button" class="btn btn-danger">btn-danger</button>
<button type="button" class="btn btn-warning">btn-warning</button>
<button type="button" class="btn btn-info">btn-info</button>
<button type="button" class="btn btn-light">btn-light</button>
<button type="button" class="btn btn-dark">btn-dark</button>
<button type="button" class="btn btn-link">btn-link</button>

a 要素、input 要素のボタン

a 要素でボタンを作る場合は role=”button” を追加し、スクリーンリーダーにこのコンポーネントがボタンの役割であることが伝えます。

<a href="#" class="btn btn-primary" role="button">a 要素</a>
<input type="button" class="btn btn-primary" value="input 要素">

アウトラインボタンの作成

背景色のないボタンを作るには、btn-{ 色の種類 } クラスを btn-outline-{ 色の種類 } クラスに変更します。

<button type="button" class="btn btn-outline-primary">btn-primary</button>
<button type="button" class="btn btn-outline-secondary">btn-secondary</button>
<button type="button" class="btn btn-outline-success">btn-success</button>
<button type="button" class="btn btn-outline-danger">btn-danger</button>
<button type="button" class="btn btn-outline-warning">btn-warning</button>
<button type="button" class="btn btn-outline-info">btn-info</button>
<button type="button" class="btn btn-outline-light">btn-light</button>
<button type="button" class="btn btn-outline-dark">btn-dark</button>

ボタンサイズの変更

btn クラスが設定された要素に btn-{ サイズ } クラス(”サイズ”には smlg が入ります)を追加することでボタンのサイズを変更できます。

<button type="button" class="btn btn-sm btn-primary">btn-sm</button>
<button type="button" class="btn btn-primary">デフォルト</button>
<button type="button" class="btn btn-lg btn-primary">btn-lg</button>

ブロックレベルのボタンの作成

btn クラスが設定された要素に btn-block クラスを追加することで、ブロックレベルのボタンをつくることができます。

<button type="button" class="btn btn-block btn-primary">ボタン</button>

ボタンの状態の変更

ボタンをアクティブ状態にするには、btn クラスが設定された要素に active クラスを追加します。

また、aria-pressed=”true” を追加することで、スクリーンリーダーにアクティブな状態であることを伝えることができます。

ボタンを無効状態にするには、btn クラスが設定された要素に disabled 属性を追加します。
(a 要素は disabled 属性をサポートしていないため、disabled クラスを追加する必要があります)

また、aria-pressed=”true” を追加することで、スクリーンリーダーに無効状態であることを伝えることができます。

<button type="button" class="btn btn-primary">ボタン</button>
<button type="button" class="btn btn-primary active" aria-pressed="true">アクティブボタン</button>
<button type="button" class="btn btn-primary" disabled aria-disabled="true">無効ボタン</button>

切り替えボタンの作成

btn クラスが設定された要素に、data-toggle=”button”autocomplete=”off”(ブラウザの入力補完機能を無効)を追加します。

あらかじめボタンをプッシュ状態にしておくには active クラスを追加し、スクリーンリーダーにボタンが押されている状態であることを伝えるため aria-pressed=”true” を追加します。

<button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true" autocomplete="off">ボタン</button>

チェックボックス・ラジオボタンをボタン風に

label 要素に btn クラスbtn-{ 色の種類 } クラスを追加し、その親要素には btn-group クラスdata-toggle=”buttons” を追加します。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked autocomplete="off"> チェックボックス1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> チェックボックス2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> チェックボックス3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" checked autocomplete="off"> ラジオボタン1
  </label>
  <label class="btn btn-primary">
    <input type="radio" autocomplete="off"> ラジオボタン2
  </label>
  <label class="btn btn-primary">
    <input type="radio" autocomplete="off"> ラジオボタン3
  </label>
</div>

ボタングループ

基本的な使い方

複数のボタンのコンポーネントをグループ化したボタングループをつくるには、親要素に btn-group クラスを追加します。

また、アクセシビリティへの配慮として、role=”group”aria-label 属性を追加します。

<div class="btn-group" role="group" aria-label="基本的な使い方">
  <button type="button" class="btn btn-primary">ボタン1</button>
  <button type="button" class="btn btn-primary">ボタン2</button>
  <button type="button" class="btn btn-primary">ボタン3</button>
</div>

ボタンツールバーの作成

複数のボタングループを含むボタンツールバーをつくるには、
div 要素に btn-toolbar クラスを追加して複数のボタンを囲むことで実装できます。

また、アクセシビリティへの配慮として、role=”toolbar”aria-label 属性を追加します。

<div class="btn-group" role="toolbar" aria-label="ボタンツールバー">
  <div class="btn-group mr-2" role="group" aria-label="ボタングループ1">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="ボタングループ2">
    <button type="button" class="btn btn-primary">4</button>
    <button type="button" class="btn btn-primary">5</button>
    <button type="button" class="btn btn-primary">6</button>
    <button type="button" class="btn btn-primary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="ボタングループ3">
    <button type="button" class="btn btn-primary">8</button>
    <button type="button" class="btn btn-primary">9</button>
  </div>
</div>

ボタングループのサイズ変更

btn-group が設定された要素に btn-group-{ サイズ } クラス(”サイズ”には smlg が入ります)を追加してボタングループのサイズを変更することができます。

<div class="btn-group btn-group-sm mb-3" role="group" aria-label="グループ1">
  <button type="button" class="btn btn-primary">ボタン1</button>
  <button type="button" class="btn btn-primary">ボタン2</button>
  <button type="button" class="btn btn-primary">ボタン3</button>
</div>
<br>
<div class="btn-group mb-3" role="group" aria-label="グループ2">
  <button type="button" class="btn btn-primary">ボタン1</button>
  <button type="button" class="btn btn-primary">ボタン2</button>
  <button type="button" class="btn btn-primary">ボタン3</button>
</div>
<br>
<div class="btn-group btn-group-lg" role="group" aria-label="グループ3">
  <button type="button" class="btn btn-primary">ボタン1</button>
  <button type="button" class="btn btn-primary">ボタン2</button>
  <button type="button" class="btn btn-primary">ボタン3</button>
</div>

垂直方向のボタングループの作成

btn-group クラスを btn-group-vertical クラスに置き換えることで、垂直方向のボタングループをつくることができます。

<div class="btn-group-vertical" role="group">
  <button type="button" class="btn btn-primary">ボタン1</button>
  <button type="button" class="btn btn-primary">ボタン2</button>
  <button type="button" class="btn btn-primary">ボタン3</button>
</div>

ドロップダウン

基本的な使い方

このコンポーネントは、button 要素か a 要素でつくります。

まず、dropdown クラスを設定した要素で切り替えボタンとドロップダウンメニューを囲みます。


切り替えボタンは、button 要素か a 要素に btn クラスbtn-{ 色の種類 } クラスを設定したボタンに、dropdown-toggle クラスdata-toggle=”dropdown” を追加してつくります。

ドロップダウンメニューは、dropdown-menu クラスを設定した親要素でメニューの枠をつくり、dropdown-item クラスを設定した子要素でメニュー項目をつくります。


アクセシビリティへの配慮として、
aria-haspopup=”true” でポップアップが含まれていることを、
aria-expanded=”false” で切り替えが非表示であることを、
aria-labelledby=”(切り替えボタンの id)” で要素のラベルとして関連していることを伝えます。


また、切り替えボタンの作成に a 要素を使用した場合は、コンポーネントの役割がボタンであることを伝えるために role=”button” を追加します。

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton">
    ドロップダウン
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a href="#" class="dropdown-item">項目1</a>
    <a href="#" class="dropdown-item">項目2</a>
    <a href="#" class="dropdown-item">項目3</a>
  </div>
</div>

ドロップダウンの方向を変える

ドロップダウンの方向を変更する場合は、dropdown クラスが設定された要素に以下のクラスを追加します。

上向き→dropup
右向き→dropright
左向き→dropleft

<div class="dropdown dropright">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton">
    右向き
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a href="#" class="dropdown-item">項目1</a>
    <a href="#" class="dropdown-item">項目2</a>
    <a href="#" class="dropdown-item">項目3</a>
  </div>
</div>

メニューの整列の変更

デフォルトでは、ドロップダウンメニューと切り替えボタンは左揃えに配置されます。

これを右揃えに変更するには、dropdown-menu クラスが設定された要素に dropdown-menu-right クラスを追加します。

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    右揃えのドロップダウン
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <a href="#" class="dropdown-item">項目1</a>
    <a href="#" class="dropdown-item">項目2</a>
    <a href="#" class="dropdown-item">項目3</a>
  </div>
</div>

ドロップダウンメニューに様々な要素を組み込む

ドロップダウンメニュー内には、見出しやフォーム、区切り線などを含めることができます。

見出しを配置するには、見出し要素に dropdown-header クラスを追加します。

フォームを配置する場合は特にクラスは必要ありません。

区切り線を配置するには、div 要素に dropdown-divider クラスを追加します。

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップダウン
  </button>
  <div class="dropdown-menu">
    <h5 class="dropdown-header">見出し</h5>
    <form class="px-4 py-3">
      <div class="form-group">
        <label for="myEmail">メールアドレス</label>
        <input type="email" class="form-control" id="myEmail" placeholder="メールアドレスを入力">
      </div>
      <div class="form-group">
        <label for="myPassword">パスワード</label>
        <input type="password" class="form-control" id="myPassword" placeholder="パスワードを入力">
      </div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="myCheck">
        <label for="myCheck" class="form-check-label">ログイン情報を記憶</label>
      </div>
      <button type="button" class="btn btn-primary mt-2">ログイン</button>
    </form>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">パスワードをお忘れの方</a>
  </div>
</div>

ドロップダウンにリンクなしのメニュー項目を追加

メニュー項目に dropdown-item-text クラスを追加することで、リンクなしのメニュー項目をつくることができます。

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップダウン
  </button>
  <div class="dropdown-menu">
    <span class="dropdown-item-text">リンクなし項目</span>
    <a href="#" class="dropdown-item">項目1</a>
    <a href="#" class="dropdown-item">項目2</a>
    <a href="#" class="dropdown-item">項目3</a>
  </div>
</div>

ドロップダウンのオプション

dropdown-toggle クラスが設定された要素に data-{ オプション名 } 属性を追加することで、JavaScript の機能を利用することができます。

offset オプション

offset はドロップダウンの配置する位置を設定するオプションです。

data-offset=”(右へ移動する距離)” や、
data-offset=”(右へ移動する距離),(下へ移動する距離)”

のように指定します。


たとえば、data-offset=”10,20″ のように値を二つ指定すると、右へ10px、下へ20px移動した位置に配置されます。

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-offset="10,20" aria-haspopup="true" aria-expanded="false">
    ドロップダウン
  </button>
  <div class="dropdown-menu">
    <span class="dropdown-item-text">リンクなし項目</span>
    <a href="#" class="dropdown-item">項目1</a>
    <a href="#" class="dropdown-item">項目2</a>
    <a href="#" class="dropdown-item">項目3</a>
  </div>
</div>

flip オプション

flip は、ドロップダウンを表示させるスペースがない場合に反対側へ表示させるオプションです。

<div class="dropdown dropleft">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-flip="true" aria-haspopup="true" aria-expanded="false">
    ドロップダウン
  </button>
  <div class="dropdown-menu">
    <span class="dropdown-item-text">リンクなし項目</span>
    <a href="#" class="dropdown-item">項目1</a>
    <a href="#" class="dropdown-item">項目2</a>
    <a href="#" class="dropdown-item">項目3</a>
  </div>
</div>
本来は左側にドロップメニューが表示されるが、スペースがないため反対側に表示される

boundary オプション

boundary は、ドロップダウンメニューの表示領域の境界を設定します。

たとえば、data-boundary=”scrollParent” と設定すると、スクロールウィンドウからはみ出る部分が表示されなくなります。

<div class="bg-secondary" style="width:250px;height:250px;overflow:scroll;">
  <br><br><br>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-boundary="scrollParent">
      ドロップダウン
    </button>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item">項目1だあああああああああああああああ</a>
      <a href="#" class="dropdown-item">項目2だあああああああああああああああ</a>
      <a href="#" class="dropdown-item">項目3だあああああああああああああああ</a>
    </div>
  </div>
</div>






今回は以上になります。

ご覧いただきありがとうございました(^^)
続きはこちら↓

コメント

コンタクトフォーム

    タイトルとURLをコピーしました