Bootstrap4の＜タブナビゲーション＞を理解する

基本

Bootstrap4のタブナビゲーションはボタン部分は基本ナビゲーション（Navs）と同じです、そこにコンテンツ部分へのリンクを貼ります。

ボタン部分

親要素に「nav」クラスと「nav-tabs」クラスを設定する。

<ul class="nav nav-tabs">
</ul>

1 2	<ul class="nav nav-tabs"> </ul>

子要素に「nav-item」クラスを設定する。

<ul class="nav nav-tabs">
    <li class="nav-item">タブ①</li>
</ul>

</ul>

タブ①で開くコンテンツをIDを「tab1」とした場合「tab1」にリンクを貼る。
最初にタブ①が開いた状態にするため「active」クラスを設定する。
表示コンテンツを切り替えるJavaScript、「data-toggle=”tab”」を追加する。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a>
  </li>

</li>

タブ①からタブ④を同様に記載する。

<!-- タブボタン部分 -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a>
  </li>
  <li class="nav-item">
    <a href="#tab2" class="nav-link" data-toggle="tab">タブ②</a>
  </li>
  <li class="nav-item">
    <a href="#tab3" class="nav-link" data-toggle="tab">タブ③</a>
  </li>
  <li class="nav-item">
    <a href="#tab4" class="nav-link" data-toggle="tab">タブ④</a>
  </li>
</ul>

</li>

</li>

</li>

</li>

</ul>

コンテンツ部分

コンテンツ部分は<div class=”tab-content”>～</div>で囲む

<!--タブのコンテンツ部分-->
<div class="tab-content">
</div>

</div>

各コンテンツにボタンで決めた「ID」とクラス「tab-pane」を設定する。
最初に開いた状態にするコンテンツ（通常タブ①）に「active」クラスを設定する。

<!--タブのコンテンツ部分-->
<div class="tab-content">
  <div id="tab1" class="tab-pane active">
    タブ①の内容を記載する
  </div>
  <div id="tab2" class="tab-pane">
    タブ②の内容を記載する
  </div>
  <div id="tab3" class="tab-pane">
    タブ③の内容を記載する
  </div>
  <div id="tab4" class="tab-pane">
    タブ④の内容を記載する
  </div>
</div>

タブ①の内容を記載する

</div>

タブ②の内容を記載する

</div>

タブ③の内容を記載する

</div>

タブ④の内容を記載する

</div>

応用・・・ボタン部分の配置

中央寄せ　justify-content-center

右寄せ　justify-content-end

幅一杯で等幅サイズ　nav-justified

幅一杯で不均等サイズ　nav-fill

次ページに配置サンプルHTMLを公開しています。