【前端】关于响应式Tab

之前做帮帮网项目的注册页面的时候急需一个tab

但是由于我们需要兼顾网页版的同时考虑手机端，于是采用了相应式bootstrap框架

但是我在bootstrap的文档里一直没找到tab组件，所以一直没搞懂怎么做相应式tab

网上专门做这个的分享也不多，可能其他人觉得太容易了吧（我是菜鸟TAT）

幸苦搜集来的资料，大概分享下~

利用bootstrap调用出tab样式代码如下：

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

正常全屏的效果图是这样的：

屏幕收缩后的效果是这样的：