bootstrap左侧菜单栏(bootstrap左边菜单右边页面)

《bootstrap左侧菜单栏(bootstrap左边菜单右边页面)》

在网页布局中，实现左侧为菜单栏右侧为页面内容的布局是很常见的需求。使用Bootstrap框架可以较为简便地达成这一目标，解决方案是利用Bootstrap的栅格系统和一些导航组件来构建。

思路一：简单栅格布局

html
</p>



    
    
    <title>左侧菜单栏布局</title>
    


    <div class="container-fluid">
        <div class="row">
            <!-- 左侧菜单 -->
            <div class="col - 3 bg-light p - 0">
                <nav class="navbar navbar-expand - sm navbar - light bg - light">
                    <ul class="navbar-nav flex-column">
                        <li class="nav - item">
                            <a class="nav - link active" href="#">首页</a>
                        </li>
                        <li class="nav - item">
                            <a class="nav - link" href="#">菜单项1</a>
                        </li>
                        <li class="nav - item">
                            <a class="nav - link" href="#">菜单项2</a>
                        </li>
                        <li class="nav - item">
                            <a class="nav - link" href="#">菜单项3</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <!-- 右侧页面内容 -->
            <div class="col - 9 p - 4">
                <h2>页面内容区域</h2>
                <p>这里可以放置各种页面内容，如、图片、表格等。</p>
            </div>
        </div>
    </div>
    
    



<p>

在这个例子中，我们通过定义一个.row类的行容器，然后将左侧菜单栏设置为col - 3（表示占据3列），右侧内容区设置为col - 9（占据9列）。这样就按照12列栅格系统划分了页面。给左侧菜单添加了一些样式，如背景颜色等，并且使用了navbar组件来创建简单的导航菜单。

思路二：带有折叠功能的菜单

有时候我们希望菜单栏可以折叠，以节省空间。下面是一个改进版：

html
</p>



    
    
    <title>可折叠左侧菜单栏布局</title>
    
    
        /* 自定义样式 */
        .sidebar {
            height: 100vh;
            overflow - y: auto;
        }
        .collapse - show {
            display: block !important;
        }
    


    <div class="container - fluid">
        <div class="row">
            <!-- 左侧菜单 -->
            <div class="col - 2 bg - dark text - white p - 0 sidebar">
                <button class="btn btn - outline - secondary w - 100 mb - 2">菜单<i class="fas fa - caret - down float - end"></i></button>
                <div id="menu - collapse" class="collapse">
                    <ul class="list - group">
                        <li class="list - group - item list - group - item - action bg - dark text - white"><a href="#" class="text - white text - decoration - none">首页</a></li>
                        <li class="list - group - item list - group - item - action bg - dark text - white"><a href="#" class="text - white text - decoration - none">菜单项1</a></li>
                        <li class="list - group - item list - group - item - action bg - dark text - white"><a href="#" class="text - white text - decoration - none">菜单项2</a></li>
                        <li class="list - group - item list - group - item - action bg - dark text - white"><a href="#" class="text - white text - decoration - none">菜单项3</a></li>
                    </ul>
                </div>
            </div>
            <!-- 右侧页面内容 -->
            <div class="col - 10 p - 4">
                <h2>页面内容区域</h2>
                <p>这里是页面内容。</p>
            </div>
        </div>
    </div>
    
    



<p>

这里为左侧菜单栏添加了一个按钮，当点击按钮时菜单会展开或收起。我们使用了collapse插件来实现这个效果，并且通过自定义样式使菜单栏的高度适应整个视口高度，并且设置了滚动条以防止内容过多时溢出。

以上两种思路都可以很好地实现左侧菜单栏和右侧页面内容的布局，在实际开发中可以根据具体需求选择合适的方式。