JSコンポーネントの使い方を詳しく解説 ブートストラップナビゲーション bar_javascriptスキル

ナビゲーション バーは、アプリまたは Web サイトのナビゲーション ヘッダーとして機能する応答性の高いメタ コンポーネントです。

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

モバイル デバイスではナビゲーション バーは折りたたみ可能 (開閉可能) で、利用可能なビューポートの幅が増えると水平方向に拡張されます
折りたたみモードと水平モードのしきい値をカスタマイズします
ナビゲーションバーに配置するコンテンツの長さに応じて、ナビゲーションバーが折りたたみモードと水平モードになるしきい値を調整する必要がある場合があります。 @grid-float-breakpoint 変数の値を変更するか、独自のメディア クエリ CSS コードを追加することで、ニーズを実現できます。
ステップ 1:
最も外側のコンテナーの nav タグ、およびそれがナビゲーション バーに属していることを示す nav-bar スタイル クラスを追加します

<nav class="navbar navbar-default" role="navigation"> 
</nav>

効果:

ステップ 2: ヘッダーを追加します

<nav class="navbar navbar-default" role="navigation"> 
   <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
   <a href="#" class="navbar-brand">品牌</a> 
   </div> 
  </nav>

ボタンのラベルには 3 つのスパン アイコンがネストされています。次に、navbar-toggle スタイル クラスと属性 Collapse (折りたたみ) を指定し、クリックするとターゲットがデータ ターゲットになります。
ウィンドウをある程度縮小すると、右のような効果が現れます。

ステップ 3: ネストされたドロップダウン メニュー、フォーム フォーム、ドロップダウン メニュー。
コード:

<h1 class="page-header">导航条</h1> 
  <nav class="navbar navbar-default" role="navigation"> 
   <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
   <a href="#" class="navbar-brand">品牌</a> 
   </div> 
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <!--嵌套下拉菜单--> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      下拉<b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
      </ul> 
     </li> 
    </ul> 
     
    <!--嵌套表单--> 
    <form action="" class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" /> 
     </div> 
     <button type="button" class="btn btn-default">Submit</button> 
     
    </form> 
    <!----> 
   </div> 
  </nav> 

プレビュー:

ナビゲーション バーのアクセシビリティを強化します
アクセシビリティを高めるために、各ナビゲーション バーに role="navigation" を必ず追加してください。

2. フォーム
フォームを .navbar-form 内に配置すると、垂直方向の配置が適切になり、狭いビューポートで折りたたまれた状態が得られます。配置オプションを使用して、ナビゲーション バー上のどこに表示するかを決定します。

多くのコードは、ミックスイン、.navbar-form、および .form-inline を使用して共有されます。

コード

<form action="" class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" /> 
     </div> 
     <button type="button" class="btn btn-default">Submit</button> 
     
    </form> 

入力ボックスにラベルを追加します
入力フィールドにラベルを追加しないと、スクリーン リーダーで問題が発生します。ナビゲーション バー内のフォームの場合、.sr 専用クラスを使用してラベル label を非表示にすることができます。

3. ボタン
コード:
ログイン
プレビュー:

4. テキスト
.navbar-text でテキストを折り返す場合、行間隔と色を正しくするために、通常、

タグが使用されます。
コードスニペット:

テキスト

5. ナビゲーション以外のリンク
標準のナビゲーション コンポーネントに加えて、標準のリンクを追加したい場合は、.navbar-link クラスを使用して、リンクに正しいデフォルトの色と反転色を与えます。
コードスニペット:

コードをコピー コードは次のとおりです。

これはリンク

です
6. Component alignment
Use the .navbar-left or .navbar-right tool classes to align navigation links, forms, buttons or text. Both classes use CSS float styles in specific directions. For example, to align navigation links, place them in a separate

that has a utility class applied to them.

These classes are mixin versions of .pull-left and .pull-right, but they are limited to media queries, which makes it easier to handle the navigation bar component on various screen sizes.

7. Fixed at the top
Add .navbar-fixed-top to fix the navigation bar at the top. The effect is gone.
Need to set padding for the body tag
This fixed navigation bar will cover other content on the page, unless you set padding above the . Use your own values, or use the code given below. Tip: The default height of the navigation bar is 50px.

body { padding-top: 70px; }
It must be placed after the core file of Bootstrap CSS. (Coverage issue)
8. Fixed at the bottom
Use .navbar-fixed-bottom instead.
Need to set the inner (padding) for the body tag
This fixed navigation bar will cover other content on the page, unless you set padding at the bottom of the . Use your own values, or use the code given below. Tip: The default height of the navigation bar is 50px.

body { padding-bottom: 70px; }
Be sure to use it after loading the core of Bootstrap CSS.
9. Still at the top
Create a navigation bar with the page by adding .navbar-static-top. It disappears as you scroll down the page. Unlike the .navbar-fixed-* classes, you don’t need to add padding to the body.
10. Inverted navigation bar
The appearance of the navigation bar can be changed by adding the .navbar-inverse class.

The above is a detailed introduction on how to use the Bootstrap navigation bar. I hope it will be helpful to everyone's learning.