第23节 Bootstrap5下拉菜单组件用法

On this page

23.1 Bootstrap5下拉菜单组件

下拉菜单(Dropdowns)和表单里面的下拉列表(Select)具有很多外观上的相似性,但却有着本质的不同,下拉列表使用的是Select表单,而下拉菜单(Dropdowns)使用的是div和css实现。

下拉列表是可切换的上下文覆盖,用于显示链接列表等。它们与附带的Bootstrap 下拉JavaScript插件交互。它们是通过点击来切换的,而不是通过悬停来切换的;这是一个有意的设计决定,如果你需要悬停切换,可以通过js实现。

23.2 示例

23.2.1 单个按钮

将下拉菜单的切换(按钮或链接)和下拉菜单包装在dropdown中就变成了下拉菜单。

可以从a或button元素触发下拉列表,以更好地满足您的潜在需求。这里显示的示例在适当的地方使用语义ul元素,但是支持自定义标记。

任何单个.btn都可以变成一个下拉切换,并有一些标记更改。下面是如何将它们与button元素一起使用:

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>下拉菜单</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        button下拉菜单
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">子菜单1</a></li>
        <li><a class="dropdown-item" href="#">子菜单2</a></li>
        <li><a class="dropdown-item" href="#">子菜单3</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">子菜单4</a></li>
        </ul>
        </div>

        <br><br><br>
        <div class="dropdown">
            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
            a 链接下拉菜单
            </a>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <li><a class="dropdown-item" href="#">子菜单1</a></li>
                <li><a class="dropdown-item" href="#">子菜单2</a></li>
                <li><a class="dropdown-item" href="#">子菜单3</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">子菜单4</a></li>
            </ul>
            </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
复制代码

2.1.png

两种菜单从外观和体验上看是没有任何区别的。

23.2.2 按钮组

按钮组就是同一行中同时存在几个按钮,默认情况下,由于菜单默认是独占一行的,两个菜单靠在一起不美观,故上面的例子加了几个换行。

按钮组的使用十分简单,直接把按钮的<div class="dropdown">换成<div class="btn-group">,并不是把单个按钮放在一个按钮组容器中,这点一定要注意。

 <div class="btn-group">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
              button下拉菜单
              </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
              <li><a class="dropdown-item" href="#">子菜单1</a></li>
              <li><a class="dropdown-item" href="#">子菜单2</a></li>
              <li><a class="dropdown-item" href="#">子菜单3</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">子菜单4</a></li>
              </ul>
    </div>
   <div class="btn-group">
                  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                  a 链接下拉菜单
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                      <li><a class="dropdown-item" href="#">子菜单1</a></li>
                      <li><a class="dropdown-item" href="#">子菜单2</a></li>
                      <li><a class="dropdown-item" href="#">子菜单3</a></li>
                      <li><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item" href="#">子菜单4</a></li>
                  </ul>
 </div>
复制代码

2.2.png

23.2.3 分割按钮

默认情况下,点击按钮任何区域,都会弹出下拉菜单,但是通过往添加dropdown-toggle-split以在下拉插入符号做适当间隔,这插入符号的两边水平padding减少了25%,并移除了为常规按钮下拉菜单添加的margin-left。这些额外的变化使插入符号集中在分割按钮中,并在主按钮旁边提供适当的空间。

分割按钮只能用于按钮组,只有点击按钮上的三角符号,下拉菜单才会弹出,点按钮其他地方都不在弹出。 下面代码第一个是普通按钮,第二个是分割按钮

      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        普通下拉菜单
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">子菜单1</a></li>
        <li><a class="dropdown-item" href="#">子菜单2</a></li>
        <li><a class="dropdown-item" href="#">子菜单3</a></li>
        </ul>
        </div>

        <br>
        <div class="btn-group">
            <button type="button" class="btn btn-secondary">分割下拉菜单</button>
            <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" href="#">子菜单1</a></li>
            <li><a class="dropdown-item" href="#">子菜单2</a></li>
            <li><a class="dropdown-item" href="#">子菜单3</a></li>
            </ul>
        </div>

