ブートストラップはドロップダウン メニューのeffect_javascriptスキルを実装します

ドロップダウン メニュー リンクのリストを表示するための切り替え可能なコンテキスト メニュー。

1. ケース

ドロップダウン メニュー トリガーとドロップダウン メニューを .dropdown で囲み、メニューを構成する HTML コードを追加します。

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

上記のコードから、見慣れないスタイル クラスや属性が多数含まれている可能性があることがわかります。

右側のドロップダウン ボタンと小さなアイコン キャレット もちろん、この小さなアイコンとボタンのテキストは同じレベルにあります。

まず、ボタン ボタンにドロップダウン トグルがあり、この属性に基づいてドロップダウン リストがポップアップすることを確認します。

ul タグの直後にあるドロップダウン メニューは、上のボタン ボタンのスタイル クラス ドロップダウン トグルと組み合わせて使用​​する必要があり、上のボタン ボタンは aria-labelledby によってバインドされています。

4 番目の li タグにはディバイダがあります。これは実際には行を分割するためのスタイル クラスです。

これはおそらく私が理解していることですが、私の理解は決して適切ではありません。

2. 配置オプション

テキストを右揃えにするには、ドロップダウン メニュー .dropdown-menu に .text-right を追加します。

 <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

上記のコードの ul タグに text-right スタイル クラスを追加するだけです。

3. タイトル

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

 <h1>下拉菜单</h1>
  <div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
 </div>

主に追加されたのは

Dropdown header

中に .dropdown-header スタイル クラスがあります。

4. 無効なメニュー項目

ドロップダウン メニューの

に .disabled 無効リンクを追加します。

引き続き上記のコードを変更し、「Something else here」行のコードを置き換えます

コードをコピー コードは次のとおりです。

その他の内容はこちら

主なことは、li タグに .disabled スタイル クラスを追加することです。

実際にクリックすると、上記のタイトルスタイルと同様の効果が表示されます。

5. 基本的なケース

1)、ボタン ドロップダウン メニュー
任意のボタンを .btn グループに配置し、正しいメニュー タグを追加することで、ドロップダウン メニュー トリガーを作成できます。

単一ボタンのドロップダウン メニュー

基本的なマークアップをいくつか変更するだけで、ボタンがドロップダウン メニュー スイッチに変わります。

<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 Action <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
</div>

分割ボタン ドロップダウン メニュー

同様に、分割ボタン ドロップダウンには同じ変更マークアップが必要ですが、別のボタンが必要です。

<div class="btn-group">
   <button type="button" class="btn btn-danger">Action</button>
   <div class="dropdown">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    </ul>
   </div>
  </div

小さなアイコンをクリックするだけでメニューが表示されます。

2)、サイズ

ドロップダウン メニュー ボタンは、すべてのボタン サイズで機能します。

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

<!-- Small button group -->
<div class="btn-group">
 <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
 Small button <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
 ...
 </ul>
</div>

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

ボタンのサイズは、スタイル クラス .btn-lg、.btn-sm、.btn-xs を通じて制御します。

3)、ポップアップメニュー

親要素に .dropup を追加して、要素の上にトリガーされるドロップダウン メニューを作成します。

<div class="btn-group dropup">
 <button type="button" class="btn btn-default">Dropup</button>
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>
 </button>
 <ul class="dropdown-menu">
 <!-- Dropdown menu links -->
 </ul>
</div>

詳細については、以下を参照してください: ブートストラップ学習チュートリアル

概要:

この記事では、主にドロップダウン メニューの関連コンテンツを紹介し、その後、ボタンとドロップダウン メニューの組み合わせを紹介します。かなりの変更が加えられていますが、気に入っていただければ幸いです。