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

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 „

".

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>

Nach dem Login kopieren

Ausgabeergebnis:

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"

Nach dem Login kopieren

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

   Nach dem Login kopieren

   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!