ホームページ  >  記事  >  ウェブフロントエンド  >  Bootstrap のドロップダウン メニューの簡単な紹介

Bootstrap のドロップダウン メニューの簡単な紹介

青灯夜游
青灯夜游転載
2021-06-22 11:10:402731ブラウズ

この記事では、Bootstrap のドロップダウン メニューについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Bootstrap のドロップダウン メニューの簡単な紹介

Web ページを操作するときは、コンテキスト メニューや非表示/表示メニュー項目が必要になることがよくあります。Bootstrap には、リンク リストを表示するための切り替え可能なコンテキスト メニューがデフォルトで用意されています。また、さまざまな対話状態でのメニュー表示は、JavaScript プラグインと併用する必要があります。 [関連する推奨事項: "bootstrap チュートリアル "]

使用方法

Bootstrap フレームワークのドロップダウン メニューを使用する場合は、次のことを行う必要があります。ブートストラップ フレームワークの bootstrap.js ファイルによって提供されるドロップダウン メニューを呼び出します。もちろん、コンパイルされていないバージョンを使用している場合は、js フォルダーに「dropdown.js」という名前のファイルがあり、この js ファイルを

と呼ぶこともできます。ブートストラップのコンポーネントの相互作用効果はすべて A に依存するためです。このプラグインは jQuery ライブラリによって作成されるため、bootstrap.js を使用する前に jquery.js をロードして効果を発揮する必要があります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

基本的な使い方

Bootstrap を使用する場合Framework ドロップダウン メニュー コンポーネントを使用する場合、その構造を正しく使用することが非常に重要です。構造とクラス名が正しく使用されないと、コンポーネントが正常に使用できるかどうかに直接影響します。

1. 「dropdown」という名前のコンテナを使用します。 ドロップダウン メニュー要素全体をラップします。

<div></div>

2.

<button></button>

と同じである必要があります。 3. ドロップダウン メニュー項目に ul リストを使用し、クラス名 "dropdown-menu" を定義します。


    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        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>
      </ul>
    </div>

    Bootstrap のドロップダウン メニューの簡単な紹介

    4. ドロップダウン メニューの親要素に .dropup クラスを設定すると、メニューをポップアップ表示させることができます (デフォルトはポップダウンです)

    <div class="dropup">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropup
        <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>
      </ul>
    </div>

    Bootstrap のドロップダウン メニューの簡単な紹介

    Principle Analysis

    Bootstrap フレームワークのドロップダウン メニュー コンポーネント、そのドロップダウン「ドロップダウン メニュー」のデフォルト スタイルが「表示:なし」に設定されているため、ダウン メニュー項目はデフォルトで非表示になります。ユーザーがクリックしたとき。親メニュー項目が選択されているとき、ドロップダウン メニューが表示されます。ユーザーがクリックしたとき。繰り返しますが、ドロップダウン メニューは引き続き非表示になります

    .dropdown-menu {
      position: absolute;/*设置绝对定位,相对于父元素div.dropdown*/
      top: 100%;/*让下拉菜单项在父菜单项底部,如果父元素不设置相对定位,该元素相对于body元素*/
      left: 0;
      z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
      display: none;/*默认隐藏下拉菜单项*/
      float: left;
      min-width: 160px;
      padding: 5px 0;
      margin: 2px 0 0;
      font-size: 14px;
      list-style: none;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ccc;
      border: 1px solid rgba(0, 0, 0, .15);
      border-radius: 4px;
      -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
      box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    }

    [実装原則]

    1. Web ページが読み込まれるときにドロップダウン プラグインが読み込まれ、すべての要素のイベント バインディングが行われます。 with data-toggle="dropdown" style

    2. ユーザーが data-toggle="dropdown" スタイルのリンクまたはボタンをクリックすると、JavaScript イベント コードがトリガーされます

    3. 追加JavaScript イベント コードで親コンテナに .open スタイルを追加します

    # 4. デフォルトで非表示になっている .dropdown-menu メニューは、外部に .open スタイルを設定した後に表示できます。期待される効果を達成するには

    5. ユーザーがもう一度クリックすると、「p.dropdown」コンテナ内のクラス名「open」が再び削除されます

    .open > .dropdown-menu {
      display: block;
    }

    [その他の使用法]

    もう一つ興味深いのは、使用方法は、トリガー要素をメニューの親コンテナの外に配置できることです。

    ただし、この使用方法には 2 つの注意点があります。

    1. 親コンテナの ID 値を設定します。

    2. トリガー要素の data-toggle 属性と data-target 属性を設定します data-target 属性の値は #id

    <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" data-target="#dropdown1">外部触发器</button>
    <div class="dropdown" id="dropdown1">
        <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
            <li role="presentation"><a href="##">HTML</a></li>
            <li role="presentation"><a href="##">CSS</a></li>
            <li role="presentation"><a href="##">javascript</a></li>
        </ul>
    </div>

    Bootstrap のドロップダウン メニューの簡単な紹介

    拡張使用法

    [区切り文字]

    ブートストラップ フレームワークのドロップダウン メニューにはドロップダウン区切り文字が用意されています。ドロップダウン メニューに 2 つのグループがあると仮定すると、次のようになります。グループとグループ 空の
  • を追加し、この
  • にクラス名「divider」を追加することで、ドロップダウン ディバイダを追加できます。 # 【メニュー タイトル】

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

    .dropdown-menu .divider {
      height: 1px;
      margin: 9px 0;
      overflow: hidden;
      background-color: #e5e5e5;
    }
    <li role="separator" class="divider"></li>
    Bootstrap のドロップダウン メニューの簡単な紹介

    【配置】

    Bootstrap フレームワークのドロップダウン メニューはデフォルトで左揃えになっています。ドロップダウン メニューを親コンテナに対して右揃えにしたい場合は、「dropdown-menu-right」クラス名を追加できます。 to "dropdown-menu"

    <li class="dropdown-header">Dropdown header</li>
    Bootstrap のドロップダウン メニューの簡単な紹介

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

声明:
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。