Bootstrap ドロップダウン メニューのサンプル チュートリアル

この章では、Bootstrap クラスを使用してボタンにドロップダウン メニューを追加する方法を説明します。ボタンにドロップダウン メニューを追加するには、ボタンとドロップダウン メニューを .btn-group に配置するだけです。 を使用して、ボタンがドロップダウン メニューとして機能することを示すこともできます。

次の例は、基本的な単純なボタン ドロップダウン メニューを示しています:

例

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div><div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div>

基本的な使用法

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

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

<div class="dropdown"></div>

2. < を使用します。ボタン>ボタンを親メニューとして、クラス名「dropdown-toggle」とカスタムの「data-toggle」属性を定義し、その値は最も外側のコンテナクラス名と一致する必要があります

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">

3. ドロップダウンメニュー項目は UL リストを使用し、 を定義します。 クラス名は "dropdown-menu" です

<ul class="dropdown-menu" role="menu">

  
  
  ActionAnother actionSomething else here

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>

Principle Analysis

Bootstrap フレームワークのドロップダウン メニュー コンポーネント、そのドロップダウン メニュー項目はデフォルトでは非表示になっています。 「dropdown-menu」のデフォルトのスタイルは「display:none」に設定されています。ユーザーが親メニュー項目をクリックすると、ドロップダウン メニューが表示されます。ユーザーが再度クリックすると、ドロップダウン メニューは引き続き非表示になります。

.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);
}

それでは、実装原理を分析してみましょう。これは非常に簡単です。js テクノロジーを使用して、クラス名「open」を追加または削除して、ドロップダウン メニューの表示または非表示を制御します。つまり、デフォルトでは、「div.dropdown」にはクラス名「open」がありません。ユーザーが初めてクリックすると、「div.dropdown」にはクラス名「open」が追加されます。もう一度、「div.dropdown」は「コンテナ内のクラス名「open」が再び削除されます

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

拡張使用法

[区切り文字]

Bootstrap フレームワークのドロップダウン メニューは、ドロップを提供します-down セパレータ。ドロップダウン メニュー グループが 2 つあると仮定すると、グループ間に空の

を追加し、この

にクラス名「divider」を追加します。ディバイダー

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

<li role="separator" class="divider"></li>

  Dropdown
  
  
Action
Another action
Something else here
<li role="separator" class="divider"></li>
Separated link
  

【メニュータイトル】

ドロップダウンメニューの一連のアクションを示すタイトルを追加できます

<li class="dropdown-header">Dropdown header</li>

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}

<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" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation" class="dropdown-header">第一部分菜单头部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li><li role="presentation" class="dropdown-header">第二部分菜单头部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul></div>

【配置】

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

.dropdown-menu-right {
  right: 0;
  left: auto;
}

以降、デフォルトはブロックレベル要素であり、親の幅を埋めます。ここで、要素の内容が幅を広げて左側から一定の距離を保つように、要素に inline-block と margin-left を設定する必要があります

    display: inline-block;
    margin-left: 60px;

<div class="dropdown" style="display: inline-block;margin-left: 60px;">
  <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 dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul></div>

【メニュー項目の状態】

ドロップダウン メニュー項目 デフォルトの状態はホバー状態 (:hover) とフォーカス状態 (:focus) です

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

上記の 2 つの状態に加えて、ドロップダウン メニュー項目には現在の状態 (.active) もあります。および無効な状態 (.disabled)。これら 2 つの状態を使用するには、対応するクラス名を対応するメニュー項目に追加するだけです

<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" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li><li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul></div>

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法

1 か月前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7622

15

CakePHP チュートリアル

1389

52

Steamのアカウント名の形式は何ですか

89

11

Win11 Activation Key Permanent

70

19

NYTの接続はヒントと回答です

31

138

もっと見る