ブートストラップ-コンポーネントの実用的なドロップダウンメニュー

ドロップダウンメニューは、Webページの構築に広く使用されています。ブートストラップは、いくつかのクラスを呼び出して属性を追加するだけで実装できます。
基本例

リンクのリストを表示するための切り替え可能なコンテキストメニュー。ドロップダウンメニューのJavaScriptプラグインにより、インタラクティブになります。
重要なのは.dropdown .dropup、ドロップダウン（下、上）を制御する親要素の方向です。次に、要素の属性があり、data-toggle="dropdown"最後にリストでclass="dropdown-menu", aria-labelledby="dLabel"

インスタンスコードを指定します

<div class="dropdown">
  <button id="dLabel"  data-toggle="dropdown">
    下拉菜单的承载
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    <li><a href="#">下拉菜单的内容</a></li>
  </ul>
</div>

整列

デフォルトでは、ドロップダウンメニューは、親要素の上部と左側に沿って100％の幅で自動的に配置されます。.dropdown-menu.dropdown-menu-rightクラスに追加すると、メニューが右揃えになります。

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

題名

アクションのグループは、任意のドロップダウンメニューにタイトルを追加することでマークできます。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

境界線

ドロップダウンメニューに分割線を追加して、複数のリンクをグループ化します。

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

無効なメニュー項目

プルダウンメニュー<li>を使用して.disabledearth要素を追加し、適切なメニュー項目を無効にします。これはCSSスタイルのクラスと同じです

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</u