Bootstrap下拉菜单组件

104次阅读
没有评论

Bootstrap 5提供了下拉菜单组件,可用于在导航栏、工具栏和其他区域中创建下拉菜单。下面是使用Bootstrap 5创建下拉菜单的完整示例:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 5 Dropdown Menu Example</title>
    <!-- 加载Bootstrap 5样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown link
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 加载Bootstrap 5的JavaScript依赖 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>

</body>
</html>

在这个示例中,我们创建了一个导航栏,并在其中添加了一个下拉菜单。通过为“dropdown”类的导航项目添加一个“dropdown-menu”类,我们可以定义下拉菜单的内容。使用“data-bs-toggle”和“data-bs-target”属性,我们定义了当用户单击下拉菜单链接时要切换的元素。

需要注意的是,Bootstrap 5需要使用其内置的JavaScript库来处理下拉菜单。因此,我们必须包含Bootstrap 5的JavaScript依赖,以便正确地呈现下拉菜单。

正文完
 
评论(没有评论)