Bootstrap3に用意されているクラス【ドロップダウン編】

2016年7月24日2023年9月30日

ドロップダウン

dropdown

基本

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    ドロップダウン
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー4</a></li>
  </ul>
</div>

dropdown-header

見出し

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">タイトル1</li>
  ...
</ul>

divider

分割線

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

disabled

使用不可

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">メニュー1</a></li>
  <li class="disabled"><a href="#">メニュー2</a></li>
  <li><a href="#">メニュー3</a></li>
</ul>

ドロップダウンボタンの色変更

btn btn-***

.btn .btn-***でドロップダウンボタンの色を変更することができます。

<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="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">メニュー4</a></li>
  </ul>
</div>

分割ドロップダウンボタン

buttonとbuttonを分割することができます。

<div class="btn-group">
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">メニュー4</a></li>
  </ul>
</div>

ドロップダウンボタンのサイズ

.btn .btn-***でドロップダウンボタンのサイズを変更することができます。

btn-lg

Lサイズ

<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

btn-sm

Sサイズ

<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

btn-xs

XSサイズ

<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>