bootstrap左侧折叠菜单_bootstrap左侧垂直菜单栏

在Web开发中，创建一个美观且功能丰富的左侧折叠菜单对于提升用户体验至关重要。借助Bootstrap框架，可以轻松实现这一目标。提供几种解决方案来创建一个Bootstrap左侧垂直菜单栏，并使其具备折叠功能。

一、使用原生Bootstrap组件

1. 解决方案

通过结合Bootstrap的navbar和collapse组件，能够快速构建出响应式的左侧菜单。利用数据属性或JavaScript方法控制菜单的展开与折叠状态。

html
</p>



    
    <title>Bootstrap 左侧折叠菜单</title>
    <!-- 引入 Bootstrap CSS -->
    
    
        /* 设置侧边栏样式 */
        .sidebar {
            height: 100%;
            width: 250px;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #111;
            overflow-x: hidden;
            padding-top: 16px;
            transition: 0.5s;
        }
        .sidebar a {
            padding: 10px 15px;
            text-decoration: none;
            font-size: 25px;
            color: white;
            display: block;
        }
        .sidebar a:hover {
            color: #f1f1f1;
        }
        .main {
            margin-left: 250px; /* 确保主要内容不会被侧边栏遮挡 */
            padding: 16px;
            transition: margin-left 0.5s;
        }
        /* 控制折叠后的宽度 */
        .sidebar.collapse {
            width: 70px;
        }
        .sidebar.collapse a {
            text-align: center;
            font-size: 16px;
        }
        /* 隐藏非折叠时的文字 */
        .sidebar.collapse span {
            display: none;
        }
    


    <div id="mySidebar" class="sidebar collapse show">
        <a href="#">首页 <span>Home</span></a>
        <a href="#">关于 <span>About</span></a>
        <a href="#">服务 <span>Services</span></a>
        <a href="#">联系我们 <span>Contact Us</span></a>
    </div>
    <div class="main">
        <button class="btn btn-primary">切换菜单</button>
        <h2>页面内容</h2>
        <p>这里是页面的主要内容。</p>
    </div>

    
        function toggleSidebar() {
            var sidebar = document.getElementById("mySidebar");
            if (sidebar.classList.contains('collapse')) {
                sidebar.classList.remove('collapse');
            } else {
                sidebar.classList.add('collapse');
            }
        }
    
    <!-- 引入 Bootstrap JS 和依赖库 -->
    
    



<p>

这段代码定义了基本的HTML结构，包括侧边栏和主要内容区域。通过自定义CSS样式设置了侧边栏的基础样式，以及折叠后的样式变化。JavaScript函数用于切换侧边栏的折叠状态。