复制代码

2.3.png

23.3 下拉菜单的大小

将或者加到button按钮类中,就可以实现按钮大小的设置,虽然例子中用的是按钮组,但对单个按钮和分割按钮同样适用。 下面是三种按钮大小比较:

        <div class="btn-group">
            <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            sm下拉菜单
            </button>
        </div>
        <div class="btn-group">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            下拉菜单
            </button>
        </div>
        <div class="btn-group">
            <button class="btn btn-lg btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            lg下拉菜单
            </button>
        </div>
        <div class="btn-group">
            <button class="btn btn-secondary btn-sm" type="button">
            sm分割按钮
            </button>
            <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            </div>
复制代码

13.3.1.png

注意:后面一般情况下,为了节俭代码,对于不需要弹出选项的菜单都省略菜单部分。

23.4 下拉菜单的颜色

下拉菜单的颜色与按钮的颜色完全一致,以下是各种颜色的下拉菜单:

       <div class="btn-group">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
              primary
            </button>
        </div>
        <div class="btn-group">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            secondary
          </button>
      </div>
      <div class="btn-group">
        <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
          success
        </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        danger
      </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        warning
      </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        info
      </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        light
      </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        dark
      </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        link
      </button>
    </div>
复制代码

13.4.1.png

23.5 深色下拉列表

23.5.1 深色下拉列表

选择较暗的下拉菜单以匹配深色导航栏或自定义样式,方法是将dropdown-menu-dark添加到现有的dropdown-menu。不需要更改下拉项。

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
        深色下拉菜单
        </button>
        <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
        <li><a class="dropdown-item active" href="#">Action选项1</a></li>
        <li><a class="dropdown-item" href="#">选项2</a></li>
        <li><a class="dropdown-item" href="#">选项3</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">选项4</a></li>
        </ul>
        </div>
复制代码

13.5.1.png

23.5.2 含深色下拉列表的导航

      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
        <a class="navbar-brand" href="#">品牌</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                深色下拉菜单
            </a>
            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
                <li><a class="dropdown-item active" href="#">Action选项1</a></li>
                <li><a class="dropdown-item" href="#">选项2</a></li>
                <li><a class="dropdown-item" href="#">选项3</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">选项4</a></li>
                </ul>
          </li>
        </ul>
        </div>
        </div>
        </nav>
复制代码

13.5.2.png

23.6 菜单项弹出方向

下拉菜单默认的选项默认是向下弹出的,通过在下拉菜单的容器中添加dropup、dropstart、dropend,可以分别设置向上、向左、向右弹出。

这几个类的用法很简单,直接加在容器上即可。需要注意的是,这几个方向设置都是在空间足够情况下说的,如果向上弹出,但是上面空间不够,则会自动改为向下弹出。向左、向右也是如此

<div class="text-center">
      <br><br><br><br><br><br>
      <div class="dropdown dropup">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            向上
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item active" href="#">子菜单1</a></li>
        <li><a class="dropdown-item" href="#">子菜单2</a></li>
        <li><a class="dropdown-item" href="#">子菜单3</a></li>
        </ul>
     </div> <br><br><br>

     <div class="dropdown dropstart">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
            向左
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
        <li><a class="dropdown-item active" href="#">子菜单1</a></li>
        <li><a class="dropdown-item" href="#">子菜单2</a></li>
        <li><a class="dropdown-item" href="#">子菜单3</a></li>
        </ul>
     </div>
     <br><br><br>
     <div class="dropdown dropend">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
            向右
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
        <li><a class="dropdown-item active" href="#">子菜单1</a></li>
        <li><a class="dropdown-item" href="#">子菜单2</a></li>
        <li><a class="dropdown-item" href="#">子菜单3</a></li>
        </ul>
     </div>
    </div>
复制代码

13.6.1.png

23.7 菜单项

23.7.1 使用其他内容

