bootstrap折叠菜单-bootstrap 折叠侧边栏
解决方案简述
Bootstrap框架提供了丰富的组件和样式，使得创建响应式的折叠菜单变得简单。介绍如何使用Bootstrap创建一个可以折叠的侧边栏菜单，包括基本的HTML结构、必要的CSS样式以及JavaScript交互逻辑。
一、基于官方类构建
1.1 引入Bootstrap资源
确保页面中引入了Bootstrap CSS和JS文件，可以通过CDN快速添加：
html
<!-- 版本 Bootstrap CSS -->
<!-- 版本 Bootstrap JS 和 Popper.js --></p>
<p>1.2 创建基础HTML结构
html</p>
<div class="d-flex" id="wrapper">
<!-- 侧边栏 -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Shortcuts</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Overview</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Events</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Status</a>
</div>
</div>
<!-- 内容区域 -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Simple Sidebar</h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens.</p>
</div>
</div>
</div>
<p>1.3 添加样式控制折叠效果
css</p>
<h1>wrapper {</h1>
<pre><code>overflow-x: hidden;
}
sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
transition: margin .25s ease-out;
}
wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
page-content-wrapper {
min-width: 100vw;
transition: margin-left .25s ease-out;
}
wrapper.toggled #page-content-wrapper {
margin-left: 15rem;
}
1.4 JavaScript实现折叠功能
javascript
$(document).ready(function(){
$("#menu-toggle").click(function(e){
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
注意：如果使用Bootstrap原生方式，则不需要额外的JavaScript代码，而是使用data-bs-toggle="collapse"等属性来实现。
二、自定义增强方案
除了直接使用Bootstrap提供的类名外，还可以根据实际需求进行定制化开发：
- 增加动画效果：利用CSS3动画或第三方动画库（如Animate.css）为切换过程添加平滑过渡。
- 响应式设计优化：根据不同屏幕尺寸调整侧边栏宽度和显示位置。
- 动态内容加载：结合Ajax技术实现在不刷新页面的情况下更新菜单内容。
- 多级菜单支持：通过嵌套列表元素创建多层级的导航结构，并配合JavaScript实现逐层展开/收起功能。
以上就是关于使用Bootstrap创建折叠侧边栏菜单的方法介绍，您可以根据具体应用场景选择合适的技术路线。
