JSコンポーネントのブートストラップナビゲーションバーの使用方法について

この記事では主に JS コンポーネントの Bootstrap ナビゲーション バーの使用方法を詳しく紹介します。興味のある方は参考にしてください。

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

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

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

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

効果:

第二ステップ: ヘッダーの追加

<nav class="navbar navbar-default" role="navigation"> 
  <p 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> 
  </p> 
 </nav>

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

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

<h1 id="导航条">导航条</h1> 
 <nav class="navbar navbar-default" role="navigation"> 
  <p 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> 
  </p> 
  <p 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"> 
   <p class="form-group"> 
   <input type="text" class="form-control" /> 
   </p> 
   <button type="button" class="btn btn-default">Submit</button> 
   
  </form> 
  <!----> 
  </p> 
 </nav>

プレビュー:

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

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

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

コード

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

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

3. ボタン
コード:

<button type="button" class="btn btn-default navbar-btn">登陆</button>

プレビュー:

4. テキストを .navbar-text で折り返すときは、行間隔と色を正しくするために、通常 < を使用します。 ;p>タグ。
コード スニペット:

<p class="navbar-text">文本</p>

5. 非ナビゲーション リンク

次に、.navbar-link クラスを使用して、リンクに正しいデフォルトの色を設定します。逆色。
コード スニペット:

<p class="navbar-text navbar-right">这个是<a href="#" class="navbar-link">链接</a></p>

6. コンポーネントの配置

.navbar-left または .navbar-right ツール クラスを使用して、ナビゲーション リンク、フォーム、ボタン、またはテキストを配置します。どちらのクラスも、特定の方向で CSS float スタイルを使用します。たとえば、ナビゲーション リンクを整列するには、ユーティリティ クラスが適用された別の

にナビゲーション リンクを配置します。

これらのクラスは .pull-left および .pull-right の mixin バージョンですが、メディア クエリに限定されているため、さまざまな画面サイズでナビゲーション バー コンポーネントを簡単に処理できます。

7. 上部に固定

ナビゲーション バーを上部に固定するには、.navbar-fixed-top を追加します。効果はなくなりました。
body タグのパディングを設定する必要があります

の上にパディングを設定しない限り、この固定ナビゲーション バーはページ上の他のコンテンツをカバーします。独自の値を使用するか、以下に示すコードを使用します。ヒント: ナビゲーション バーのデフォルトの高さは 50 ピクセルです。

body { padding-top: 70px; }

Bootstrap CSS のコアファイルの後に配置する必要があります。 (カバレッジの問題)

8. 下部を修正
.navbar-fixed-bottom に置き換えます。 body タグの内部 (パディング) を設定する必要があります

の下部にパディングを設定しない限り、この固定ナビゲーション バーはページ上の他のコンテンツをカバーします。独自の値を使用するか、以下に示すコードを使用します。ヒント: ナビゲーション バーのデフォルトの高さは 50 ピクセルです。

body { padding-bottom: 70px; }

一定要在加载Bootstrap CSS的核心后使用它。
9、静止在顶部
通过添加.navbar-static-top即可创建一个与页面的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是，你不用给body添加padding。
10、反色的导航条
通过添加.navbar-inverse类可以改变导航条的外观。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于jQuery插件Validate实现自定义校验结果样式的代码

手机端实现Bootstrap图片轮播的效果

bootstrap时间控件daterangepicker的使用方法

以上がJSコンポーネントのブートストラップナビゲーションバーの使用方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。