基本
Bootstrap4のタブナビゲーションはボタン部分は基本ナビゲーション(Navs)と同じです、そこにコンテンツ部分へのリンクを貼ります。
ボタン部分
親要素に「nav」クラスと「nav-tabs」クラスを設定する。
1 2 |
<ul class="nav nav-tabs"> </ul> |
子要素に「nav-item」クラスを設定する。
1 2 3 |
<ul class="nav nav-tabs"> <li class="nav-item">タブ①</li> </ul> |
タブ①で開くコンテンツをIDを「tab1」とした場合「tab1」にリンクを貼る。
最初にタブ①が開いた状態にするため「active」クラスを設定する。
表示コンテンツを切り替えるJavaScript、「data-toggle=”tab”」を追加する。
1 2 3 4 |
<ul class="nav nav-tabs"> <li class="nav-item"> <a href="#tab1" class="nav-link active" data-toggle="tab">タブ①</a> </li> |
タブ①からタブ④を同様に記載する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- タブボタン部分 --> <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>で囲む
1 2 3 |
<!--タブのコンテンツ部分--> <div class="tab-content"> </div> |
各コンテンツにボタンで決めた「ID」とクラス「tab-pane」を設定する。
最初に開いた状態にするコンテンツ(通常タブ①)に「active」クラスを設定する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!--タブのコンテンツ部分--> <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を公開しています。
コメント