ホームページ >ウェブフロントエンド >jsチュートリアル >JSコンポーネントのブートストラップナビゲーションバーの使用方法について

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

不言オリジナル: 2018-06-25 14:01:171571ブラウズ

この記事では主に 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 class="page-header">导航条</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 スタイルを使用します。たとえば、ナビゲーションリンクを整列するには、ユーティリティクラスが適用された別の ff6d136ddc5fdfeffaf53ff6ee95f185 にナビゲーションリンクを配置します。
これらのクラスは .pull-left および .pull-right の mixin バージョンですが、メディアクエリに限定されているため、さまざまな画面サイズでナビゲーションバーコンポーネントを簡単に処理できます。

7. 上部に固定

ナビゲーションバーを上部に固定するには、.navbar-fixed-top を追加します。効果はなくなりました。
body タグのパディングを設定する必要があります 6c04bd5ca3fcae76e30b72ad730ca86d の上にパディングを設定しない限り、この固定ナビゲーションバーはページ上の他のコンテンツをカバーします。独自の値を使用するか、以下に示すコードを使用します。ヒント: ナビゲーションバーのデフォルトの高さは 50 ピクセルです。

body { padding-top: 70px; }

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

8. 下部を修正
.navbar-fixed-bottom に置き換えます。 body タグの内部 (パディング) を設定する必要があります
6c04bd5ca3fcae76e30b72ad730ca86d の下部にパディングを設定しない限り、この固定ナビゲーションバーはページ上の他のコンテンツをカバーします。独自の値を使用するか、以下に示すコードを使用します。ヒント: ナビゲーションバーのデフォルトの高さは 50 ピクセルです。

body { padding-bottom: 70px; }

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

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

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

関連記事