Bootstrap のドロップダウン メニュー クラス (dropdown-menu) についての簡単な説明

Bootstrap には、ドロップダウン メニュー コンポーネントの完全なセットが組み込まれています。この記事では、Bootstrap のドロップダウン メニュー クラスについて紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

ドロップダウン メニューは非常に一般的な効果で、切り替え可能な関連リンクのセットを表示するために使用されます。Web ページのレイアウト スペースを節約し、Web ページのレイアウトを作成できます。シンプルでエレガントなシーケンス。

Bootstrap には、ナビゲーション、ボタンなどのさまざまな要素に使用できる、組み込みのドロップダウン メニュー コンポーネントの完全なセットがあります。他の要素と組み合わせて、さまざまなメニュー効果をデザインすることもできます。

ドロップダウン メニューの対話型動作には、ドロップダウン メニュー プラグイン (dropdown.js) のサポートも必要です。そのため、ドロップダウン メニュー コンポーネントを使用する場合、dropdown.js ファイルはも紹介される。

関連する推奨事項: 「bootstrap チュートリアル 」

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

Bootstrap のドロップダウン メニューは次のとおりです。すべてリストに基づいています。はい、順序なしリスト (

) または順序付きリスト (

) を使用できます。説明リスト (

) はまだサポートされていません。

.dropdown-menu クラスを

または

に追加して、ドロップダウン メニューを作成します。例:

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
</ul>

効果を図 3-8 に示します。


図 3-8 ドロップダウン メニュー

通常、ドロップ-down メニューはデフォルトで非表示にし、ユーザーがボタンまたはリンクをクリックした場合にのみ表示する必要があります。したがって、ハイパーリンクまたはボタンとドロップダウン メニューを class="dropdown" またはposition:relative; を使用してコンテナ内にラップし、ボタンまたはリンクに data-toggle="dropdown" 属性を追加する必要があります。これにより、ドロップダウン メニューをデフォルトで非表示にし、ボタンまたはリンクをクリックした場合にのみアクティブにして表示することができます。例:

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

現時点では、ブラウザでプレビューすると、ボタンが表示されます。ボタンをクリックすると、ドロップダウン メニューがアクティブ化されて表示されます。この効果を図 3-9 に示します。


図 3-9 ドロップダウン メニューのアクティブ化

デフォルトでは、サブメニューは次の形式でポップアップ表示されます。ドロップダウンメニュー。プルアップ形式でポップアップ表示したい場合は、ドロップダウン メニュー全体を .dropup コンテナで囲むだけです:

<div class="dropup">
…
</div>

効果は図 3‑10 に示されています:


図 3-10 プルアップ メニュー

プログラミング関連の知識については、プログラミング ビデオを参照してください。 ！

以上がBootstrap のドロップダウン メニュー クラス (dropdown-menu) についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。