【入門】Bootstrapの使い方　〜 Navbar 〜

2019.11.25
2022.05.03
Bootstrap

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

本日は、「Navbarの使い方」について書いていきます。
「ナビゲーション」の知識を使いますので、まだ「ナビゲーション」について学んでいない方はこちらをご覧下さい。

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

本記事は、公式サイトを参照しながら解説していきます。
公式サイトはこちら

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

1. Navbarの使い方
- 1.1. Navbarの書き方
2. まとめ

Navbarの使い方

Navbarを使うと、下のようなナビゲーションが簡単に作成できます。

本来であれば、HTML、CSSを使って、たくさんのコードを書いていき、細かな設定をしていくのですが、「Navbar」を使えば簡単にかっこいいナビゲーションが作成できます。

また、レスポンシブデザインにも対応しており、Bootstrapにあるテンプレートを使うことで、下のようなレスポンシブナビゲーションが作成できます。

では実際に書いていきましょう！

Navbarの書き方

Navbarの書き方は下の通りです。
それぞれのタグについて説明していきます。
「ナビゲーション」で説明した内容は省略します。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<nav class=” “>に下のクラス名を書いていきます。

navbar

「navbar」をクラス名にしていることで、navbarとして認識されます。
「navbar」は必ず指定しましょう。

navbar-expand-lg

「navbar-expand-lg」は、どのタイミングでレスポンシブデザインに変換するかということを指定しています。
例えば「navbar-expand-lg」だと、サイズが「lg」以上(992px〜)のときは通常のデザイン。「lg」未満(0〜991px)のときはレスポンシブデザインに変換されます。
「lg」の部分を「sm」「md」に変更することも可能です。

navbar-light bg-light

「navbar-light bg-light」は色を指定するクラスです。
明るめの色は「nav-light」, 暗めの色は「nav-dark」を選択できます。「bg- * 」ユーティリティでカスタマイズもできます。
詳しくは公式サイトの「Color schemes」をご覧下さい。

navbar-brand

「navbar-brand」はサイトのタイトル・ロゴを指定するクラスです。
文字だけではなく、画像を指定することもできます。

<button class=”navbar-toggler” ・・・

レスポンシブ時のボタンの操作を指定するクラスです。

<span class=”navbar-toggler-icon”></span>

レスポンシブ時のボタンの画像を表示するクラスです。

まとめ

本日は以上になります。
公式サイトに様々な設定方法がありますので、よければご覧下さい。

オススメの教材

前の記事
【入門】Bootstrapの使い方　〜 display 〜 2019.11.24
次の記事
【入門】Bootstrapの使い方　〜影(Shadows) 〜 2019.11.26