ブートストラップにはプルアップ メニューがありますか?

bootstrap にはプルアップ メニューがあります。ボタン メニューはプルダウンだけでなくプルアップすることもできます。デフォルトのドロップダウンをプルアップに変更する必要があります。「」を追加するだけです。 .dropup" を親要素に追加して、要素の上にあるドロップダウン メニューをトリガーします。構文は "

" です。

このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 5、DELL G3 コンピューター

ブートストラップにはプルアップ メニューがあります

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

ボタン メニューはプルダウンするだけでなく、プルアップすることもできます。デフォルトのドロップダウンをプルアップに変更するには、.dropup クラスを .btn-group コンテナに追加するだけです。例:

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ログイン後にコピー

出力結果:

知識を広げる

まず、理解する必要があります: ドロップダウン メニューは、ボタン、ドロップダウン アイコン、および順序なしリストで構成されます。

ドロップダウン メニュー トリガーとドロップダウン メニューは .dropdown に含まれています。

button タグで使用される属性は

class="btn btn-default dropdown-toggle"     type="button" 
                id="dropdownMenu1"         data-toggle="dropdown"         aria-haspopup="true" 
                aria-expanded="true"

ログイン後にコピー

span タグで使用される属性値は class = "caret"

Unorderd list< ul> です。要素は、メニューの左に位置合わせされていました。

順序リスト & LT; OL & GT; 要素

# & LT; OL & GT; ラベル定義順序リスト

Ol は通常 Start で使用されます: 開始を表します順序付けられたリストの値。

ol 一般的に使用される属性には、リストで使用されるラベル タイプである Type: Standard が含まれます。

# & lt; li & gt; 要素

# & lt; li & gt; ラベル定義リスト項目。

# & lt; li & gt; ラベルは、順序付きリスト (& lt; & gt;) および非シリアル リスト (& lt; ul & gt;) で使用できます。

分割ボタンでいくつかのマークを変更し、

Rrree

の部族を FLASE に変更します。

プラス

<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

ログイン後にコピー

関連する推奨事項:

bootstrap チュートリアル

以上がブートストラップにはプルアップ メニューがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。