So schreiben Sie ein Bootstrap-Dropdown-Menü

Das Bootstrap-Dropdown-Menü ist eine Menükomponente, die Untermenüs nach unten erweitert. Die Erstellungsmethode ist wie folgt: Erstellen Sie einen übergeordneten Menüpunkt und fügen Sie die Attribute „dropdown-toggle“ und „data-toggle="dropdown"“ hinzu. Erstellen Sie Dropdown-Inhalte und verwenden Sie die Klasse „dropdown-menu“, um die Dropdown-Menüelemente einzuschließen. Fügen Sie Dropdown-Inhalt zum übergeordneten Menüelement hinzu. Fügen Sie „Dropdown-Menü-rechts“ oder „Dropdown-Menü-links“ ausgerichtete Dropdown-Menüs hinzu. Fügen Sie die Klasse „Teiler“ hinzu, um Menüelemente zu trennen. Fügen Sie die Klasse „dropdown-header“ hinzu, um einen Header zu erstellen.

Bootstrap-Dropdown-Menü

Das Dropdown-Menü ist eine von Bootstrap bereitgestellte Menükomponente, die den Effekt erzielen kann, dass Untermenüs vom übergeordneten Menüelement nach unten erweitert werden. Es ist ein gemeinsames Element beim Erstellen Navigationsleisten und Benutzeroberflächen.

So erstellen Sie ein Bootstrap-Dropdown-Menü

<li>

Erstellen Sie einen übergeordneten Menüpunkt: Verwenden Sie das Element <a>, um den Inhalt des Menüpunkts zu umschließen und hinzuzufügen dropdown-toggle-Klasse und data-toggle="dropdown"-Attribut. <a> 元素包裹菜单项内容，并为其添加 dropdown-toggle 类和 data-toggle="dropdown" 属性。

<code class="html"><a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单项</a></code>

<li>

创建下拉内容：使用 <ul> 元素包裹下拉菜单项，并为其添加 dropdown-menu 类。

<code class="html"><ul class="dropdown-menu">
  <li><a href="#">子菜单项1</a></li>
  <li><a href="#">子菜单项2</a></li>
  <li><a href="#">子菜单项3</a></li>
</ul></code>

<li>

将下拉内容添加到父菜单项中：将 <ul> 元素嵌套在 <a> 元素的后面，形成下拉菜单结构。

<code class="html"><a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单项
  <ul class="dropdown-menu">
 <li><a href="#">子菜单项1</a></li>
 <li><a href="#">子菜单项2</a></li>
 <li><a href="#">子菜单项3</a></li>
  </ul>
</a></code>

<li>

添加对齐方式：可通过添加 dropdown-menu-right 或 dropdown-menu-left 类来调整下拉菜单的对齐方式。

<code class="html"><a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单项
  <ul class="dropdown-menu dropdown-menu-right">
 <li><a href="#">子菜单项1</a></li>
 <li><a href="#">子菜单项2</a></li>
 <li><a href="#">子菜单项3</a></li>
  </ul>
</a></code>

<li>

添加分隔符：可以使用 <li> 元素，并为其添加 divider 类来添加分隔符。

<code class="html"><ul class="dropdown-menu">
  <li><a href="#">子菜单项1</a></li>
  <li class="divider"></li>
  <li><a href="#">子菜单项3</a></li>
</ul></code>

<li>

添加标题：可以使用 <li> 元素，并为其添加 dropdown-header

<code class="html"><ul class="dropdown-menu">
  <li><a href="#">子菜单项1</a></li>
  <li class="dropdown-header">标题</li>
  <li><a href="#">子菜单项3</a></li>
</ul></code>

🎜Dropdown-Inhalt erstellen: 🎜Umschließen Sie den Dropdown-Menüpunkt mit dem Element <ul> und fügen Sie die Klasse dropdown-menu hinzu. 🎜rrreee🎜🎜🎜🎜Fügen Sie den Dropdown-Inhalt zum übergeordneten Menüelement hinzu: 🎜Verschachteln Sie das <ul>-Element hinter dem <a>-Element, um ein zu bilden Dropdown-Menüstruktur. 🎜rrreee🎜🎜🎜🎜Ausrichtung hinzufügen: 🎜Die Ausrichtung des Dropdown-Menüs kann durch Hinzufügen der Klasse dropdown-menu-right oder dropdown-menu-left angepasst werden. 🎜rrreee🎜🎜🎜🎜Trennzeichen hinzufügen: 🎜Sie können das Element <li> verwenden und ihm die Klasse divider hinzufügen, um Trennzeichen hinzuzufügen. 🎜rrreee🎜🎜🎜🎜Header hinzufügen: 🎜Sie können das Element <li> verwenden und die Klasse dropdown-header hinzufügen, um einen Header hinzuzufügen. 🎜rrreee🎜🎜

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