bootstrap左侧边栏菜单

《bootstrap左侧边栏菜单》

解决方案简述

在网页开发中，实现一个美观且功能良好的左侧边栏菜单是非常常见的需求。使用Bootstrap框架可以简化这一过程。通过结合Bootstrap的栅格系统、导航组件等特性，能够快速构建出响应式的左侧边栏菜单，以适应不同设备的屏幕尺寸，并且可以方便地添加菜单项、设置样式等。

基于默认nav组件的方式

这是比较直接的一种方式。在HTML结构中创建一个div容器来容纳整个左侧边栏菜单。

html</p>

<div class="container-fluid">
    <div class="row">
        <div class="col-3 bg-light" style="height:100vh">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">产品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">服务</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于我们</a>
                </li>
            </ul>
        </div>
        <div class="col-9">
            <!-- 右侧内容区域 -->
        </div>
    </div>
</div>

<p>

这里使用了flex - column类使菜单项垂直排列，nav - item和nav - link是Bootstrap为导航元素提供的样式类，active类用于标识当前选中的菜单项。同时给左侧边栏设置了宽度为3列(col - 3)，高度为视口高度(100vh)，并且允许纵向滚动(overflow - y : auto)，右侧内容区域为9列(col - 9)。

带有折叠功能的思路

有时候为了节省页面空间或者提供更好的用户体验，我们希望左侧边栏菜单具有折叠功能。

html</p>

<div class="container-fluid">
    <div class="row">
        <div id="sidebar" class="col-3 bg-light collapse show" style="height:100vh">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">产品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">服务</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于我们</a>
                </li>
            </ul>
        </div>
        <div class="col-9">
            <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#sidebar" aria-expanded="true" aria-controls="sidebar">切换菜单</button>
            <!-- 右侧内容区域 -->
        </div>
    </div>
</div>

<p>

在这个例子中，利用了Bootstrap的collapse插件。给左侧边栏菜单添加了collapse和show类，初始状态下显示菜单。然后在右侧内容区域放置一个按钮，通过设置data - bs - toggle属性值为collapse，并用data - bs - target指定要控制的目标元素(#sidebar)，点击按钮就可以实现菜单的折叠与展开操作。

还可以根据实际需求进一步优化，比如调整菜单项的样式、为菜单项添加图标、设置不同的颜色主题等，以满足项目中的各种个性化要求。