Bootstrap-navbar
navbarは、Bootstrapサイトの顕著な特徴の1つです。 Navbarは、アプリケーションまたはサイトのナビゲーションヘッダーとして機能する応答性の高い「メタ」コンポーネントです。 ナビゲーションバーは、モバイルビューで折りたたまれ、利用可能なビューポートの幅が増えると水平になります。 基本的に、navbarには、サイト名のスタイリングと基本的なナビゲーションが含まれています。
デフォルトのナビゲーションバー
デフォルトのナビゲーションバーを作成するには-
- クラス .navbar、.navbar-default を<nav>タグに追加します。
- 上記の要素に role = "navigation" を追加して、アクセシビリティを支援します。
- ヘッダークラス .navbar-header を<div>要素に追加します。 クラス navbar-brand の<a>要素を含めます。 これにより、テキストのサイズがわずかに大きくなります。
- navbarにリンクを追加するには、*。nav、.navbar-nav *のクラスを持つ順序付けられていないリストを追加するだけです。
次の例はこれを示しています-
レスポンシブ機能をnavbarに追加するには、折りたたむコンテンツをクラス .collapse、.navbar-collapse の<div>でラップする必要があります。 折りたたみの性質は、。navbar-toggle *のクラスを持つボタンによって作動し、2つのデータ要素を備えています。 最初の *data-toggle はJavaScriptにボタンの処理を指示するために使用され、2番目の data-target はどの要素を切り替えるかを示します。 次に、。icon-bar *クラスを使用して、ハンバーガーボタンと呼ぶものを作成します。 これにより、。nav-collapse * <div>にある要素が切り替わります。 この機能を動作させるには、リンクを含める必要があります:/bootstrap/bootstrap_collapse_plugin [Bootstrap Collapse Plugin]。
次の例はこれを示しています-
Chapter link:/bootstrap/bootstrap_forms [Bootstrap Forms]のデフォルトのクラスベースのフォームではなく、ナビゲーションバーにあるフォームを使用する代わりに、*。navbar-form *クラスを使用します。 これにより、フォームの適切な垂直方向の整列と狭いビューポートでの折りたたみ動作が保証されます。 配置オプション(コンポーネントの配置セクションで説明)を使用して、ナビゲーションバーのコンテンツ内の配置場所を決定します。
次の例はこれを示しています-
クラス .navbar-btn を使用して、ボタンを<form>にない<button>要素に追加して、navbarの垂直方向の中央に配置できます。 .navbar-btn は、<a>および<input>要素で使用できます。
'_.navbar-nav 内の<a>要素では、*。navbar-btn *や標準リンク:/bootstrap/bootstrap_buttons [button classes]を使用しないでください。_
次の例はこれを示しています-
要素内のテキスト文字列をラップするには、クラス .navbar-text を使用します。 これは通常、適切な行送りと色のために<p>タグとともに使用されます。 次の例はこれを示しています-
非ナビゲーションリンク
通常のnavbarナビゲーションコンポーネント内にない標準リンクを使用する場合は、クラス navbar-link を使用して、次の例に示すように、デフォルトおよび逆navbarオプションに適切な色を追加します-
コンポーネントの配置
ユーティリティクラス .navbar-left または .navbar-right を使用して、_navリンク、フォーム、ボタン、またはtext_などのコンポーネントをnavbarの左または右に揃えることができます。 両方のクラスは、指定された方向にCSSフロートを追加します。 次の例はこれを示しています-
上に固定
Bootstrap navbarは、位置を動的に変更できます。 デフォルトでは、HTML内の配置に基づいて配置を行うブロックレベルの要素です。 いくつかのヘルパークラスを使用して、ページの上部または下部に配置するか、ページで静的にスクロールすることができます。
navbarを上部に固定する場合は、。navbar-fixed-top *クラスを .navbarクラス*に追加します。 次の例はこれを示しています-
'_navbarがページ本文の他のコンテンツの上に置かれないようにするには、<body>タグに少なくとも50ピクセルのパディングを追加するか、独自の値を試してください。_
下に固定
ページの下部にnavbarを固定する場合は、。navbar-fixed-bottom *クラスを .navbarクラス*に追加します。 次の例はこれを示しています-
静的トップ
ページでスクロールするnavbarを作成するには、*。navbar-static-top *クラスを追加します。 このクラスでは、<body>にパディングを追加する必要はありません。
反転ナビバー
背景が黒でテキストが白の反転navbarを作成するには、次の例に示すように .navbar クラスに .navbar-inverse クラスを追加するだけです-
'_navbarがページ本文の他のコンテンツの上に置かれないようにするには、<body>タグに少なくとも50ピクセルのパディングを追加するか、独自の値を試してください。_