Bootstrap3 Dropdownの簡単な使い方

Pocket

ナビゲーションメニューなどで今やなくてはならない、Dropdown。自分でコード書いて実装しようとすると結構難しいのですが、Bootstrap3なら簡単なHTML構造とclassの追加ですぐに作れてしまいます。

ここではBootstrap3に用意されているDropdownの簡単な使い方を紹介します。

Bootstrap3 Dropdownの使い方

基本的なDropdownの使い方

ボタンやパンくずリストなどシンプルなコンポーネントに比べて、少し複雑になっているDropdownですが、覚えるポイントを押さえればわりと簡単に理解できます。

Dropdownを構成するパーツは大きく分けて2つ。.dropdown-toggle.dropdown-menuです。この2つを.dropdownclassで囲むことでDropdownを作ることができます。

Class名 概要
.dropdown トグルとメニューを囲む要素に記述
.dropup トグルとメニューを囲む要素に記述
.doropdown > .dropdown-toggle メニューを開くボタン
.doropdown > .dropdown-menu ボタンを押すと開くメニュー
.dropdown-menu.dropdown-menu-right 右端を揃えてドロップダウンメニューを表示
.dropdown-menu > .dropdown-header メニュー内のヘッダー
.dropdown-menu > .divider メニューの分割
.dropdown-menu > .disabled 無効リンクを表示
<!-- navで使う -->
<ul class="nav nav-pills">
  <li><a href="#">通常のリンク</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">通常のDropdown <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Header</li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
      <li class="disabled"><a href="#">Disabled link</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">右揃え <span class="caret"></span></a>
    <ul class="dropdown-menu dropdown-menu-right">
      <li class="dropdown-header">Header</li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
      <li class="disabled"><a href="#">Disabled link</a></li>
    </ul>
  </li>
</ul>

デモページはこちら

ボタンと組み合わせたDropdownの使い方

Dropdownのトグルボタンはaタグだけでなく、ボタンを使用することも可能。ボタン部分はカラーの変更や、サイズ変更が可能です。

また、ボタンで使用する場合は.dropdownではなく.btn-groupで囲みます。

Class名 概要
.btn-group > .btn.dropdown-toggle ボタンを使ったDropdownを作る
<!-- ボタン + Dropdown -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    通常のボタン <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu</a></li>
    <li><a href="#">Menu</a></li>
  </ul>
</div>

<!-- ボタンの色を変更 -->
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    青いボタン <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu</a></li>
    <li><a href="#">Menu</a></li>
  </ul>
</div>

<!-- ボタンのサイズを変更 -->
<div class="btn-group">
  <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    大きいボタン <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu</a></li>
    <li><a href="#">Menu</a></li>
  </ul>
</div>

デモページはこちら