ディレクトリ 検索
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
テキスト

切换上下文覆盖,以显示链接列表和更多与引导下拉插件。

概述

下拉菜单是可切换的,用于显示链接列表等的上下文覆盖。它们与包含的Bootstrap下拉式JavaScript插件交互。他们通过点击而不是通过盘旋来切换; 这是一个有意的设计决定。

下拉菜单建立在第三方库Popper.js上,该库提供动态定位和视口检测。一定要包括popper.min.js引导的JavaScript或使用前bootstrap.bundle.min.js/ bootstrap.bundle.js包含Popper.js。

如果你从源代码构建我们的JS,它需要util.js

可达性

所述WAI ARIA标准定义了实际role="menu"插件,但是这是特定于该触发动作或功能应用类菜单。ARIA菜单只能包含菜单项,复选框菜单项,单选按钮菜单项,单选按钮组和子菜单。

另一方面,Bootstrap的下拉菜单设计为通用的,适用于各种情况和标记结构。例如,可以创建包含其他输入和表单控件的下拉列表,例如搜索字段或登录表单。出于这个原因,引导不指望(也没有自动添加)任何rolearia-真正ARIA的菜单需要的属性。作者必须自己包含这些更具体的属性。

但是,Bootstrap确实为大多数标准键盘菜单交互添加了内置支持,例如.dropdown-item使用光标键移动单个元素的能力以及使用ESC键关闭菜单的能力。

实例

将下拉的切换(您的按钮或链接)和下拉菜单.dropdown或其他声明的元素封装在一起position: relative;。可以通过下拉菜单<a><button>元素来更好地满足潜在需求。

单按钮下拉

任何单个.btn可以变成下拉切换与一些标记更改。以下是您可以如何将它们与任何<button>元素配合使用的方法:

<div class="dropdown">  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button  </button>  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">    <a class="dropdown-item" href="#">Action</a>    <a class="dropdown-item" href="#">Another action</a>    <a class="dropdown-item" href="#">Something else here</a>  </div></div>

<a>要素:

<div class="dropdown show">  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link  </a>  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">