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..
53 1
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
65 0
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
6月前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
|
6月前
|
前端开发
bootstrap组件
bootstrap组件
|
6月前
Bootstrap5 导航组件和面包屑
Bootstrap5 导航组件和面包屑
58 0
|
6月前
|
前端开发 JavaScript 容器
BootStrap 组件和样式
BootStrap 组件和样式
65 0
|
前端开发
Bootstrap 下拉菜单事件
Bootstrap 下拉菜单事件
|
前端开发 容器
|
前端开发 容器