Comment écrire le menu déroulant bootstrap

Le menu déroulant Bootstrap est un composant de menu qui développe les sous-menus vers le bas. La méthode de création est la suivante : créez un élément de menu parent et ajoutez les attributs "dropdown-toggle" et "data-toggle="dropdown"". Créez du contenu déroulant et utilisez la classe "dropdown-menu" pour envelopper les éléments du menu déroulant. Ajoutez du contenu déroulant à l’élément de menu parent. Ajoutez des menus déroulants alignés "menu déroulant-droite" ou "menu déroulant-gauche". Ajoutez la classe "divider" pour séparer les éléments de menu. Ajoutez la classe "dropdown-header" pour créer un en-tête.

Menu déroulant Bootstrap

Le menu déroulant est un composant de menu fourni par Bootstrap, qui peut obtenir l'effet de sous-menus se développant vers le bas à partir de l'élément de menu parent. C'est un élément courant pour la construction. barres de navigation et interfaces utilisateur.

Comment créer un menu déroulant Bootstrap

<li>

Créez un élément de menu parent : Utilisez l'élément <a> pour envelopper le contenu de l'élément de menu et ajouter classe dropdown-toggle code> et attribut <code>data-toggle="dropdown". <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>

🎜Créez du contenu déroulant : 🎜Enveloppez l'élément de menu déroulant avec l'élément <ul> et ajoutez-y la classe dropdown-menu. 🎜rrreee🎜🎜🎜🎜Ajoutez le contenu déroulant à l'élément de menu parent : 🎜Imblez l'élément <ul> derrière l'élément <a> pour former un Structure du menu déroulant. 🎜rrreee🎜🎜🎜🎜Ajouter un alignement : 🎜L'alignement du menu déroulant peut être ajusté en ajoutant la classe dropdown-menu-right ou dropdown-menu-left. 🎜rrreee🎜🎜🎜🎜Ajouter des séparateurs : 🎜Vous pouvez utiliser l'élément <li> et y ajouter la classe divider pour ajouter des séparateurs. 🎜rrreee🎜🎜🎜🎜Ajouter un en-tête : 🎜Vous pouvez utiliser l'élément <li> et y ajouter la classe dropdown-header pour ajouter un en-tête. 🎜rrreee🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!