Bootstrap 5 下拉菜单

Bootstrap 5 下拉菜单是上下文相关的叠加层，可以切换以显示链接列表和其他信息。 这是一个有意识的设计决策； 悬停效果无法切换它们。 提供的 Bootstrap 下拉菜单 JavaScript 插件使其具有交互性。

Bootstrap 5 下拉菜单旨在具有通用性，适用于各种情况和标记结构。 例如，可以设计包含附加输入和表单控件（例如搜索字段或登录表单）的下拉菜单。

基本下拉菜单

“dropdown”类用于创建下拉菜单的格式。 使用带有类“dropdown-toggle”和属性 data-bs-toggle = “dropdown”的按钮或链接来显示下拉菜单。

要实际创建下拉菜单，请在 <div> 元素中添加“.dropdown-menu”类。 将“dropdown-item”类添加到下拉菜单中的每个链接或按钮。

语法

以下语法显示网页上的默认下拉菜单。

示例

以下示例显示使用 bootstrap 5 类的默认下拉菜单。我们使用按钮来单击下拉菜单。 单击按钮后，下拉菜单会显示项目列表。

输出

下图显示了带有信息的 bootstrap 5 下拉菜单功能。

带有 Anchor 标签的下拉菜单

“dropdown”类用于创建基本的下拉菜单功能。 使用链接，例如带有类“dropdown-toggle”和属性 data-bs-toggle = “dropdown”的 <a> 标签来显示下拉项目。

语法

以下语法显示网页上带有链接的默认下拉菜单。

示例

以下示例显示使用 bootstrap 5 类的带有链接的基本下拉菜单。 我们使用 <a> 标签来单击下拉菜单。 单击按钮后，下拉菜单会显示项目列表。

输出

下图显示了带有信息的基本下拉菜单功能。

下拉分隔线

“dropdown-divider”用于使用水平线分隔下拉项目。 此类使用 <li> 标签中的下拉项目。 我们可以将下拉分隔线放置在需要分隔项目并使其看起来真实的地方。

语法

以下语法显示网页上活动下拉项目。

示例

以下示例显示使用 bootstrap 5 类的带有“dropdown-driver”功能的默认下拉菜单。

输出

下图显示了 bootstrap 5 下拉分隔线功能。

活动和禁用下拉项目

Bootstrap 5 下拉菜单使用关键字实现交互式用户功能。 此功能使用“active”关键字来显示下拉列表中活动的项目。 下拉菜单使用“disabled”关键字来显示下拉列表中禁用的项目。 “active”和“disabled”关键字与 <li> 元素中的“dropdown-item”类一起使用。

语法

以下语法显示网页上活动下拉项目。

以下语法显示网页上活动下拉项目。

示例

以下示例显示使用 bootstrap 5 类的带有活动和禁用项目的默认下拉菜单。 在这里，我们将 active 关键字放置到第一个项目，将 disabled 关键字放置到最后一个项目。

输出

下图显示了带有活动和禁用项目的 bootstrap 5 下拉菜单功能。

下拉标题

“dropdown-header”显示项目列表的标题或标题。 此类在标题标签中使用下拉项目。 我们可以根据需要在下拉列表中放置下拉标题。

语法

以下语法显示网页上带有标题的下拉项目。

示例

以下示例显示使用 bootstrap 5 类的带有标题功能的默认下拉菜单。

输出

以下图片显示了 bootstrap 5 下拉菜单标题功能。

带结束位置的下拉菜单

“dropdown”类与 <div> 标签中的“dropend”类一起使用。 “dropend”类显示下拉项目在按钮的右侧位置或结束位置。

语法

以下语法显示网页上带有“dropend”内容的下拉菜单。

示例

以下示例显示网页上带有项目结束位置的下拉菜单。 我们可以看到一个下拉菜单，其项目位于按钮的右侧。

输出

下图显示了带有“dropend”功能的 bootstrap 5 下拉菜单。

带起始位置的下拉菜单

“dropdown”类与 <div> 标签中的“dropstart”类一起使用。 “dropstart”类显示下拉项目在按钮的起始位置的左侧。

语法

以下语法显示网页上带有“dropend”内容的下拉菜单。

示例

以下示例显示网页上带有项目起始位置的下拉菜单。 我们可以看到一个下拉菜单，其项目显示在按钮的左侧。

输出

下图显示了带有“dropstart”功能的 bootstrap 5 下拉菜单。

带向上位置的下拉菜单

在 HTML 元素（如 <div> 标签）中使用“dropup”类。 此类不需要“dropdown”类。 “dropup”类在按钮的顶部显示一个颠倒的项目。 “dropup”需要在下拉按钮上方留出一些空间或内容。

语法

以下语法显示网页上带有“dropup”内容的下拉菜单。

示例

以下示例显示网页上带有“dropup”类的下拉菜单。 带有项目的下拉菜单显示在按钮的上方。

输出

下图显示了带有“dropup”功能的 bootstrap 5 下拉菜单。

带菜单位置的下拉菜单

“dropdown”类与 <div> 标签中的“dropdown-menu-end”类一起使用。 “dropdown-menu-end”类在按钮的右侧或结束位置显示下拉菜单。 如果我们要将下拉菜单显示在起始位置或左侧，请使用“dropdown-menu-start”类。

语法

以下语法显示网页上带有“dropdown-menu-end”内容的下拉菜单。

以下语法显示网页上带有“dropdown-menu-start”内容的下拉菜单。

示例

以下示例显示网页上在所需位置带有下拉菜单的下拉菜单。 第一个下拉菜单显示下拉菜单在右侧位置。 第二个下拉按钮显示下拉菜单在左侧位置。

输出

下图显示了带有下拉菜单所需位置的 bootstrap 5 下拉菜单。

带文本的下拉菜单

“dropdown-item-text”类与下拉类中的 <li> 标签一起使用。 项目文本提供纯文本或链接文本。 纯文本显示为普通的下拉内容，而链接文本显示带下划线的文本。

语法

以下语法显示网页上带有链接的默认下拉菜单。

示例

以下示例显示使用 bootstrap 5 类的带有链接的基本下拉菜单。 我们使用 <a> 标签来单击下拉菜单。 单击按钮后，下拉菜单会显示项目列表。

输出

下图显示了带有文本的基本下拉菜单功能。

结论

下拉菜单功能使用 bootstrap 5 Web 应用程序在较小的空间内显示多个链接。 此功能通过单击一个按钮或锚点标签显示许多页面和信息内容。