Tab特效
另外一個常用的特效是tab，這個特效可以讓我們在眾多的按鈕之中做切換，並出現相對應的文章。
HTML:

 <a data-toggle="tab" class="nav-link active  mr-1" href="#article3">Price</a>
 <a data-toggle="tab" class="nav-link  mr-1" href="#article4">Service</a>
<a data-toggle="tab" class="nav-link  mr-1" href="#article5">News</a>

效果如下

你會注意到，每一次都只會出現我們點選的文章，沒有點選的按鈕就會沒有特效。在HTML程式碼中，我們將data-toggle設定為tab。這裡要注意，除了文章與collapse一樣要對應之外，我們這裡初始只有一個button 的class會有active的屬性，當我們做不同button的切換的時候，這一個active的屬性就會跑到相對應的class中。

輪播元件Carousel
這一個元件你可以在Bootstrap的Components中找到。
由於這一段程式碼太長了，我們介紹另外一個VSC的外掛，Bootstrap。

安裝好後，我們只需要輸入b4-carouousel-default 就可以完整跳出程式碼。
接著介紹輪播的架構

<ol class="carousel-indicators">
   <li data-target="#carouselId" data-slide-to="0" class="active"></li>
   <li data-target="#carouselId" data-slide-to="1"></li>
   <li data-target="#carouselId" data-slide-to="2"></li>
</ol>

這一段指的是頁數，一次只會出現一頁，所以只有一個頁面會出現 class=active
。data-slide-to 指的是頁數，頁數從0開始，data-target 後面對應的是頁面的ID，如果有更動的話必須連後面的頁面ID一起更動。

<div class="carousel-inner" role="listbox">
     <div class="carousel-item active">
        <img data-src=""alt="First slide" class="w-100">
     </div>
     <div class="carousel-item">
        <img data-src="" alt="Second slide" class="w-100">
      </div>
      <div class="carousel-item">
         <img data-src="" alt="Third slide" class="w-100">
       </div>
</div>

這一段指的是圖片放置位置，data-src我們放置我們的圖片來源，本地端或網址都可以，後面的class=W-100並不是預設，可以依照圖片的大小作適當的變化圖片的尺寸。

<a class="carousel-control-prev" href="#imageCarouselId" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
</a>

上一頁按鈕

<a class="carousel-control-next" href="#imageCarouselId" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
</a>

下一頁按鈕
由於上一頁、下一頁的按鈕，我們通常都不去更動，所以這邊暫不介紹
結果: