bootstrap下拉菜单怎么写

bootstrap 下拉菜单是向下展开子菜单的菜单组件，创建方法如下：创建父菜单项，添加“dropdown-toggle”和“data-toggle="dropdown"”属性。创建下拉内容，使用“dropdown-menu”类包装下拉菜单项。将下拉内容添加到父菜单项中。添加“dropdown-menu-right”或“dropdown-menu-left”对齐下拉菜单。添加“divider”类分隔菜单项。添加“dropdown-header”类创建标题。

Bootstrap 下拉菜单

下拉菜单是 Bootstrap 提供的一种菜单组件，可以实现子菜单从父菜单项向下展开的效果，是构建导航栏和用户界面的常用元素。

如何创建 Bootstrap 下拉菜单

1. 创建父菜单项：使用 元素包裹菜单项内容，并为其添加 dropdown-toggle 类和 data-toggle="dropdown" 属性。

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

2. 创建下拉内容：使用

3. 将下拉内容添加到父菜单项中：将

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

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

5. 添加分隔符：可以使用

6. 元素，并为其添加 divider 类来添加分隔符。

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

7. 添加标题：可以使用

8. 元素，并为其添加 dropdown-header 类来添加标题。

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