目次
ドロップダウン
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>