ブートストラップナビゲーションバー

ナビゲーションバー

ナビゲーションバーは、ページの上部に配置されるナビゲーションヘッダーです。

Bootstrapを使用すると、画面サイズに応じてナビゲーションバーを拡大または縮小できます。

標準のナビゲーションバーは。で作成され<nav class="navbar navbar-default">ます。

次の例は、ページの上部にナビゲーションバーを追加する方法を示しています。

例

<nav class="navbar navbar-default">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>
...

注：このページのすべての例では、小さな画面ではスペースを取りすぎるナビゲーションバーが表示されます（ただし、ブートストラップは応答性が高いため、ナビゲーションバーは大きな画面では1行になります）。この問題（小さな画面の場合）は、このページの最後の例で解決されます。

反転ナビゲーションバー

デフォルトのナビゲーションバーのスタイルが気に入らない場合は、Bootstrapが代わりの黒いナビゲーションバーを提供します。

.navbar-defaultクラスを次のように変更するだけ.navbar-inverseです：

例

ドロップダウン付きのナビゲーションバー

ナビゲーションバーには、ドロップダウンメニューを保持することもできます。

次の例では、[ページ1]ボタンのドロップダウンメニューを追加します。

例

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>

右揃えのナビゲーションバー

この.navbar-rightクラスは、ナビゲーションバーのボタンを右揃えにするために使用されます。

次の例では、ナビゲーションバーの右側に「サインアップ」ボタンと「ログイン」ボタンを挿入します。また、2つの新しいボタンのそれぞれにグリフィコンを追加します。

例

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
</div>
</nav>

ナビゲーションバーボタン

ナビゲーションバー内にボタンを追加する.navbar-btnには、ブートストラップボタンにクラスを追加します。

例

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>

ナビゲーションバーフォーム

ナビゲーションバー内にフォーム要素を追加するには、.navbar-formクラスをフォーム要素に追加し、入力を追加します。.form-group入力を保持するdivコンテナにクラスを追加したことに注意してください。これにより、複数の入力がある場合に適切なパディングが追加されます（これについては、フォームの章で詳しく説明します）。

例

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <form class="navbar-form navbar-left" action="/action_page.php">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>
</nav>

.input-groupおよびクラスを使用し.input-group-addonて、入力フィールドの横にアイコンまたはヘルプテキストを添付することもできます。これらのクラスの詳細については、ブートストラップ入力の章を参照してください。

例

ナビゲーションバーテキスト

クラスを使用して、.navbar-textリンクではないナビゲーションバー内の要素を垂直方向に整列します（適切なパディングとテキストの色を保証します）。

例

固定ナビゲーションバー

ナビゲーションバーは、ページの上部または下部に固定することもできます。

固定ナビゲーションバーは、ページスクロールに関係なく、固定位置（上または下）に表示されたままになります。

この.navbar-fixed-topクラスは、ナビゲーションバーを上部に固定します。

例

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>

この.navbar-fixed-bottomクラスでは、ナビゲーションバーが下部に留まります。

例

<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>

ナビゲーションバーの折りたたみ

ナビゲーションバーは、小さな画面で多くのスペースを占めることがよくあります。

ナビゲーションバーを非表示にする必要があります。必要なときにだけ表示します。

次の例では、ナビゲーションバーが右上隅のボタンに置き換えられています。ボタンがクリックされた場合にのみ、ナビゲーションバーが表示されます。

例

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
</div>
</nav>

❮ 前次 ❯

ブートストラップ3チュートリアル

ブートストラップグリッド

ブートストラップテーマ

ブートストラップの例

ブートストラップCSS参照

ブートストラップJSRef