HTMLだけでできる？Bootstrapを使用したタブの作り方

どうも、最近仕事でBootstrapを使用することがあったのでメモとして残しておこうと思います。初心者の方でもクラスを付与するだけで簡単にコーディングできるのでぜひ使用したことがない人は使ってみるといいと思います。
その簡単なBootstrapの中でも今回はタブ機能の実装を解説していきます。

Bootstrapとその他読み込み

BootstrapとjQueryをインストール or CDNで読み込みしてください。

CDN

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

ローカルにタウンロード

Bootstrap（http://getbootstrap.com/）にアクセスしダウンロード

jQuery(https://jquery.com/)にアクセスしダウンロード

タブ機能の実装

HTMLサンプルコード

<ul class="nav nav-tabs">
    <li class="nav-item">
      <a href="#tab1" class="nav-link navbar-default active" data-toggle="tab">Tab1</a>
    </li>
    <li class="nav-item">
      <a href="#tab2" class="nav-link navbar-default" data-toggle="tab">Tab2</a>
    </li>
    <li class="nav-item">
      <a href="#tab3" class="nav-link navbar-default" data-toggle="tab">Tab3</a>
    </li>
    <li class="nav-item">
      <a href="#tab4" class="nav-link navbar-default" data-toggle="tab">Tab4</a>
    </li>
  </ul>
  <!--タブの中身-->
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">
      <!--Tab1の内容-->
    </div>
    <div id="tab2" class="tab-pane">
     <!--Tab２の内容-->
    </div>
    <div id="tab3" class="tab-pane">
     <!--Tab３の内容-->
    </div>
    <div id="tab4" class="tab-pane">
     <!--Tab４の内容-->
    </div>
  </div>

HTMLのコードだけでタブメニューが実装できてしまいます。CSSを自分で変更したい場合は自分でクラスを付与するか、CSSを上書きしてください。今は横並びのタブメニューでしたがBootstrap公式サイトに他の縦に並ぶメニューなどの方法も記されていますのでご覧ください。

DEMO

See the Pen Tab Menu – Bootstrap by Keisuke Yamashita (@keisuke1989) on CodePen.