Bootstrap5 下拉菜单1

简介: Bootstrap5 下拉菜单是可切换的上下文菜单,以列表形式显示链接。通过 `.dropdown` 类指定下拉菜单,按钮或链接需添加 `.dropdown-toggle` 和 `data-bs-toggle="dropdown"` 属性。实际下拉菜单使用 `.dropdown-menu` 类,选项添加 `.dropdown-item` 类。`.dropdown-divider` 类用于创建水平分割线。

Bootstrap5 下拉菜单
下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。

实例

尝试一下 »
实例解析
.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。

元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加 .dropdown-item 类。

下拉菜单中的分割线
.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线:

实例


  • 相关文章
    N..
    |
    7月前
    |
    开发框架 前端开发 UED
    Bootstrap下拉菜单与选项卡
    Bootstrap下拉菜单与选项卡
    N..
    61 1
    |
    前端开发 JavaScript
    |
    前端开发 JavaScript 容器
    Bootstrap 下拉菜单
    Bootstrap 下拉菜单
    57 0
    |
    索引 容器
    Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
    Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
    |
    7月前
    |
    前端开发
    Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
    Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
    Bootstrap5 下拉菜单7
    按钮组中可以嵌入下拉菜单,实现更多功能选项。示例展示了水平和垂直按钮组中添加下拉菜单的方法,通过 `dropdown-toggle` 类和 `data-bs-toggle="dropdown"` 属性实现下拉效果。
    |
    1月前
    |
    前端开发
    Bootstrap5 下拉菜单5
    此示例展示了如何使用 Bootstrap 的 `dropstart` 类创建一个向左弹出的下拉菜单。通过在 `div` 元素上添加 `dropstart` 类,可以实现下拉菜单从按钮左侧弹出的效果。菜单包含三个链接项。
    Bootstrap5 下拉菜单6
    使用 `.dropdown-item-text` 类可以在下拉菜单中添加纯文本项,
    Bootstrap5 下拉菜单4
    要使上拉菜单向上弹出,可在 div 元素中添加 "dropup" 类。示例代码包括一个按钮和一个包含三个链接的下拉菜单列表。当点击按钮时,菜单将向上弹出。
    Bootstrap5 下拉菜单3
    下拉菜单默认向下弹出,但可以通过添加类 `.dropdown-menu-end` 实现向右下方弹出。示例代码展示了如何创建一个向右下方弹出的下拉菜单按钮,包含三个链接项。