Bootstrap5 tabs参数简化版本

现在为了快速的设计出兼容PC和移动端的自适应网页，全部都使用bootstrap框架了，大大提升了写代码的速度和兼容性，学习了也快1年了，写了也5套模板了，熟练度已经相当好了，随着bootstrap5的发布，自己也写了第一套bootstrap5的模板，今天主要写下“Navs & tabs”主要是tab切换代码的简化版，因为本身官方教程代码比较复杂，而我们使用的时候不需要这么复杂，就把很多不需要的额参数都去掉以便提升代码质量和效率。
下面是bootstrap5.10官方关于TAB PILL的切换代码
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
由于上面的代码非常多的参数，修改时候容易搞错，我就把他把所有的不影响运行的参数都去掉了
<ul class="nav nav-pills" >
        <li >
          <a class=" active"  data-bs-toggle="pill" data-bs-target="#pills-home"   >Home</a>
       </li>
       <li>
         <a  data-bs-toggle="pill" data-bs-target="#pills-profile"   >Profile</a>
       </li>
       <li>
         <a   data-bs-toggle="pill" data-bs-target="#pills-contact"  >Contact</a>
       </li>
      </ul>
      <div class="tab-content" >
        <div class="tab-pane fade show active" id="pills-home" >home</div>
        <div class="tab-pane fade" id="pills-profile">profile</div>
        <div class="tab-pane fade" id="pills-contact" >contact</div>
      </div>
上面的优化后，最简单的可以实现一样TAB作用的代码。