Bootstrap4 Dropdown(ドロップダウン)の使い方を徹底解説

Bootstrap4で利用できるDropdown(ドロップダウン)の使い方をご紹介します。
 

ドロップダウンメニューの基本的な使い方

Bootstrapのでは下記のようなドロップダウンメニューを利用することができます。
 

■ドロップダウンメニュー 表示例

■ソースコード

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    各コース詳細はこちら
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a href="#" class="dropdown-item">6ヶ月コース</a>
    <a href="#" class="dropdown-item">1ヶ月コース</a>
    <a href="#" class="dropdown-item">マンツーマンコース</a>
  </div>
</div>

(※)色を変えたい場合は、btn-{color}で設定できます。詳しくはこちらをご覧ください。

Bootstrap4 Button(ボタン)の使い方を徹底解説

リスト項目間にセパレーター(線)を入れる

各dropdown-itemの間にセパレーター(線)を入れる場合は、dropdown-dividerクラスをつけたdivタグを間に挟みます。

■表示例

 

■上記のソースコード

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    各コース詳細はこちら
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a href="#" class="dropdown-item">6ヶ月コース</a>
    <a href="#" class="dropdown-item">1ヶ月コース</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">マンツーマンコース</a>
  </div>
</div>

スプリット(分割)ボタンを作る

Bootstrapでは、ボタングループを利用して、スプリット(分割)ボタンを作ることができます。
 

■表示例

■上記のソースコード

<div class="btn-group">
  <button type="button" class="btn btn-secondary">コース選択</button>
  <button type="button" class="btn btn-dark dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">ライトコース</a>
    <a class="dropdown-item" href="#">スタンダードコース</a>
    <a class="dropdown-item" href="#">プロフェッショナルコース</a>
  </div>
</div>

ドロップダウンメニューにはいくつかのオプションがあり、オプションにより少しずつ動きが変わってきますので、詳しくは下記の公式サイトをご参照ください。
Dropdowns | Bootstrap 4.3
 

まとめ

いかがでしたでしょうか。
 

今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)4のボタン(Button)のDropdownの使い方をご紹介しました。
 

使用頻度が低いためここでは割愛しましたが、ほかにもいくつかの使い方があります。公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。
 

Dropdowns | Bootstrap 4.3
 

今回は、以上になります。最後までご覧いただきありがとうございました。