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

基本

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

ボタン部分

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

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

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

<ul class="nav nav-tabs">
    <li class="nav-item">タブ①</li>
</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>

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

<!-- タブボタン部分 -->
<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>

 

コンテンツ部分

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

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

 

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

中央寄せ justify-content-center

右寄せ justify-content-end

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

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

 

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

コメント

タイトルとURLをコピーしました