Bootstrap 4 下拉菜单

下拉菜单可以用于隐藏和分组菜单项，是以列表格式显示链接的上下文菜单

基本的下拉菜单

Bootstrap 提供了 .dropdown 、.dropdown-item 、 .dropdown-menu css 类用于创建一个下拉菜单

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" >="dropdown">Java
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">JSP</a>
      <a class="dropdown-item" href="#">Servlet</a>
    </div>
</div>

下拉菜单中的分割线

使用 .dropdown-divider 可以在下拉菜单中创建一个水平的分割线

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" >="dropdown">Java
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">JSP</a>
      <a class="dropdown-item" href="#">Servlet</a>
      <a class="dropdown-item" href="#">Spring</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Android</a>
    </div>
</div>

设置下拉菜单中的标签

使用 .dropdown-header 可以在下拉菜单中添加标签

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" >="dropdown">Java
    </button>
    <div class="dropdown-menu">
      <h5 class="dropdown-header">Java Web</h5>
      <a class="dropdown-item" href="#">JSP</a>
      <a class="dropdown-item" href="#">Servlet</a>
      <a class="dropdown-item" href="#">Spring</a>
      <h5 class="dropdown-header">APP</h5>
      <a class="dropdown-item" href="#">Android</a>
    </div>
</div>

下拉菜单中的可用项与禁用项

添加 .active 会让下拉菜单的选项高亮显示(添加蓝色背景)

添加 .disabled 则可以禁用下拉菜单的选项

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" >="dropdown">
    Java
  </button>
  <div class="dropdown-menu ">
    <a class="dropdown-item active" href="#">Servlet</a>
    <a class="dropdown-item disabled" href="#">JSP</a>
    <a class="dropdown-item" href="#">Spring</a>
  </div>
</div>

右对齐的下拉菜单

想让下拉菜单右对齐，可以在 .dropdown-menu 元素上添加 .dropdown-menu-right

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" >="dropdown">
    Java
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">Servlet</a>
    <a class="dropdown-item" href="#">JSP</a>
    <a class="dropdown-item" href="#">Spring</a>
  </div>
</div>

向上弹出的下拉菜单

默认情况下，下拉菜单是向下弹出的

如果想要向上弹出，则可以使用 .dropup 代替 .dropdown

<div class="dropup">
  <button type="button" class="btn btn-primary dropdown-toggle" >="dropdown">
    Java
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Servlet</a>
    <a class="dropdown-item" href="#">JSP</a>
    <a class="dropdown-item" href="#">Spring</a>
  </div>
</div>

按钮中的下拉菜单

可以在按钮中添加下拉菜单

<div class="btn-group">
  <button type="button" class="btn btn-primary">Java</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" >="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Servlet</a>
    <a class="dropdown-item" href="#">JSP</a>
  </div>
</div>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/19_961