Bootstrap 5　シンプルなナビゲーションバーの作成

ナビゲーションバー（Navbar）は、ウェブサイトの上部に配置されるメニューやリンクを含むコンポーネントで、ユーザーがサイト内を簡単に移動できるようにするための重要な要素です。Bootstrap 5のナビゲーションバーには多くのカスタマイズオプションがあり、レスポンシブデザインに対応しています。

基本的なナビゲーションバーの構造の例

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

主な要素の説明

• <nav>タグ: ナビゲーションバーのコンテナ。
• <a class="navbar-brand">: ブランド名やロゴのリンク。
• <button>: 折りたたみメニューのトグルボタン。
• <div class="collapse navbar-collapse">: 折りたたみメニューのコンテナ。
• <ul class="navbar-nav">: ナビゲーションリンクのリスト。
• <li class="nav-item">: 各ナビゲーションリンクのリストアイテム。

カスタマイズオプション

Bootstrap 5のナビゲーションバーは、色、位置、スタイルを簡単にカスタマイズできます。

• 色の変更: navbar-light と bg-light を navbar-dark と bg-dark に変更することで、ダークテーマにすることができます。
• 位置の変更: fixed-top クラスを追加すると、ナビゲーションバーがページのトップに固定されます。fixed-bottom クラスでページの下部に固定することもできます。
• レスポンシブ設定: navbar-expand-sm, navbar-expand-md, navbar-expand-lg, navbar-expand-xl クラスを使って、ナビゲーションバーの展開ポイントを調整できます。

関連投稿:

【初心者の方向け】 Bootstrap4の使い方 余白 【初心者の方向け】 Bootstrap4の使い方 ボーダー 【初心者の方向け】 Bootstrap4の使い方 リストグループ オリジナルサイト作成お得プラン