編集 Github

Navbar

Bootstrapのパワフルでレスポンシブなナビゲーションヘッダ、navbarのドキュメントと例。当社の折りたたみプラグインのサポートを含む、ブランディング、ナビゲーションなどのサポートが含まれています。

How it works

ナビゲーションバーを使い始める前に、次のことを知っておく必要があります。:

  • Navbarsはレスポンシブ折りたたみと[配色]（＃color-scheme）クラスのために .navbarを .navbar-expand {-sm | -md | -lg | -xl} でラップする必要があります。
  • Navbarsとその内容はデフォルトでは流動的です。横幅を制限するには、[optionalコンテナ]（＃コンテナ）を使用します。
  • [spacing]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / spacing /）と[flex]（{{site.baseurl}} / docs / {{site.docs_version）を使用してください。ナビゲーションバー内の間隔と配置を制御するためのユーティリティクラス。
  • Navbarsはデフォルトで反応しますが、それを変更するために簡単に修正することができます。レスポンシブな動作は、Collapse JavaScriptプラグインによって異なります。
  • 印刷時にナビゲーションバーはデフォルトで非表示になります。 .navbarに .d-printを追加してそれらを強制的に印刷させます。 [display]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / display /）ユーティリティクラスを参照してください。
  • `<nav>要素を使用してアクセシビリティを確保するか、 <div>のようなより一般的な要素を使用する場合は、すべてのナビゲーションバーに role =” navigation “を追加して明示的にランドマーク領域として識別します。支援技術のユーザー。

サポートされているサブコンポーネントの例とリストをお読みください。

ナビ

Navbarのナビゲーションリンクは、独自の修飾子クラスを持つ .navオプションを基にしており、適切なレスポンシブスタイルのために[toggler classes]（＃toggler）の使用を必要とします。ナビゲーションバーのナビゲーションも、ナビバーのコンテンツを安全に整列させるために、可能な限り多くの水平方向のスペースを占めるように拡張されます。

現在のページを直接 .nav-linkまたはその直近の親 .nav-itemに適用することができることを示すために、 .activeでアクティブ状態を指定します。

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">ナビバー</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">特徴</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">価格設定</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">無効</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

ナビゲーションバーでドロップダウンを利用することもできます。ドロップダウンメニューは配置のための折り返し要素を必要とします、それで以下に示されるように .nav-itemと .nav-linkのために別々のネストされた要素を使うことを忘れないでください。

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">ナビバー</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">特徴</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">価格設定</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップダウンリンク
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">アクション</a>
            <a class="dropdown-item" href="#">もう一つの行動</a>
            <a class="dropdown-item" href="#">他に何か</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

フォーム

`.form-inline`を使って様々なフォームコントロールやコンポーネントをナビゲーションバー内に配置します。

<nav class="navbar navbar-expand-lg bg-primary">
    <div class="container">
        <div class="navbar-translate">
            <a class="navbar-brand" href="/presentation.html">ブランド</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                <span class="navbar-toggler-icon"></span>
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a href="#pablo" class="nav-link">link</a>
                </li>
                <li class="nav-item">
                    <a href="#pablo" class="nav-link">link</a>
                </li>
            </ul>

            <form class="form-inline ml-auto">
                <div class="form-group no-border">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-just-icon btn-round">
                  <i class="material-icons">search</i>
                </button>
            </form>
        </div>
    </div>
</nav>

テキスト

ナビゲーションバーは .navbar-textの助けを借りてテキストのビットを含むことができます。このクラスは、テキスト文字列の垂直方向の配置と水平方向の間隔を調整します。

<nav class="navbar navbar-dark bg-primary">
  <div class="container">
    <span class="navbar-text">
      インライン要素内
    </span>
  </div>
</nav>
<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">テキスト付きのナビゲーションバー</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">特徴</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">価格設定</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

配色

テーマクラスと background-colorユーティリティの組み合わせのおかげで、ナビゲーションバーのテーマ設定はこれまでになく簡単になりました。明るい背景色で使う場合は .navbar-light、暗い背景色で使う場合は .navbar-darkから選択してください。それから、 .bg- *ユーティリティでカスタマイズしてください。

<nav class="navbar navbar-expand-lg bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-success">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-danger">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-warning">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-white">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-info">
  <!-- Navbar content -->
</nav>

コンテナ

コンテナがあなたのナビゲーションバー内にあるとき、その水平方向のパディングはあなたが指定した .navbar-expand {-sm | -md | -lg | -xl}クラスより低いブレークポイントで取り除かれます。これにより、ナビゲーションバーが折りたたまれたときに、下部のビューポートで不必要にパディングが2倍になることはありません。

<nav class="navbar navbar-expand-lg navbar-light bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">ナビバー</a>
  </div>
</nav>

配置

ナビゲーションバーを静的でない位置に配置するには、[position utilities]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / position /）を使用します。一番上に固定、一番下に固定、一番上に貼り付けるのいずれかを選択します（ページに移動して一番上に来るまでスクロールし、そこに留まる）。固定ナビゲーションバーは position：fixedを使用します。これはDOMの通常の流れから引っ張られ、他の要素と重ならないようにカスタムCSS（例えば <body> の padding-top）を必要とする場合があることを意味します。

\また** .sticky-topは position：stickyを使用しています、これは[すべてのブラウザで完全にサポートされているわけではない]（https://caniuse.com/#feat=css-sticky）**。

<nav class="navbar navbar-light bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">デフォルト</a>
  </div>
</nav>
<nav class="navbar fixed-top navbar-light bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">一定 上</a>
  </div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">一定 底</a>
  </div>
</nav>
<nav class="navbar sticky-top navbar-light bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">ねばねば 上</a>
  </div>
</nav>

反応行動

ナビゲーションバーは .navbar-toggler、 .navbar-collapse、 .navbar-expand {-sm | -md | -lg | -xl}クラスを利用して、ボタンの後ろでコンテンツが折りたたまれたときに変更することができます。他のユーティリティと組み合わせて、特定の要素を表示または非表示にするタイミングを簡単に選択できます。

トグラー

Navbarのトグラーはデフォルトで左寄せになっていますが、 .navbar-brandのような兄弟要素に従うと、自動的に右端に並びます。マークアップを元に戻すと、トグラーの配置が逆になります。以下はさまざまなトグルスタイルの例です。

一番下のブレークポイントに .navbar-brandが表示されていない場合

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">隠された ブランド</a>
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">リンク</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">無効</a>
        </li>
      </ul>
      <form class="form-inline ml-auto">
          <div class="form-group has-white">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-neutral btn-icon btn-round">
              <i class="material-icons">サーチ</i>
          </button>
      </form>
    </div>
  </div>
</nav>

左側にブランド名、右側にトグラーが表示されます。

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">ナビバー</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">リンク</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline ml-auto">
          <div class="form-group no-border">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-neutral btn-icon btn-round">
              <i class="material-icons">search</i>
          </button>
      </form>
    </div>
  </div>
</nav>

左側にトグル、右側にブランド名があります。

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    </button>
    <a class="navbar-brand" href="#">ナビバー</a>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">リンク</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">無効</a>
        </li>
      </ul>
      <form class="form-inline ml-auto">
          <div class="form-group no-border">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-neutral btn-icon btn-round">
              <i class="material-icons">search</i>
          </button>
      </form>
    </div>
  </div>
</nav>