Bootstrap tabs

簡単!Bootstrapで作るタブメニュー&ナビゲーション

Bootstrapではタブナビゲーションが簡単に作成できます。
その作り方とオプションの付け方を解説します。

⇒表示サンプル

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

オプションの付け方
  • 通常のタブナビゲーション。 class="active"を付けた個所が 選択されている状態になる。
  • 一部タブにドロップダウンメニューを加えた場合、入れ子のulタグに class="dropdown-menu"を付けた個所が ドロップダウンメニューになる。
  • aタグ data-toggle="tab" を付けると、 トグルになる。
  • aタグhref="#home" class="tab-content" の中身のIDを紐づけると、 タブを選択するごとに連動する。
  • ulタグにclass="nav-stackedを付けると、タブが縦に並ぶ。
  • ulタグにclass="nav-justifiedを付けると、タブが横幅100%になる。

通常のタブナビゲーション

        <section class="panel panel-default">
            <div class="panel-heading">タブナビゲーション</div>
            <div class="panel-body">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#home">ホーム</a>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">メニュー 1 
              <span class="caret"></span>
            </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a data-toggle="tab" href="#menu1-1">サブメニュー1-1</a>
                            </li>
                            <li>
                                <a data-toggle="tab" href="#menu1-2">サブメニュー1-2</a>
                            </li>
                            <li>
                                <a data-toggle="tab" href="#menu1-3">サブメニュー1-3</a>
                            </li>
                        </ul>
                    </li>
                    <li><a data-toggle="tab" href="#menu2">メニュー 2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="home" class="tab-pane fade in active">
                        <h3>ホーム</h3>
                        <p>ホームのコンテンツが入ります。</p>
                    </div>
                    <div id="menu1-1" class="tab-pane fade">
                        <h3>メニュー 1-1</h3>
                        <p>メニュー 1-1のコンテンツが入ります。</p>
                    </div>
                    <div id="menu1-2" class="tab-pane fade">
                        <h3>メニュー 1-2</h3>
                        <p>メニュー 1-2のコンテンツが入ります。</p>
                    </div>
                    <div id="menu1-3" class="tab-pane fade">
                        <h3>メニュー 1-3</h3>
                        <p>メニュー 1-3のコンテンツが入ります。</p>
                    </div>
                    <div id="menu2" class="tab-pane fade">
                        <h3>メニュー 2</h3>
                        <p>メニュー 2のコンテンツが入ります。</p>
                    </div>
                </div>
            </div>
        </section>

角丸のタブナビゲーション

        <section class="panel panel-default">
            <div class="panel-heading">角丸タブナビゲーション</div>
            <div class="panel-body">
                <ul class="nav nav-pills">
                    <li class="active"><a data-toggle="tab" href="#homes">ホーム</a>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">メニュー 1 
              <span class="caret"></span>
            </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a data-toggle="tab" href="#menus1-1">サブメニュー1-1</a>
                            </li>
                            <li>
                                <a data-toggle="tab" href="#menus1-2">サブメニュー1-2</a>
                            </li>
                            <li>
                                <a data-toggle="tab" href="#menus1-3">サブメニュー1-3</a>
                            </li>
                        </ul>
                    </li>
                    <li><a data-toggle="tab" href="#menus2">メニュー 2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="homes" class="tab-pane fade in active">
                        <h3>ホーム</h3>
                        <p>ホームのコンテンツが入ります。</p>
                    </div>
                    <div id="menus1-1" class="tab-pane fade">
                        <h3>メニュー 1-1</h3>
                        <p>メニュー 1-1のコンテンツが入ります。</p>
                    </div>
                    <div id="menus1-2" class="tab-pane fade">
                        <h3>メニュー 1-2</h3>
                        <p>メニュー 1-2のコンテンツが入ります。</p>
                    </div>
                    <div id="menus1-3" class="tab-pane fade">
                        <h3>メニュー 1-3</h3>
                        <p>メニュー 1-3のコンテンツが入ります。</p>
                    </div>
                    <div id="menus2" class="tab-pane fade">
                        <h3>メニュー 2</h3>
                        <p>メニュー 2のコンテンツが入ります。</p>
                    </div>
                </div>
            </div>
        </section>

縦に並べる角丸タブナビゲーション

        <section class="panel panel-default">
            <div class="panel-heading">縦に並べる角丸タブナビゲーション</div>
            <div class="panel-body">
                <ul class="nav nav-pills nav-stacked">
                  <li class="active"><a href="#">ホーム</a></li>
                  <li><a href="#">メニュー</a></li>
                  <li><a href="#">メニュー</a></li>
                  <li><a href="#">メニュー</a></li>
                </ul>
            </div>
        </section>

タブの横幅を100%にする

        <section class="panel panel-default">
            <div class="panel-heading">タブの横幅を100%にする</div>
            <div class="panel-body">
      
                <ul class="nav nav-tabs nav-justified">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Menu 1</a></li>
                  <li><a href="#">Menu 2</a></li>
                  <li><a href="#">Menu 3</a></li>
                </ul>
                <br>
                <ul class="nav nav-pills nav-justified">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Menu 1</a></li>
                  <li><a href="#">Menu 2</a></li>
                  <li><a href="#">Menu 3</a></li>
                </ul>
            </div>
        </section>

⇒表示サンプル

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です