Bootstrap 组件:下拉菜单组件的使用

简介: Bootstrap 框架

作者:WangMin
格言:努力做好自己喜欢的每一件事

banner.png

用于显示链接列表的可切换、有上下文的菜单。如果要实现下拉菜单的交互性, 要使用JavaScript 。

实例

将下拉菜单按钮触发器和下拉菜单都包裹在.dropdown里,或者另一个添加了position: relative;的元素。然后加入组成菜单的 HTML 代码。
为下拉菜单的父元素设置.dropdown类,菜单向下弹出:

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="menu1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</div>

1.png

为下拉菜单的父元素设置.dropup类,菜单向上弹出(默认是向下弹出的):

<div class="dropup">
    <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="menu1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</div>

2.png


对齐

默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。给.dropdown-menu添加.dropdown-menu-right类可以让菜单右对齐。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</div>

3.png


标题

如果在下拉菜单中有几组不同的动作,可以通过添加标题(也就是在需要设为标题的标签上添加类 .dropdown-header )来区分一组动作。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1">
        <li class="dropdown-header">第一部分</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li class="dropdown-header">第二部分</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</div>

4.png


分割线

为下拉菜单添加一条分割线,也就是在需要分割的标签之前添加类 .divider ,还需要添加role="separator"这个属性,用于将多个链接分组。它的作用跟标题差不多。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1">
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li class="divider" role="separator"></li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</div>

5.png


禁用菜单选项

为下拉菜单中的<li>元素添加.disabled类,从而禁用相应的菜单项,让该菜单项的链接变灰并失去鼠标悬停效果。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" ara-haspopup="true" aria-expanded="true">Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="menu1">
         <li><a href="#">常规链接</a></li>
         <li class="disabled"><a href="#">禁用链接</a></li>
         <li><a href="#">其他链接</a></li>
    </ul>
</div>

6.png

注意:被禁用的链接仍然可以点击,除非你去掉链接的 href 属性,或者使用JavaScript代码阻止用户点击链接。


就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap下拉菜单与选项卡
Bootstrap下拉菜单与选项卡
N..
55 1
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
66 0
|
6月前
|
前端开发
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
Bootstrap5 下拉菜单7
按钮组中可以嵌入下拉菜单,实现更多功能选项。示例展示了水平和垂直按钮组中添加下拉菜单的方法,通过 `dropdown-toggle` 类和 `data-bs-toggle=&quot;dropdown&quot;` 属性实现下拉效果。
|
9天前
|
前端开发
Bootstrap5 下拉菜单5
此示例展示了如何使用 Bootstrap 的 `dropstart` 类创建一个向左弹出的下拉菜单。通过在 `div` 元素上添加 `dropstart` 类,可以实现下拉菜单从按钮左侧弹出的效果。菜单包含三个链接项。
Bootstrap5 下拉菜单6
使用 `.dropdown-item-text` 类可以在下拉菜单中添加纯文本项,
Bootstrap5 下拉菜单4
要使上拉菜单向上弹出,可在 div 元素中添加 &quot;dropup&quot; 类。示例代码包括一个按钮和一个包含三个链接的下拉菜单列表。当点击按钮时,菜单将向上弹出。
Bootstrap5 下拉菜单3
下拉菜单默认向下弹出,但可以通过添加类 `.dropdown-menu-end` 实现向右下方弹出。示例代码展示了如何创建一个向右下方弹出的下拉菜单按钮,包含三个链接项。
|
10天前
|
移动开发
Bootstrap5 下拉菜单2
`.dropdown-header` 类用于在下拉菜单中添加标题,例如:`&lt;li&gt;&lt;h5 class=&quot;dropdown-header&quot;&gt;标题 1&lt;/h5&gt;&lt;/li&gt;`。`.active` 类可使选项高亮显示,`.disabled` 类可禁用选项。下拉菜单可通过添加 `.dropend` 或 `.dropstart` 类实现右对齐或左对齐。示例代码展示了如何使用这些类。
|
10天前
Bootstrap5 下拉菜单1
Bootstrap5 下拉菜单是可切换的上下文菜单,以列表形式显示链接。通过 `.dropdown` 类指定下拉菜单,按钮或链接需添加 `.dropdown-toggle` 和 `data-bs-toggle=&quot;dropdown&quot;` 属性。实际下拉菜单使用 `.dropdown-menu` 类,选项添加 `.dropdown-item` 类。`.dropdown-divider` 类用于创建水平分割线。