ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > Bootstrap のドロップダウン メニュー クラス (dropdown-menu) についての簡単な説明

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

青灯夜游
リリース: 2021-03-23 11:31:37
転載
2221 人が閲覧しました

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

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

ドロップダウン メニューは非常に一般的な効果で、切り替え可能な関連リンクのセットを表示するために使用されます。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 に示します。

      Bootstrap のドロップダウン メニュー クラス (dropdown-menu) についての簡単な説明
      図 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 に示します。

      激活Bootstrap のドロップダウン メニュー クラス (dropdown-menu) についての簡単な説明
      図 3-9 ドロップダウン メニューのアクティブ化

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

      <div class="dropup">
      …
      </div>
      ログイン後にコピー

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

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

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

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

ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート