"."/> ".">

Heim >Web-Frontend >Front-End-Fragen und Antworten >Verfügt Bootstrap über ein Pullup-Menü?

Verfügt Bootstrap über ein Pullup-Menü?

WBOY
WBOYOriginal
2022-08-22 16:05:541492Durchsuche

Bootstrap verfügt über ein Pullup-Menü. Das Schaltflächenmenü kann nicht nur nach unten gezogen werden, sondern auch nach oben. Sie müssen nur „.dropup“ hinzufügen Das übergeordnete Element zum Auslösen des Dropdown-Menüs über dem Element lautet „

".

Verfügt Bootstrap über ein Pullup-Menü?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 5, DELL G3-Computer

Bootstrap verfügt über ein Pullup-Menü

Lösen Sie das Dropdown-Menü über dem Element aus, indem Sie .dropup hinzufügen das übergeordnete Element.

Das Tastenmenü kann nicht nur nach unten, sondern auch nach oben gezogen werden. Um das Standard-Dropdown in Pullup zu ändern, fügen Sie einfach eine .dropup-Klasse zum .btn-group-Container hinzu. Zum Beispiel:

<!-- 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>

Ausgabeergebnis:

Verfügt Bootstrap über ein Pullup-Menü?

Wissen erweitern

Zunächst sollten wir verstehen: Das Dropdown-Menü besteht aus: Schaltflächen, Dropdown-Symbolen und ungeordneten Listen.

Dropdown-Menüauslöser und Dropdown-Menüs sind in .dropdown enthalten.

Im Button-Tag sind die verwendeten Attribute          

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

Im Span-Tag sind die verwendeten Attributwerte              

    Tag-Definition Keine Sequenzliste

    Hinweis: Wenn Sie die Schaltflächen linksbündig ausrichten möchten rechts ausrichten, können Sie sie mit „dropdown-menu-right“ nach rechts ausrichten und mit „dropdown-menu-left“ nach links ausrichten.

    Geordnete Liste

    Elemente

                                                                                                                                                                         . Zu den häufig verwendeten OL-Attributen gehört Typ: Geben Sie den in Listen verwendeten Beschriftungstyp an.

  1. Element

                                                                                                                                                                                                                                                            . L & lt; li & gt;-Beschriftungen können in geordneten Listen (& lt; ol & gt;) und nicht seriellen Listen (& lt; ul & gt;) verwendet werden. Mit der 下-Leitungstaste wird das Menü geöffnet.

                                                                                                                                                                              Plus

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

    Verwandte Empfehlungen:

    Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonVerfügt Bootstrap über ein Pullup-Menü?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn