【入門】Bootstrapの書き方　〜ナビゲーション 〜

みなさんこんにちは さくちゃん です。

本日は、基本的な「ナビゲーション」について書いていきます。
それぞれのナビゲーションタグについてわかりやすく解説していきます。

では早速やっていきましょう！

Bootstrapの書き方　〜ナビゲーション 〜

基本的なナビゲーション

基本的なナビゲーションは、下のように書きます。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

では、それぞれのタグについて見ていきましょう。

nav

ナビゲーションは基本リストタグを使用します。
<ol>、<ul>などがありますが、<ul>を使っていきます。

<ul>タグにclass名として「nav」を付けてあげると、自動的にナビゲーションと認識してくれます。

書き方は

<ul class="nav">

</ul>

と書いていきます。

nav-item

「nav-item」は、１つ１つのナビゲーションを指します。
上の図でいうと「Active」や「Link」がこれに当たります。

<li>タグにclass名として「nav-item」と書くと、自動的に読み込んでくれます。

書き方は

<li class="nav-item">

</li>

と書きます。

nav-link

「nav-item」が書けたら、次はナビゲーションをクリックした時のリンク、表示名を書いていきます。
リンクは<a>タグを使用し、class名に「nav-link」と書いていきます。
また、「active」と指定すると、指定した「nav-item」が一番最初に表示されるようになります。

書き方は

<li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
 </li>

と書いていきます。
この「nav-item」を増やすことで、ナビゲーションを作成することができます。

disabled

先ほど紹介した「active」は、一番最初に表示した場合に指定しました。
そのほかにも「disabled」というclass名があります。

これはリンクを無効にしたいときに使用します。

あまり使用することはありませんが、一様覚えておきましょう。

まとめ

今回は基本的な「ナビゲーション」の書き方について紹介しました。
次回はナビゲーションを使用して「タブメニュー」を作成していきます。