ナビゲーションバーは、アプリまたはWebサイトでナビゲーションヘッダーとして機能するレスポンシブメタコンポーネントです。
1。デフォルトナビゲーションバー
ナビゲーションバーは、モバイルデバイスで折りたたんで（オン /オフにすることができます）。
折りたたみモードと水平モードのしきい値をカスタマイズします
ナビゲーションバーに置いたものの長さに応じて、折り畳みモードと水平モードに入るためにナビゲーションバーのしきい値を調整する必要があるかもしれません。 @grid-float-breakpoint変数の値を変更するか、独自のメディアクエリCSSコードを追加することにより、ニーズを達成できます。
最初のステップ：
最も外側のコンテナナビゲーションタグを付け、ナビゲーションバーに属していることを示すNav-Barスタイルのクラスを追加します
<nav role = "navigation"> </nav>
効果：
ステップ2 ：ヘッダーを追加します
<nav role = "navigation"> <div> <ボタンタイプ= "button" data-toggle = "collapse" data-target = "＃bs-example-navbar-collaps-1"> <span>トグルナビゲーション</span> <span> </span> <span> </span> <スパン> </span> </div> </div> </</</</</</</</div>
ボタンラベルには、3つのスパンアイコンがネストされています。次に、Navbar-Toggleスタイルのクラスと属性崩壊（崩壊）を与え、クリック時にターゲットはデータターゲットです。
窓がある程度狭くなると、右側の影響が現れます。
ステップ3：ネストされたドロップダウンメニュー、フォーム、ドロップダウンメニュー。
コード：
<h1>ナビゲーションバー</h1> <nav role = "navigation"> <div> <button type = "button" data-toggle = "collapse" data-target = " href = "＃"> brand </a> </div> <div id = "bs-example-navbar-collaps-1"> <！ - ネストされたドロップダウンメニュー - > <ul> <li> <li> <li> <li> <li> <li> <li> <li> </li> <li> <a href = "＃"> link </a> </lil < <li> <a href = "＃" data-toggle = "dropdown"> pulldown <b> </b> </a> <ul> <li> <a href = "＃"> action </a> </li> <li> <a href = "＃"> action </a> </li> </ href = "＃"> action </a> </li> <li> <a href = "＃"> action </a> </li> <li> <a href = "＃"> action </a> </li> </li> </li> </ul> <！ - ネストされたフォーム - > <フォームアクション= " type = "button">送信</button> </form> <！-----> </div> </nav>
プレビュー：
ナビゲーションバーのアクセシビリティを強化します
アクセシビリティを強化するには、各ナビゲーションバーにロール=「ナビゲーション」を追加してください。
2。フォーム
フォームを.navbar-form内に配置すると、より狭いビューポートで良好な垂直アライメントと崩壊した状態が得られます。アライメントオプションを使用して、ナビゲーションバーのどこに表示されるかを決定します。
Mixin、.navbar-form、.form-inlineを使用して、多くのコードが共有されます。
コード
<form action = "" role = "search"> <div> <input type = "text"/> </div> <button type = "button"> shint </button> </form>
入力ボックスにラベルラベルを追加します
入力ボックスにラベルタグを追加しないと、画面リーダーに問題が発生します。ナビゲーションバーのフォームの場合、.SRのみのクラスを通じてラベルタグを非表示にできます。
3。ボタン
コード：
<ボタンタイプ= "button"> login </button>
プレビュー：
4。テキスト
.navbar-textでテキストを包むとき、<p>タグは通常、正しい線の間隔と色に使用されます。
コードスニペット：
<p>テキスト</p>
5。非視聴リンク
標準のナビゲーションコンポーネントの外側に標準リンクを追加したい場合が、.navbar-linkクラスを使用すると、リンクに正しいデフォルトと逆色を与えることができます。
コードスニペット：
次のようにコードをコピーします：<p>これは<a href = "＃"> link </a> </p>です
6。コンポーネントアライメント
.navbar-leftまたは.navbar-rightツールクラスを使用して、ナビゲーションリンク、フォーム、ボタン、またはテキストを合わせます。両方のクラスは、特定の方向にCSSフローティングスタイルを使用します。たとえば、ナビゲーションリンクを調整するには、個別のツールクラス<ul>に配置する必要があります。
これらのクラスは、.pull-leftと.pull-rightのミックスバージョンですが、メディアクエリに限定されているため、さまざまなサイズの画面でナビゲーションバーコンポーネントを簡単に処理できます。
7。上に固定しました
.navbarフィックストップを追加すると、ナビゲーションバーを上部に固定できます。効果は十分ではありません。
ボディータグのパディングを設定する必要があります
この固定ナビゲーションバーは、<body>の上にパディングを設定しない限り、ページ上の他のコンテンツを不明瞭にします。独自の値を使用するか、以下に示すコードを使用してください。ヒント：ナビゲーションバーのデフォルトの高さは50pxです。
ボディ{パディングトップ：70px; }
ブートストラップCSSのコアファイルの後に配置する必要があります。 （カバレッジの問題）
8。下部に固定
代わりに.navbar-fixed-bottomを使用してください。
ボディータグの内部（パディング）を設定する必要があります
この固定ナビゲーションバーは、<body>の下部にパディングを設定しない限り、ページ上の他のコンテンツを曖昧にします。独自の値を使用するか、以下に示すコードを使用してください。ヒント：ナビゲーションバーのデフォルトの高さは50pxです。
ボディ{パディングボトム：70px; }
ブートストラップCSSのコアをロードした後は、必ず使用してください。
9。トップにとどまります
.navbar-static-topを追加して、ページでナビゲーションバーを作成します。ページが下にスクロールすると消えます。 .navbar-fixed-*クラスとは異なり、体にパディングを追加する必要はありません。
10。逆色のナビゲーションバー
.navbar-inverseクラスを追加することで、ナビゲーションバーの外観を変更できます。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記は、ブートストラップナビゲーションバーの使用方法の詳細な紹介です。みんなの学習に役立つことを願っています。