{site_name}

{site_name}

🌜 搜索

Bootstrap 5 (BS5) 导航是一种基于HTML、CSS和JavaSc

前端 𝄐 0
bootstrap导航有哪些,bootstrap导航菜单,bootstrap4 导航栏,在bootstrap中,有哪几种导航,bootstrap导航栏怎么居中,bootstrap4侧边导航
Bootstrap 5 (BS5) 导航是一种基于HTML、CSS和JavaScript构建的导航栏,它能够以响应式设计显示在各种设备上,并提供一组丰富的样式和可自定义的选项。BS5 导航可以帮助开发人员快速创建漂亮和易于使用的网站导航菜单。

BS5 导航由以下几个部分组成:

1. 导航容器(nav):包含导航栏的主要容器元素。
2. 标头(header):通常包含品牌标志和一些其他的导航链接。
3. 列表(ul):包含所有的导航链接,以及一个可选的下拉菜单。
4. 链接(li):每个导航链接都用一个列表项表示。
5. 下拉菜单(dropdown):可选的下拉菜单包含一个或多个下拉菜单链接。

以下是一个简单的 BS5 导航示例:

html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</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">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>


在这个示例中,nav 容器包含了一个带有 navbar-brand 类的品牌链接和一个用来切换导航菜单的折叠按钮。导航链接使用 nav-item 和 nav-link 类来表示,并且可以使用 active 类来表示当前选中的页面。下拉菜单使用了 dropdown 和 dropdown-menu 类。