bootstrap5侧边导航栏
时间: 2023-10-15 13:03:31 浏览: 128
Bootstrap 5 中的侧边导航栏使用 `Nav` 和 `Navs` 组件实现,以下是一个简单的示例代码:
```html
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span data-feather="home"></span>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
</div>
</div>
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
</main>
</div>
</div>
```
在这个示例中,侧边导航栏位于左侧,使用 `nav flex-column` 和 `nav-item` 类实现垂直布局,每个导航项都是一个 `a` 标签。右侧的主内容区域使用 `main` 标签包含,可以放置页面的主要内容。
更多关于 Bootstrap 5 导航栏的信息可以查看官方文档:https://getbootstrap.com/docs/5.0/components/navbar/
阅读全文