How to write bootstrap drop-down menu

Bootstrap drop-down menu is a menu component that expands submenus downwards. The creation method is as follows: Create a parent menu item and add "dropdown-toggle" and "data-toggle="dropdown"" attributes. Create dropdown content and use the "dropdown-menu" class to wrap the dropdown menu items. Add dropdown content to parent menu item. Add "dropdown-menu-right" or "dropdown-menu-left" aligned dropdown menus. Add "divider" class to separate menu items. Add "dropdown-header" class to create header.

Bootstrap drop-down menu

The drop-down menu is a menu component provided by Bootstrap, which can realize the submenu from the parent menu. The effect of menu items expanding downward is a common element in building navigation bars and user interfaces.

How to create a Bootstrap drop-down menu

<li>

Create a parent menu item:Use<a></a> The element wraps the menu item content and adds the dropdown-toggle class and data-toggle="dropdown" attribute to it.

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

<li>

Create drop-down content: Use the <ul></ul> element to wrap the drop-down menu item and add dropdown-menu to it kind.

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

<li>

Add the drop-down content to the parent menu item: Nest the <ul></ul> element inside <a behind the> element, a drop-down menu structure is formed. </a>

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

<li>

Add alignment: This can be done by adding the dropdown-menu-right or dropdown-menu-left class to adjust the alignment of the drop-down menu.

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

<li>

Add separator: You can use the <li> element and add the divider class to it Add separator.

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

<li>

Add a header: You can use the <li> element and add the dropdown-header class to it to add a title.

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

The above is the detailed content of How to write bootstrap drop-down menu. For more information, please follow other related articles on the PHP Chinese website!