So richten Sie das Dropdown-Menü in Bootstrap4 ein

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>

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

Titel im Dropdown-Menü

　　.dropdown-header 

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

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

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

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

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 dc6dce4a544fdca2df29d5ac0ea9906b durch die Schaltfläche :

<div class="dropup">

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>

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!