Bootstrap-页籤

1.上一次是导览样式部分，这次为页籤。
在官网的範例测试了一下，将不必要的属性删掉，发现上次的导览样式只要在a加入data-toggle="tab"即可，如果你的样式不是分页标籤而是片状就要将data-toggle="tab"改成data-toggle="pill"即可。

2.另外是页籤内容结构部分，tab-content与tab-pane跟导览样式一样都需要完整的结构，这两个是搭配的，如我将其中这两个一个删掉，原本a是在第一行测试完会发生的情形就是点b那么b的内容会跑去第二行，c则是第三行，越跑越下面，这两个是需要搭配的。

3.另外fade是一种特效的部分，show与active则是让第一个页籤的内容完整的预设显示。

4.再来就是页籤内容结构id的部分，id为a但是导览样式a的href也要为#a才能对应到所需要的内容进行页籤完整的内容显示。

小弟测试的Bootstrap为4.1.3，如有错误可以留言交流一下，感恩...

导览样式

<ul class="nav nav-tabs" id="myTab">    <li class="nav-item">      <a class="nav-link active" data-toggle="tab" href="#a">a</a>    </li>    <li class="nav-item">      <a class="nav-link" data-toggle="tab" href="#b">b</a>    </li>    <li class="nav-item">      <a class="nav-link" data-toggle="tab" href="#c">c</a>    </li>  </ul>

页籤内容结构

<div class="tab-content">    <div class="tab-pane fade show active" id="a">a</div>    <div class="tab-pane fade" id="b">b</div>    <div class="tab-pane fade" id="c">c</div></div>

codepen
参考：六角学院Bootstrap官网