bootstrap——组件（一、下拉菜单）

最新推荐文章于 2025-05-28 16:41:45 发布

zaichuanguanshui

最新推荐文章于 2025-05-28 16:41:45 发布

阅读量781

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： bootstrap 组件 dropdown

本文链接：https://blog.youkuaiyun.com/zaichuanguanshui/article/details/54603408

web 专栏收录该内容

62 篇文章

订阅专栏

本文详细介绍了Bootstrap下拉菜单的基本用法，包括如何创建、对齐方式、使用标题和分割线，以及如何禁用菜单项等内容。此外还介绍了与下拉菜单相关的事件及其用途。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、dropdown基本用法

这里写图片描述

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" >
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

2、对齐

.dropdown-menu-left
.dropdown-menu-right
dropdownmenu会跟最外层的div进行对齐

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

3、标题

<li class="dropdown-header"></li>

在任何下拉菜单中均可通过添加标题来标明一组动作

这里写图片描述

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-">
        <li class="dropdown-header">item1</li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="dropdown-header">item2</li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

4、分割线

<li class="divider"></li>

为下拉菜单添加一条分割线，用于将多个链接分组。

这里写图片描述

<div class="dropdown">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       Dropdown
       <span class="caret"></span>
   </button>
   <ul class="dropdown-menu dropdown-menu-">
       <li class="dropdown-header">item1</li>
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li class="divider"></li>
       <li class="dropdown-header">item2</li>
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
   </ul>
</div>

5、禁用的菜单项

为下拉菜单中的

元素添加 .disabled 类，从而禁用相应的菜单项。

<li class="disabled"><a href="#">Disabled link</a></li>

6、下拉菜单的事件

事件名称	描述
show.bs.dropdown	在下拉菜单的show事件发生后立即触发这个事件
shown.bs.dropdown	在下拉菜单显示完成之后触发这个事件
hide.bs.dropdown	在下拉菜单的hide事件发生后立即触发这个事件
hidden.bs.dropdown	在下拉菜单消失完成之后触发这个事件

例子：

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})