bootstrap的垂直导航条

Bootstrap的垂直导航条可以通过以下代码实现：

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="list-group">
        <a href="#" class="list-group-item active">首页</a>
        <a href="#" class="list-group-item">产品中心</a>
        <a href="#" class="list-group-item">新闻中心</a>
        <a href="#" class="list-group-item">关于我们</a>
        <a href="#" class="list-group-item">联系我们</a>
      </div>
    </div>
    <div class="col-md-9">
      <h1>欢迎访问我们的网站</h1>
      <p>这是一个演示页面，用于展示Bootstrap的垂直导航条。</p>
    </div>
  </div>
</div>

在这个例子中，我们使用了Bootstrap的网格系统将页面分为两列。左侧列使用了Bootstrap的列表组件来创建垂直导航条。右侧列则是一个简单的标题和段落，用于展示页面内容。

通过设置.list-group-item的样式，我们可以调整导航条的颜色、字体大小和边框样式等。例如，可以使用以下样式来创建一个简单的垂直导航条：

.list-group-item {
  background-color: #f8f9fa;
  border: none;
  border-radius: 0;
  font-size: 16px;
  color: #333;
}

.list-group-item.active {
  background-color: #007bff;
  color: #fff;
}

这个样式将导航条的背景色设置为浅灰色，字体大小为16像素，颜色为黑色。同时，它还将.active类的导航项的背景色设置为蓝色，字体颜色为白色