So richten Sie das Dropdown-Menü in Bootstrap4 ein-Bootstrap-Tutorial-php.cn

"So

Bootarp 4 Dropdown-Menü

Empfohlenes Tutorial: Bootstarp-Handbuch

Das Dropdown-Menü ist umschaltbar und ein Kontextmenü, das Links in einem Listenformat anzeigt. Die Klasse

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div></div>

Nach dem Login kopieren

Codeinterpretation

　　.dropdown wird verwendet, um ein Dropdown-Menü anzugeben.

Wir können eine Schaltfläche oder einen Link verwenden, um das Dropdown-Menü zu öffnen. Die Schaltfläche oder der Link muss die Attribute .dropdown-toggle und data-toggle="dropdown" hinzufügen. Fügen Sie die Klasse

zum Element

.dropdown-menu

hinzu, um das eigentliche Dropdown-Menü einzurichten, und fügen Sie dann die Klasse .dropdown-item zu den Optionen des Dropdown-Menüs hinzu.

Trennlinie im Dropdown-Menü

　　.dropdown-divider

.dropdown-divider Klasse ist verwendet Erstellen Sie eine horizontale Trennlinie im Dropdown-Menü:

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

Nach dem Login kopieren

Titel im Dropdown-Menü

　　.dropdown-header

<p>　.dropdown-header Die Klasse <strong> wird verwendet, um einen Header im Dropdown-Menü hinzuzufügen:

<div class="dropdown-header">Dropdown header 1</div>

Nach dem Login kopieren

　　.active im Dropdown-Menü Verfügbare und deaktivierte Elemente Die Klasse

.disabled

hebt die Dropdown-Menüoptionen hervor (fügt einen blauen Hintergrund hinzu).

Wenn Sie die Dropdown-Menüoptionen deaktivieren möchten, können Sie die Klasse verwenden.

<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>

Nach dem Login kopieren

Positionierung des Drop-Down-Menüs.dropdown-menu.dropdown-menu-right

Wenn wir möchten, dass das Drop-Down-Menü rechtsbündig ist, dann wir Sie können die Klasse

zum Element hinzufügen. Fügen Sie dann die Klasse hinzu.

<div class="dropdown-menu dropdown-menu-right">

Nach dem Login kopieren

Geben Sie ein Dropdown-Menü an, das angezeigt wird class="dropdown""dropup"

Wenn Sie möchten, dass das Dropdown-Menü angezeigt wird. Wenn das Menü angezeigt wird, können Sie die Schaltfläche des Elements

durch die Schaltfläche :

<div class="dropup">

Nach dem Login kopieren

ersetzen das Dropdown-Menü

Wir können der Schaltfläche ein Dropdown-Menü hinzufügen:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div></div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo richten Sie das Dropdown-Menü in Bootstrap4 ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

bootstrap

Quelle：php.cn

Vorheriger Artikel：So zentrieren Sie das Bild im Bootstrap Nächster Artikel：Wie man div im Bootstrap richtig macht

Erklärung dieser Website

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

Neueste Artikel des Autors