Bootstrap 3.0 #05(ドロップダウンメニュー)

  • btn-groupというdivを作る
  • button要素のクラス指定
  • toggle(トグル)…ON/OFFの切り替えの仕組みのこと
  • caret(キャレット)…「^」の記号のこと、▼が表示される
  • span要素…インラインレベルのグループ、divと似てるけどdivはブロックレベル
  • button要素の指定ができれば、あとは作り方はパンくずとかといっしょ
  • li class="divider"で仕切り線ができる
<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Menu <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="">menu1</a></li>
    <li><a href="">menu2</a></li>
    <li class="divider"></li>
    <li><a href="">menu3</a></li>
  </ul>
</div>
caret部分を独立させたいとき
  <button class="btn btn-primary">Menu</button>
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>