在过去下拉菜单内容必须是个链接,但Bootstrap5不再是这样。现在您可以选择在下拉菜单中使用button元素,而不是仅使用a。

也可以使用dropdown-item文本创建非交互式下拉项。您可以随意使用自定义CSS或文本工具进一步设计样式。默认情况下,使用链接和按钮选项,鼠标悬停在选项上会有阴影,文本选项五阴影效果。

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
        其他选项下拉菜单
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
        <li><button class="dropdown-item" type="button">按钮选项1</button></li>
        <li><button class="dropdown-item" type="button">按钮选项2</button></li>
        <li><span class="dropdown-item-text">文本选项</span></li>

        </ul>
        </div>
复制代码

13.7.1.png

23.7.2 激活禁用

将active添加到下拉列表中的项以将其设置为活动样式。 将disabled添加到下拉列表中的项以将其样式设置为禁用。

      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
        下拉菜单
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
        <li><a class="dropdown-item active" href="#">激活选项</a></li>
        <li><a class="dropdown-item" href="#">普通选项</a></li>
        <li><a class="dropdown-item disabled" href="#">禁用选项</a></li>
        </ul>
        </div>
复制代码

13.7.2.png

23.7.3 菜单项右对齐

默认情况下,下拉菜单自动定位在距父菜单顶部100%的位置,并沿父菜单的左侧。你可以将dropdown-menu-end添加到dropdown-menu以右对齐下拉菜单。

      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            菜单项右对齐 太短了看不出
        </button>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">子菜单1</a></li>
        <li><a class="dropdown-item" href="#">子菜单2</a></li>
        <li><a class="dropdown-item" href="#">子菜单3</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">子菜单4</a></li>
        </ul>
        </div>
复制代码

13.7.3.png

23.7.4 菜单项响应式右对齐

如果要使用响应式对齐,请通过在button添加 data-bs-display="static"属性禁用动态定位,并使用响应式变量类。 在dropdown-menu添加dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>下拉菜单</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button"  data-bs-toggle="dropdown"  data-bs-display="static" aria-expanded="false">
            菜单项响应式右对齐,改变浏览器大小观看
        </button>
        <ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">子菜单1</a></li>
        <li><a class="dropdown-item" href="#">子菜单2</a></li>
        <li><a class="dropdown-item" href="#">子菜单3</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">子菜单4</a></li>
        </ul>
        </div>
        
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
复制代码

这个在lg断点前左对齐,断点后右对齐,比较简单就不演示了,提供完整代码,有兴趣的试一下。

23.7.5 菜单项放入表单

将表单放入下拉菜单中,或将其放入下拉菜单中,然后使用边距或填充实用程序为其提供所需的负空间。

      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button"  data-bs-toggle="dropdown" aria-expanded="false">
            菜单项包含登录表单
        </button>
        <div class="dropdown-menu">
            <form class="px-4 py-3">
            <div class="mb-3">
            <label for="exampleDropdownFormEmail1" class="form-label">电子邮箱</label>
            <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
            </div>
            <div class="mb-3">
            <label for="exampleDropdownFormPassword1" class="form-label">密码</label>
            <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
            </div>
            <div class="mb-3">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="dropdownCheck">
              <label class="form-check-label" for="dropdownCheck">
                记住状态
              </label>
            </div>
            </div>
            <button type="submit" class="btn btn-primary">登录</button>
            </form>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">还没账户,点此注册</a>
            <a class="dropdown-item" href="#">忘记密码</a>
        </div>
        </div>
复制代码

13.7.5.png

限于篇幅,本文对下拉菜单做了简要介绍,一般情况下足够平常的使用了,如果你需要更详细的了解下拉菜单用法,请参考Bootstrap中文文档 >组件 >下拉菜单相关章节。

今天的课程就到这里,请关注我,及时学习 俺老刘原创的《Bootstrap5零基础到精通》第24节 Bootstrap5分页导航Pagination组件用法,从字面也可以看出,按钮组就是多个按钮的组合。

如果这篇文章对你有帮助,记得随手点赞哦!

返回顶部