とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. ナビ

ナビ

<ul>, <li>, .nav, .nav-item, .nav-link でナビゲーション部品を構成します。

<ul class="nav">
  <li class="nav-item"><a href="#" class="nav-link">Item#1</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Item#2</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Item#3</a></li>
</ul>

<ul>, <li> の代わりに <nav>, <a> を使用することも可能です。

<nav class="nav">
  <a href="#" class="nav-link">Link#1</a>
  <a href="#" class="nav-link">Link#2</a>
  <a href="#" class="nav-link">Link#3</a>
</nav>

タブ

.nav-tab はタブを表示します。

<ul class="nav nav-tabs">
  <li class="nav-item"><a href="#" class="nav-link active">Item#1</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Item#2</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Item#3</a></li>
</ul>

表示切替

data-toggle="tab", href="#...", .tab-content, .tab-pane と組み合わせて、下記の様にタブによって表示する内容を切り替えることができます。

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="item1-tab" data-toggle="tab" href="#item1" role="tab" aria-controls="item1" aria-selected="true">Item#1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="item2-tab" data-toggle="tab" href="#item2" role="tab" aria-controls="item2" aria-selected="false">Item#2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="item3-tab" data-toggle="tab" href="#item3" role="tab" aria-controls="item3" aria-selected="false">Item#3</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="item1" role="tabpanel" aria-labelledby="item1-tab">This is a text of item#1.</div>
  <div class="tab-pane fade" id="item2" role="tabpanel" aria-labelledby="item2-tab">This is a text of item#2.</div>
  <div class="tab-pane fade" id="item3" role="tabpanel" aria-labelledby="item3-tab">This is a text of item#3.</div>
</div>

表示位置

.justify-content-start, .justify-content-center, .justify-content-end はナビゲーションを左端、中央、右端に表示します。

<ul class="nav nav-tabs justify-content-start">...</ul>
<ul class="nav nav-tabs justify-content-center">...</ul>
<ul class="nav nav-tabs justify-content-end">...</ul>

フル割り付け

.nav-fill はナビゲーションを横幅一杯に表示します。.nav-justified も横幅一杯に表示しますが、内容によって横幅を調整します。

<ul class="nav nav-tabs nav-fill">...</ul>
<ul class="nav nav-tabs nav-justified">...</ul>

縦表示

.flex-column はナビゲーションを縦方向に表示します。

<ul class="nav flex-column">...</ul>

塗りつぶし

.nav-pills を指定するとアクティブなタブを塗りつぶします。

<ul class="nav nav-pills">

---