把bootstrap 原生 nav 功能和原生 Button group style 結合

Boostrap是一套熱門的front-end web。此文提供的是旗下兩個組件的結合應用。

Boostrap提供的組件「nav」在bootstrap原生JS的配合下，可以直接點擊選單就切換對應內容。另一個button-group是bootstrap提供的另一個組件，顧名思義，可以把按鈕做成group的樣式，但是官網範例沒有提供如同 nav 那樣， 點選單便能切換內容的互動功能。

本文的目的就是，在已有的bootstrap框架下，不多寫任何的css、js，光靠bootstrap給予的組件元素，只用HTML兜出具有 Button group外表、又有nav功能的組合獸。

<div class="py-4 my-4 text-center">
  <!-- step1 -->
  <div class="btn-group nav d-inline-flex"
       id="bulletinTab"
       role="tablist"
       aria-label="請選擇Tabs"
       >
    <!-- step2 -->
    <a class="btn btn-lg btn-outline-primary px-2em active"
       id="tab1"
       data-toggle="tab"
       href="#content1"
       role="tab"
       aria-controls="content1"
       aria-selected="true"
       >
      Tab1
    </a>
    <a class="btn btn-lg btn-outline-primary px-2em"
       id="tab2"
       data-toggle="tab"
       href="#profile"
       role="tab"
       aria-controls="profile"
       aria-selected="false"
       >
      Tab2
    </a>
  </div>
</div>
<!-- step2 -->
 <div class="tab-content container" id="bulletinContent">
  <div class="tab-pane fade active show" id="content1" role="tabpanel" aria-labelledby="tab1">
    Tab1 內容
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="tab2">
    Tab2 內容
  </div>
</div>

• step1：處理tab container
  1. .nav是作用JS的必要class，內含display:flex。
  2. .btn-group是維持樣式必要的class，內含display:inline-flex。
  3. 但兩者放在一起，display的權重會被nav搶走，外觀會變得像這樣，所以需要再加掛 d-inline-flex（display:inline-flex ！important），讓它恢復和 botton group 相似的layout。 
  4. 承3. tab container現在自己是inline-block的特性了(但子代具有flex特性)，所以發摟 display:inline的layout特性。要設定整個選單置左、置右、置中時，要控制tab container親代的text-align，如上方案例中的<div class="py-4 my-4 text-center">，將tab container置中。
• step2：處理tab
  1.  使用tag <a>
  2. class照搬button group組件內<button>的class即可。btn系列style都可以混用，只有.btn-block會讓排版炸掉。
  3. tag內的其餘attribute照搬nav組件內<a>的property即可。
     必要property：
     data-toggle="tab"
     href="#content0"
     無障礙相關property：
     id="tab1"
     aria-controls="content0"
     aria-selected="true"
     其他：
     role="tab"
     
• step3：處理內容區塊
  複製nav組件的下半，包含content container和各別tab對應的content，再將內容區替換成自己想要的內容即可。

示範版本：bootstrap 4.4