Bootstrap 导航栏

デフォルトのナビゲーションバー

デフォルトのナビゲーションバーを作成する手順は次のとおりです。

• <nav> タグに class を追加する.navbar、.navbar-default。
• 上記の要素に追加するrole="navigation"、アクセシビリティを向上させるのに役立ちます。
• <div> 要素に見出しクラスを追加します.navbar-header、内部には class を持つnavbar-brandの <a> 要素。これにより、テキストが一回り大きく表示されます。
• ナビゲーションバーにリンクを追加するには、class を付けたものを追加するだけです。.nav、.navbar-navの順序なしリスト（ul）でよい。

以下の例はこれを示しています：

結果は次のようになります：

---

レスポンシブなナビゲーションバー

ナビゲーションバーにレスポンシブ特性を追加するには、折りたたむコンテンツを class 付きのものでラップする必要があります。.collapse、.navbar-collapseの <div> 内に配置します。折りたたまれたナビゲーションバーは、実際には class を持つものです。.navbar-toggleと2つの data- 要素を持つボタンです。1つ目はdata-toggle、JavaScript にボタンに対して何を行う必要があるかを伝えるためのもので、2つ目はdata-target、どの要素に切り替えるかを示します。class を持つ3つの.icon-barの <span> が、いわゆるハンバーガーボタンを作成します。これらは切り替わります。.nav-collapse<div> 内の要素です。上記の機能を実装するには、次を含める必要があります。Bootstrap 折叠（Collapse）插件。

以下の例はこれを示しています：

結果は次のようになります：

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

ナビゲーションバー内のフォームは を使用しません。Bootstrap 表单章で説明されているデフォルトの class を使用します。.navbar-formclass。これにより、フォームの適切な垂直方向の配置と、狭いビューポートでの折りたたみ動作が保証されます。配置オプション（コンポーネントの配置セクションで詳しく説明します）を使用して、ナビゲーションバー内のコンテンツの配置場所を決定します。

以下の例はこれを示しています：

結果は次のようになります：

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

class を使用できます.navbar-btn<form> 内にない <button> 要素にボタンを追加すると、ボタンはナビゲーションバー上で垂直方向に中央揃えになります。.navbar-btn<a> 要素と <input> 要素で使用できます。

しないでください.navbar-nav内の <a> 要素上で使用する.navbar-btn、標準ではないためです。button class。

以下の例はこれを示しています：

結果は次のようになります：

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

ナビゲーションにテキスト文字列を含める必要がある場合は、class を使用してください。.navbar-text。これは通常、<p> タグと一緒に使用され、適切なリードと色を確保します。次の例はこれを示しています。

結果は次のようになります：

アイコンを組み合わせたナビゲーションリンク

通常のナビゲーションバーナビゲーションコンポーネント内でアイコンを使用する場合は、class を使用してください。glyphicon glyphicon-*アイコンを設定するには、詳細は次を参照してください。Bootstrap 图标、以下の例のように：

結果は次のようになります：

コンポーネントの配置方法

ユーティリティクラスを使用できます。.navbar-left 或 .navbar-rightナビゲーションバー内の を左または右に揃えます。导航链接、表单、按钮或文本これらのコンポーネント。これらの2つの class はどちらも、指定された方向に CSS フロートを追加します。次の例はこれを示しています。

結果は次のようになります：

固定到顶部

Bootstrap のナビゲーションバーは動的に配置できます。デフォルトでは、これはブロックレベル要素であり、HTML 内で配置された位置に基づいて配置されます。いくつかのヘルパークラスを使用すると、ページの上部または下部に配置したり、ページと一緒にスクロールする静的なナビゲーションバーにしたりできます。

ナビゲーションバーをページの上部に固定したい場合は、 に.navbar class添加 class.navbar-fixed-top。以下の例はこれを示しています：

ナビゲーションバーがページ本文内の他のコンテンツの上部と交差しないようにするには、<body> タグに少なくとも50ピクセルのパディングを追加してください。パディングの値は必要に応じて設定できます。

結果は次のようになります：

固定到底部

ナビゲーションバーをページの下部に固定したい場合は、 に.navbar class添加 class.navbar-fixed-bottom。以下の例はこれを示しています：

結果は次のようになります：

静的なトップ

ページと一緒にスクロールするナビゲーションバーを作成するには、次を追加してください。.navbar-static-topclass。この class は <body> にパディング（padding）を追加する必要はありません。

結果は次のようになります：

反転色のナビゲーションバー

黒い背景に白いテキストの反転ナビゲーションバーを作成するには、単純に次のように.navbarclass 添加.navbar-inverseclass を追加するだけです。次の例に示すように：

ナビゲーションバーがページ本文内の他のコンテンツの上部と交差しないようにするには、<body> タグに少なくとも50ピクセルのパディングを追加してください。パディングの値は必要に応じて設定できます。

結果は次のようになります：

其他扩展