后端开发教程 - Java、Spring Boot 实战 - msg200.com
Bootstrap 5 侧边栏示例
既然 Bootstrap 5 有了Offcanvas 组件👏，那么探索如何构建 Bootstrap 5 侧边栏就变得很有意义了。侧边栏通常用于垂直导航，但实际上它们可以用于任何与主内容无关的内容。
侧边栏可能会很复杂。有很多事情需要考虑……
-
响应式？根据屏幕宽度实现不同的宽度、可见性或方向？
-
多级？导航项有子级吗？这会影响导航项的高度、滚动或可见性吗？
-
可切换？侧边栏可以通过按钮或“汉堡包”切换吗？
-
推送还是覆盖？主要内容是否隐藏在侧边栏后面或旁边？
-
左还是右？侧边栏是在主要内容的左边还是右边？
-
固定还是粘贴？侧边栏在页面滚动时如何定位？
-
动画风格？向左/向右/向上/向下滑动？折叠？
在我看来，完成以上所有考虑后，最好的方法是查看各种侧边栏示例。这些示例演示了带导航的侧边栏，因为我认为这是主要功能。这些示例也使用了常见的页面布局和内容，因为侧边栏通常会受到整个页面布局的影响。
侧边栏示例 1
带有子菜单的左侧垂直侧边栏
这是左侧两级垂直侧边栏，带有可折叠的菜单项。菜单功能类似于“手风琴”，一次只能打开一个菜单。它还具有响应式设计，可以显示主内容区域。在移动设备上，侧边栏的宽度会缩小，文本标签会隐藏，并折叠为仅显示图标。
HTML 标记
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
<a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class="fs-5 d-none d-sm-inline">Menu</span>
</a>
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
<li class="nav-item">
<a href="#" class="nav-link align-middle px-0">
<i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline">Home</span>
</a>
</li>
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span> </a>
<ul class="collapse show nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
<li class="w-100">
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 1 </a>
</li>
<li>
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 2 </a>
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-4 bi-table"></i> <span class="ms-1 d-none d-sm-inline">Orders</span></a>
</li>
<li>
<a href="#submenu2" data-bs-toggle="collapse" class="nav-link px-0 align-middle ">
<i class="fs-4 bi-bootstrap"></i> <span class="ms-1 d-none d-sm-inline">Bootstrap</span></a>
<ul class="collapse nav flex-column ms-1" id="submenu2" data-bs-parent="#menu">
<li class="w-100">
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 1</a>
</li>
<li>
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 2</a>
</li>
</ul>
</li>
<li>
<a href="#submenu3" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm-inline">Products</span> </a>
<ul class="collapse nav flex-column ms-1" id="submenu3" data-bs-parent="#menu">
<li class="w-100">
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 1</a>
</li>
<li>
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 2</a>
</li>
<li>
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 3</a>
</li>
<li>
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 4</a>
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline">Customers</span> </a>
</li>
</ul>
<hr>
<div class="dropdown pb-4">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle">
<span class="d-none d-sm-inline mx-1">loser</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
<div class="col py-3">
Content area...
</div>
</div>
</div>
侧边栏示例 2
垂直侧边栏在移动设备上变为导航栏
第二个示例是垂直侧边栏（在大屏幕上），切换到水平导航栏（在较小的移动屏幕上）。这是一个多级侧边栏，带有可折叠的菜单项。菜单功能类似于“手风琴”，每次只打开一个菜单。
此侧边栏布局还考虑了粘性与滚动行为。在较大的屏幕上，侧边栏和底部页脚均显示为固定。只有内容区域可滚动（当内容高度允许时）。在移动设备屏幕上，水平侧边栏保持固定在顶部（使用粘性位置），其余内容和页脚部分则滚动至整个页面高度。因此，需要对 CSS 进行一些小的修改，使其高度具有响应性……
HTML 标记
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto bg-light sticky-top">
<div class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top">
<a href="/" class="d-block p-3 link-dark text-decoration-none" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Icon-only">
<i class="bi-bootstrap fs-1"></i>
</a>
<ul class="nav nav-pills nav-flush flex-sm-column flex-row flex-nowrap mb-auto mx-auto text-center align-items-center">
<li class="nav-item">
<a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Home">
<i class="bi-house fs-1"></i>
</a>
</li>
<li>
<a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Dashboard">
<i class="bi-speedometer2 fs-1"></i>
</a>
</li>
<li>
<a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Orders">
<i class="bi-table fs-1"></i>
</a>
</li>
<li>
<a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Products">
<i class="bi-heart fs-1"></i>
</a>
</li>
<li>
<a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Customers">
<i class="bi-people fs-1"></i>
</a>
</li>
</ul>
<div class="dropdown">
<a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi-person-circle h2"></i>
</a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm p-3 min-vh-100">
<!-- content -->
</div>
</div>
</div>
如果你不需要粘性页脚，这里有一个不需要额外 CSS 的细微变化
侧边栏示例 3
带有 Bootstrap 图标的侧边栏
下一个示例与上一个类似，只是它在移动设备上变为了水平方向。这个全高示例使用了Bootstrap 图标中精美的大图标。此示例还使用了粘性位置，使侧边栏在页面滚动时显示为固定状态。
HTML 标记
<div class="container-fluid">
<div class="row">
<div class="col-sm-auto bg-light sticky-top">
<div class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top">
<a href="/" class="d-block p-3 link-dark text-decoration-none" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Icon-only">
<i class="bi-bootstrap fs-1"></i>
</a>
<ul class="nav nav-pills nav-flush flex-sm-column flex-row flex-nowrap mb-auto mx-auto text-center align-items-center">
<li class="nav-item">
<a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Home">
<i class="bi-house fs-1"></i>
</a>
</li>
<li>
<a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Dashboard">
<i class="bi-speedometer2 fs-1"></i>
</a>
</li>
<li>
<a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Orders">
<i class="bi-table fs-1"></i>
</a>
</li>
<li>
<a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Products">
<i class="bi-heart fs-1"></i>
</a>
</li>
<li>
<a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Customers">
<i class="bi-people fs-1"></i>
</a>
</li>
</ul>
<div class="dropdown">
<a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi-person-circle h2"></i>
</a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm p-3 min-vh-100">
<!-- content -->
</div>
</div>
</div>
侧边栏示例 4
折叠画布左侧边栏
这是第一个可折叠的示例，它使用了 Bootstrap 5 中新增的 Offcanvas 组件。左侧边栏覆盖在主内容区域上，可以使用切换按钮隐藏/显示。
HTML 标记
<div class="offcanvas offcanvas-start w-25" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="false">
<div class="offcanvas-header">
<h6 class="offcanvas-title d-none d-sm-block" id="offcanvas">Menu</h6>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body px-0">
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-start" id="menu">
<li class="nav-item">
<a href="#" class="nav-link text-truncate">
<i class="fs-5 bi-house"></i><span class="ms-1 d-none d-sm-inline">Home</span>
</a>
</li>
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav-link text-truncate">
<i class="fs-5 bi-speedometer2"></i><span class="ms-1 d-none d-sm-inline">Dashboard</span> </a>
</li>
<li>
<a href="#" class="nav-link text-truncate">
<i class="fs-5 bi-table"></i><span class="ms-1 d-none d-sm-inline">Orders</span></a>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle text-truncate" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fs-5 bi-bootstrap"></i><span class="ms-1 d-none d-sm-inline">Bootstrap</span>
</a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdown">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link text-truncate">
<i class="fs-5 bi-grid"></i><span class="ms-1 d-none d-sm-inline">Products</span></a>
</li>
<li>
<a href="#" class="nav-link text-truncate">
<i class="fs-5 bi-people"></i><span class="ms-1 d-none d-sm-inline">Customers</span> </a>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col min-vh-100 py-3">
<!-- toggler -->
<button class="btn float-end" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" role="button">
<i class="bi bi-arrow-right-square-fill fs-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvas"></i>
</button>
Content..
</div>
</div>
</div>
侧边栏示例 5
带有搜索表单和左侧粘性侧边栏的导航栏
最后一个例子考虑了其他组件，例如顶部导航栏和主内容区域。侧边栏使用 sticky-top 属性固定在左侧，以便在页面滚动时保持原位。在移动设备上，侧边栏会切换为位于导航栏下方的水平图标栏。
侧边栏示例 6
简单的画布外“推送”侧边栏
如果你读过我之前写的Bootstrap 5 Offcanvas 文章，你应该知道 Offcanvas 组件是用来做“覆盖式”侧边栏的。但是，如果你想要一个“推送式”侧边栏，Offcanvas 组件就不太适用了。
要创建“推”型侧边栏，请使用 Bootstrap 网格列来包含侧边栏，并使用 Collapse 组件来打开/关闭侧边栏...
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-auto px-0">
<div id="sidebar" class="collapse collapse-horizontal show border-end">
<div id="sidebar-nav" class="list-group border-0 rounded-0 text-sm-start min-vh-100">
<a href="#" class="list-group-item border-end-0 d-inline-block text-truncate" data-bs-parent="#sidebar"><span>Item</span> </a>
(more nav items) ...
</div>
</div>
</div>
<main class="col ps-md-2 pt-2">
<a href="#" data-bs-target="#sidebar" data-bs-toggle="collapse" class="border rounded-3 p-1 text-decoration-none"><i class="bi bi-list bi-lg py-2 p-1"></i> Menu</a>
<div class="row">
<div class="col-12">
Content area...
</div>
</div>
</main>
</div>
</div>
你有没有注意到，以上所有示例都只使用了Bootstrap 类？😎 这意味着你不需要自定义 CSS 即可使用 Bootstrap 5 创建侧边栏。
Bootstrap官方侧边栏示例👀 也值得一看。官方 Bootstrap 示例并未考虑整个页面布局，但在单独考虑侧边栏内容时可能仍然有帮助。探索 Bootstrap 5 的其他新功能
希望这些侧边栏示例能助你开启下一个 Bootstrap 项目。欢迎在评论区留言分享你的想法！
文章来源：https://dev.to/codeply/bootstrap-5-sidebar-examples-38pb