Bootstrap4 下拉菜单学习笔记
Bootstrap是一套流行的前端CSS框架，它提供了许多实用且易于使用的组件，其中包括下拉菜单。在本学习笔记中，我们将关注Bootstrap 4的下拉菜单组件，并举出一些实例来帮助您学习如何使用它们。
如何创建一个基本的下拉菜单？
首先，我们需要添加必要的Bootstrap4文件到我们的项目中。这可以通过将以下代码添加到HTML文件的<head>标签中来完成：
Copy Code<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
我们还需要创建一个具有下拉菜单选项的HTML元素。这可以通过在任何HTML元素中添加class为“dropdown”的div来完成。例如：
Copy Code<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>
这将创建一个具有三个选项的基本下拉菜单。您可以通过点击按钮来打开或关闭下拉菜单。
如何在导航栏中创建下拉菜单？
除了在HTML元素中创建下拉菜单之外，您还可以将下拉菜单添加到导航栏中。这可以通过在导航栏链接中添加class为“dropdown”的div来完成。例如：
Copy Code<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">特色功能</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉菜单
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">下拉菜单选项1</a>
<a class="dropdown-item" href="#">下拉菜单选项2</a>
<a class="dropdown-item" href="#">下拉菜单选项3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">其他</a>
</div>
</li>
</ul>
</div>
</nav>
这将为导航栏创建一个具有下拉菜单选项的链接。
实例演示
可以通过访问Bootstrap的官方文档，查看各种下拉菜单类的实例: https://getbootstrap.com/docs/4.0/components/dropdowns/
以上是基本的Bootstrap4下拉菜单学习笔记，希望能对您有所帮助！