bootstrap竖向tab切换

Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发者快速构建响应式网页。在Bootstrap中，Tab切换是一种常见的交互方式，可以让用户在不同的选项卡之间进行切换。

要实现竖向的Tab切换，可以借助Bootstrap的Navs组件和Tabs组件。下面是一个简单的示例代码：

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills flex-column" id="myTab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Tab 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Tab 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Tab 3</a>
        </li>
      </ul>
    </div>
    <div class="col-md-9">
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
          Content for Tab 1
        </div>
        <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
          Content for Tab 2
        </div>
        <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
          Content for Tab 3
        </div>
      </div>
    </div>
  </div>
</div>

在上面的代码中，我们使用了`nav`和`tab-content`两个组件来实现Tab切换。`nav`组件用于显示选项卡，`tab-content`组件用于显示对应选项卡的内容。

首先，我们创建一个具有`flex-column`类的`ul`元素，这样可以使选项卡垂直排列。每个选项卡都是一个`li`元素，其中的`a`元素用于触发切换。通过设置`data-toggle="tab"`属性和`href`属性来关联选项卡和对应的内容。

然后，我们创建一个具有`tab-content`类的`div`元素，其中的每个子元素都是一个选项卡的内容。通过设置`id`属性和`aria-labelledby`属性来关联内容和对应的选项卡。

最后，我们使用Bootstrap提供的CSS类来设置选项卡和内容的样式，例如使用`active`类来标记默认显示的选项卡。

通过以上代码，我们就可以实现一个简单的竖向Tab切换效果。