bootstrap左侧垂直菜单栏
时间: 2023-11-14 13:06:27 浏览: 83
Bootstrap左侧垂直菜单栏是一种常用的网页导航布局,它通常用于展示网站的主要导航和子导航。在Bootstrap中,可以使用.nav和.navbar-nav类来创建左侧垂直菜单栏。.nav类用于创建一个水平的导航栏,而.navbar-nav类用于在导航栏中创建垂直的菜单栏。通过添加适当的HTML和样式类,可以创建具有不同样式和布局的左侧垂直菜单栏。
以下是一个示例代码,用于创建一个简单的Bootstrap左侧垂直菜单栏:
```html
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<!-- Content -->
</div>
</div>
</div>
```
在上面的代码中,我们使用了Bootstrap的网格系统来实现左侧菜单栏和内容区域的布局。通过将菜单栏的列宽设置为col-md-3,我们可以让菜单栏占据整个容器的四分之一宽度。然后,我们使用.navbar和.navbar-nav类来创建导航栏和垂直菜单栏。我们还使用了.navbar-toggle类来创建响应式的菜单按钮,以便在小屏幕设备上显示折叠菜单。