下拉菜单（Dropdowns） |
您所在的位置：网站首页 › 网页怎么下拉菜单设置密码呢 › 下拉菜单（Dropdowns） |
|
概述
下拉列表是可切换的上下文覆盖，用于显示链接列表等。它们与附带的Bootstrap 下拉JavaScript插件交互。它们是通过点击来切换的，而不是通过悬停来切换的；这是一个有意的设计决定。 下拉菜单是透过第三方插件Popper所建构的，这提供了动态位置及viewport的监控。使用前请确认popper.min.js 在Bootstrap的JavaScript之前，或者使用已经包含Popper的bootstrap.bundle.min.js /bootstrap.bundle.js。因为不需要动态定位，Popper并没有用于导航条下拉菜单的定位。 亲和性WAI-ARIA标准定义了一个实际的role=“menu”小部件，但这是特定于触发动作或功能的应用程序类菜单的。ARIA菜单只能包含菜单项、复选框菜单项、单选按钮菜单项、单选按钮组和子菜单。 另一方面，Bootstrap的下拉列表被设计成通用的，并且适用于各种情况和标记结构。例如，可以创建包含其他输入和表单控件（如搜索字段或登录表单）的下拉列表。因此，Bootstrap并不期望（也不会自动添加）真正的aria菜单所需的任何role和aria属性。作者将不得不包括这些更具体的属性本身。 但是，Bootstrap确实为大多数标准的键盘菜单交互添加了内置支持，例如使用光标键在单个下拉项元素之间移动，并使用ESC键关闭菜单的功能。 示例将下拉菜单的切换（按钮或链接）和下拉菜单包装在.dropdown中，或其他声明position:relative；的元素中；。可以从a或button元素触发下拉列表，以更好地满足您的潜在需求。这里显示的示例在适当的地方使用语义ul元素，但是支持自定义标记。 单个按钮任何单个.btn都可以变成一个下拉切换，并有一些标记更改。下面是如何将它们与button元素一起使用： Action Another action Something else here Dropdown button Action Another action Something else here或者是透过a元素： Dropdown link Action Another action Something else here Dropdown link Action Another action Something else here最好的部分地方是，您也可以使用任何按钮变体来实现这一点： Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Action Another action Something else here Separated link 拆分按钮同样的，透过与单个按钮下拉菜单几乎相同的标记，创建分割按钮下拉菜单，但是添加了.dropdown-toggle-split以在下拉插入符号做适当间隔。 我们使用这个额外的class将插入符号的两边水平padding减少了25%，并移除了为常规按钮下拉菜单添加的margin-left。这些额外的变化使插入符号集中在分割按钮中，并在主按钮旁边提供适当的空间。 Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Toggle Dropdown Action Another action Something else here Separated link 大小按钮下拉列表适用于所有大小的按钮，包括默认和拆分下拉按钮。 Action Another action Something else here Separated link Action Another action Something else here Separated link Large button ... Large split button Toggle Dropdown ... Action Another action Something else here Separated link Action Another action Something else here Separated link Small button ... Small split button Toggle Dropdown ... 深色下拉列表选择较暗的下拉菜单以匹配深色导航栏或自定义样式，方法是将.dropdown menu dark添加到现有的.dropdown menu。不需要更改下拉项。 Action Another action Something else here Separated link Dropdown button Action Another action Something else here Separated link把它放在导航栏里： Navbar Dropdown Action Another action Something else here 方向 RTL在RTL中使用Bootstrap时，方向是镜像的，这意味着dropstart将出现在右侧。 向上通过将.dropup添加到父元素，触发元素上方的下拉菜单。 Action Another action Something else here Separated link Action Another action Something else here Separated link Dropup Split dropup Toggle Dropdown 向右通过将.dropend添加到父元素，触发元素右侧的下拉菜单。 Action Another action Something else here Separated link Action Another action Something else here Separated link Dropright Split dropend Toggle Dropright 向左通过将.dropstart添加到父元素，触发元素左侧的下拉菜单。 Action Another action Something else here Separated link Action Another action Something else here Separated link Dropstart Toggle Dropstart Split dropstart 菜单项在过去下拉菜单内容必须是个链接，但v5不再是这样。现在您可以选择在下拉菜单中使用button元素，而不是仅使用a。 Dropdown Action Another action Something else here也可以使用.dropdown item文本创建非交互式下拉项。您可以随意使用自定义CSS或文本工具进一步设计样式。 Dropdown item text Action Another action Something else here Dropdown item text Action Another action Something else here 激活将.active添加到下拉列表中的项以将其设置为活动样式。要将活动状态传递给无障碍请使用aria-current属性并将page上的属性设为true。 Regular link Active link Another link Regular link Active link Another link 禁用将.disabled添加到下拉列表中的项以将其样式设置为禁用。 Regular link Disabled link Another link Regular link Disabled link Another link 菜单对齐默认情况下，下拉菜单自动定位在距父菜单顶部100%的位置，并沿父菜单的左侧。你可以用directive.drop*类来改变这一点，但是你也可以用附加的修饰符类来控制它们。 将.dropdown menu添加到.dropdown menu以右对齐下拉菜单。在RTL中使用引导时，方向是镜像的，这意味着下拉菜单结束将出现在左侧。 注意！ 下拉菜单的定位得益于Popper，除非它们包含在导航栏中。 Right-aligned menu example Action Another action Something else here 响应式对齐如果要使用响应式对齐，请通过添加data bs display=“static”属性禁用动态定位，并使用响应式变量类。 T要将下拉菜单与给定断点或更大断点右对齐，请添加.下拉菜单.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end。 Left-aligned but right aligned when large screen Action Another action Something else here要将下拉菜单与给定断点或更大断点左对齐，请添加.dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start。 Right-aligned but left aligned when large screen Action Another action Something else here注意，您不需要向navbars中的下拉按钮添加data bs display=“static”属性，因为navbars中没有使用Popper。 对齐选项考虑到上面显示的大多数选项，这里有一个综合演示，在一个地方有各种下拉对齐选项的下拉列表菜单。 Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Menu item Dropdown Menu item Menu item Menu item Right-aligned menu Menu item Menu item Menu item Left-aligned, right-aligned lg Menu item Menu item Menu item Right-aligned, left-aligned lg Menu item Menu item Menu item Dropstart Menu item Menu item Menu item Dropend Menu item Menu item Menu item Dropup Menu item Menu item Menu item 菜单内容 头部在任何下拉菜单中添加标题以标记操作的各个部分。 Dropdown header Action Another action Dropdown header Action Another action 分隔用分隔符分隔相关菜单项组。 Action Another action Something else here Separated link Action Another action Something else here Separated link 文本将任意形式的文本放置在带有文本的下拉菜单中，并使用间距工具。请注意，您可能需要其他大小调整样式来约束菜单宽度。 Some example text that's free-flowing within the dropdown menu. And this is more example text. Some example text that's free-flowing within the dropdown menu. And this is more example text. 表单将表单放入下拉菜单中，或将其放入下拉菜单中，然后使用边距或填充实用程序为其提供所需的负空间。 New around here? Sign up Forgot password? Email address Password Remember me Sign in New around here? Sign up Forgot password? Email address Password Remember me Sign in 下拉选项使用data-bs-offset或data-bs-reference来改变下拉菜单的位置。 Action Another action Something else here Action Another action Something else here Separated link Offset Action Another action Something else here Reference Toggle Dropdown Action Another action Something else here Separated link Sass VariablesVariables for all dropdowns: $dropdown-min-width: 10rem; $dropdown-padding-x: 0; $dropdown-padding-y: .5rem; $dropdown-spacer: .125rem; $dropdown-font-size: $font-size-base; $dropdown-color: $body-color; $dropdown-bg: $white; $dropdown-border-color: rgba($black, .15); $dropdown-border-radius: $border-radius; $dropdown-border-width: $border-width; $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width); $dropdown-divider-bg: $dropdown-border-color; $dropdown-divider-margin-y: $spacer / 2; $dropdown-box-shadow: $box-shadow; $dropdown-link-color: $gray-900; $dropdown-link-hover-color: shade-color($gray-900, 10%); $dropdown-link-hover-bg: $gray-200; $dropdown-link-active-color: $component-active-color; $dropdown-link-active-bg: $component-active-bg; $dropdown-link-disabled-color: $gray-500; $dropdown-item-padding-y: $spacer / 4; $dropdown-item-padding-x: $spacer; $dropdown-header-color: $gray-600; $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;Variables for the dark dropdown: $dropdown-dark-color: $gray-300; $dropdown-dark-bg: $gray-800; $dropdown-dark-border-color: $dropdown-border-color; $dropdown-dark-divider-bg: $dropdown-divider-bg; $dropdown-dark-box-shadow: null; $dropdown-dark-link-color: $dropdown-dark-color; $dropdown-dark-link-hover-color: $white; $dropdown-dark-link-hover-bg: rgba($white, .15); $dropdown-dark-link-active-color: $dropdown-link-active-color; $dropdown-dark-link-active-bg: $dropdown-link-active-bg; $dropdown-dark-link-disabled-color: $gray-500; $dropdown-dark-header-color: $gray-500;Variables for the CSS-based carets that indicate a dropdown’s interactivity: $caret-width: .3em; $caret-vertical-align: $caret-width * .85; $caret-spacing: $caret-width * .85; MixinsMixins are used to generate the CSS-based carets and can be found in scss/mixins/_caret.scss. @mixin caret-down { border-top: $caret-width solid; border-right: $caret-width solid transparent; border-bottom: 0; border-left: $caret-width solid transparent; } @mixin caret-up { border-top: 0; border-right: $caret-width solid transparent; border-bottom: $caret-width solid; border-left: $caret-width solid transparent; } @mixin caret-end { border-top: $caret-width solid transparent; border-right: 0; border-bottom: $caret-width solid transparent; border-left: $caret-width solid; } @mixin caret-start { border-top: $caret-width solid transparent; border-right: $caret-width solid; border-bottom: $caret-width solid transparent; } @mixin caret($direction: down) { @if $enable-caret { &::after { display: inline-block; margin-left: $caret-spacing; vertical-align: $caret-vertical-align; content: ""; @if $direction == down { @include caret-down(); } @else if $direction == up { @include caret-up(); } @else if $direction == end { @include caret-end(); } } @if $direction == start { &::after { display: none; } &::before { display: inline-block; margin-right: $caret-spacing; vertical-align: $caret-vertical-align; content: ""; @include caret-start(); } } &:empty::after { margin-left: 0; } } } 用法通过数据属性或JavaScript，下拉插件通过切换parent.dropdown菜单上的.show类来切换隐藏内容（下拉菜单）。data bs toggle=“dropdown”属性依赖于关闭应用程序级别的下拉菜单，因此最好始终使用它。 在支持触摸的设备上，打开下拉列表会将空mouseover处理程序添加到元素的直接子级。这一公认的丑陋的黑客行为对于解决iOS事件委托中的一个怪癖是必要的，否则会阻止在下拉列表之外的任何地方点击触发关闭下拉列表的代码。关闭下拉列表后，这些额外的空mouseover处理程序将被删除。 通过数据属性将数据bs toggle=“dropdown”添加到链接或按钮以切换下拉列表。 Dropdown trigger ... 通过JavaScript通过JavaScript调用下拉列表： var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle')) var dropdownList = dropdownElementList.map(function (dropdownToggleEl) { return new bootstrap.Dropdown(dropdownToggleEl) }) 仍然需要data-bs-toggle="dropdown"无论您是通过JavaScript调用dropdown还是使用dataapi，都需要在dropdown的触发器元素上显示data bs toggle=“dropdown”。 选项选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到data bs-，如data bs offset=“”中所示。 Name Type Default Description boundary string | element 'clippingParents' 下拉菜单的溢出约束边界。默认情况下，它是'clippingParents'，可以接受HTMLElement引用（仅限于JavaScript）。有关更多信息，请参阅文件。 preventOverflow docs. reference string | element | object 'toggle' 下拉菜单的引用元素。接受“toggle”、“parent”、HTMLElement引用或提供getBoundingClientRect的对象的值。有关更多信息，请参阅Popper的构造函数文档和虚拟元素文档。 constructor docs and virtual element docs. display string 'dynamic' 默认情况下，我们使用Popper进行动态定位。使用static禁用此功能。 offset array | string | function [0, 2]下拉列表相对于其目标的偏移量。您可以用逗号分隔的值在数据属性中传递字符串，例如：data bs offset=“10,20” 当一个函数用于确定偏移量时，调用它的第一个参数是包含popper放置、引用和popper rects的对象。触发元素DOM node作为第二个参数传递。函数必须返回一个包含两个数字的数组： [skidding, distance]. 有关更多信息，请参阅offset docs. popperConfig null | object | function null更改Bootstrap的默认Popper配置，请参阅Popper的配置。 Popper's configuration. 当一个函数被用来创建Popper配置时，它被一个包含引导的默认Popper配置的对象调用。它可以帮助您使用默认配置并将其与您自己的配置合并。函数必须返回Popper的配置对象。 与popperConfig一起使用 var dropdown = new bootstrap.Dropdown(element, { popperConfig: function (defaultBsPopperConfig) { // var newPopperConfig = {...} // use defaultBsPopperConfig if needed... // return newPopperConfig } }) 方法 Method Description toggle 切换给定导航栏或选项卡式导航的下拉菜单。 show 显示给定导航栏或选项卡式导航的下拉菜单。 hide 隐藏给定导航栏或选项卡式导航的下拉菜单。 update 更新元素下拉列表的位置。 dispose 销毁元素的下拉列表(删除DOM元素上存储的数据） getInstance 静态方法，允许您获取与DOM元素关联的下拉实例。 事件所有的下拉事件都在toggling元素上触发，然后弹出。因此，您还可以在.dropdown菜单的父元素上添加事件侦听器。hide.bs.dropdown 以及hidden.bs.dropdown 事件具有clickEvent属性（仅当原始事件类型为click时），该属性包含click事件的事件对象。 Method Description show.bs.dropdown 当调用show instance方法时，dropdown立即激发。 shown.bs.dropdown 当下拉列表对用户可见并且CSS转换完成时激发。 hide.bs.dropdown 用hide instance方法后立即激发。 hidden.bs.dropdown 当下拉列表对用户隐藏完成并且CSS转换完成时激发。 var myDropdown = document.getElementById('myDropdown') myDropdown.addEventListener('show.bs.dropdown', function () { // do something... }) |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |