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

基本

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

ボタン部分

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

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

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

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

 

コンテンツ部分

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

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

 

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

中央寄せ justify-content-center

右寄せ justify-content-end

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

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

 

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

コメント

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