在Bootstrap 4中，你可以使用下拉菜单（Dropdown）来创建具有下拉选项的菜单。以下是一个简单的例子，演示如何创建一个基本的下拉菜单：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <title>Bootstrap 4 下拉菜单</title>
</head>
<body>

<div class="container mt-4">
  <h2>下拉菜单示例</h2>

  <!-- 基本下拉菜单 -->
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      下拉菜单
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">选项 1</a>
      <a class="dropdown-item" href="#">选项 2</a>
      <a class="dropdown-item" href="#">选项 3</a>
    </div>
  </div>

  <!-- 分割线和禁用项 -->
  <div class="dropdown mt-3">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      分割线和禁用项
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
      <a class="dropdown-item" href="#">选项 1</a>
      <a class="dropdown-item" href="#">选项 2</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">禁用项</a>
    </div>
  </div>

</div>

<!-- Bootstrap JavaScript 和 jQuery（可选）-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>
</html>

在这个例子中，我们使用了dropdown类来创建下拉菜单容器，使用btn和btn-secondary类来创建按钮。下拉菜单的选项由dropdown-menu类定义。你可以根据需要添加更多的选项。此外，使用dropdown-divider类可以在菜单中添加分割线，而disabled类可以创建禁用的菜单项。

Bootstrap的下拉菜单提供了很多可定制的选项，你可以根据实际需求进行更多的定制。这只是一个简单的示例。


转载请注明出处：http://www.zyzy.cn/article/detail/5496/Bootstrap