bootstrap侧边栏
时间: 2023-08-17 11:05:55 浏览: 118
在Bootstrap中创建侧边栏可以使用一些CSS类和组件来实现。以下是一种常见的方法:
1. 创建一个包含侧边栏和内容的布局结构。可以使用Bootstrap的栅格系统来实现。
```html
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<!-- 侧边栏内容 -->
</div>
<div class="col-md-9">
<!-- 主要内容 -->
</div>
</div>
</div>
```
在上述示例中,我们使用了`container-fluid`类创建了一个全宽度的容器,`row`类创建了一个行,并使用`col-md-3`和`col-md-9`类定义了侧边栏和主要内容的列宽。
2. 在侧边栏中添加内容。可以使用Bootstrap提供的组件和类来创建导航菜单、图标等。
```html
<div class="sidebar">
<ul class="nav flex-column">
<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="#">菜单
阅读全文