bootstrap二级菜单导航栏
时间: 2024-08-12 11:10:08 浏览: 38
Bootstrap是一个流行的前端开发框架,它提供了一系列预设的样式和组件,包括导航栏。Bootstrap的导航栏组件支持创建复杂的菜单结构,二级菜单就是其中一种常见的布局。在Bootstrap中,你可以使用`<nav>`标签配合`<ul>`和`<li>`元素以及`.dropdown`类来实现二级菜单。
以下是一个基本的Bootstrap二级菜单导航栏示例:
```html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
主菜单
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">选项1</a></li>
<li><a class="dropdown-item" href="#">选项2</a></li>
<!-- 更多选项... -->
</ul>
</li>
</ul>
</div>
</nav>
```
在这个例子中,当用户点击主菜单按钮时,`.dropdown`类会让`<ul>`下拉显示二级菜单。`.dropdown-toggle`和`<a>`标签一起创建了一个下拉链接,`data-bs-toggle="dropdown"`则是Bootstrap的自定义属性,用于激活下拉菜单。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)