トップページ >  Bootstrap >  Bootstrapのドロップダウン
初版2014/07/06： 最終更新日2014/07/06
  Bootstrapのドロップダウン
目次
・Bootstrapのドロップダウン
・罫線を入れる
Bootstrapのドロップダウン
Bootstrapのドロップダウンを表示するには、まずbuttonをbtn-groupで囲み、buttonのクラスにdropdown-toggle属性を追加します。
また、data-toggle="dropdown"を指定する必要があります。

<div class="container">
  <div class="btn-group">
    <button class="dropdown-toggle" data-toggle="dropdown">ファイル</button>
  </div>
</div>

ドロップダウンのデザインのDEMOです。

これでボタンが表示されましたが押してもドロップダウンが表示されません。
ドロップダウンを表示するにはbuttonの後ろにulとliでリストを作成します。
ulにはdropdown-menuクラスを追加します。liにはクラスは不要です。

<div class="btn-group">
  <button class="dropdown-toggle" data-toggle="dropdown">ファイル</button>
  <ul class="dropdown-menu">
    <li><a href="#">上書き保存</a></li>
    <li><a href="#">名前を付けて保存</a></li>
  </ul>
</div>

ドロップダウンのDEMOです。

罫線を入れる
良くソフトのツールバー（例えばサンダーバード）でツールバーからドロップダウンを選ぶと罫線が入っていたりするのを見かけます。
bootstrapのドロップダウンでも罫線を入れることが簡単にできます。
罫線を入れたい位置で以下を挿入するだけです。

<li class="divider"></li>

このliタグを入れることによって罫線が挿入されます。

<div class="btn-group">
  <button class="dropdown-toggle" data-toggle="dropdown">ファイル</button>
  <ul class="dropdown-menu">
    <li><a href="#">上書き保存</a></li>
    <li><a href="#">名前を付けて保存</a></li>
    <li class="divider"></li>
    <li><a href="#">終了</a></li>
  </ul>
</div>

罫線を入れたドロップダウンのDEMOです。

HOME