ブートストラップのナビゲーション バーにはどのパッケージが使用されますか?

ブートストラップでは、ナビゲーション バーは「nav」要素でラップされます。nav 要素は、ナビゲーション リンク パーツの定義に使用されます。この要素を使用してナビゲーション バーをラップすると、ナビゲーション バーの応答性を高めることができます。構文は「ナビゲーション バー」です。

このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター

どのパッケージが使用されているかBootstrap のナビゲーション バー

Bootstrap のナビゲーション バー (navbar) は、アプリケーションまたは Web サイトの先頭に配置され、ナビゲーションの応答性の高い基本コンポーネントとして、状況に応じてナビゲーション バーの表示状態を自動的に調整できます。ブラウザ ウィンドウの幅を調整し、モバイル デバイスでは折りたたむことができます (オンまたはオフにすることができます)。ビューポート (ビューポート) の幅が増加すると、徐々に水平拡張モードに変わります。

デフォルト スタイルのナビゲーション バー

Bootstrap のナビゲーション バーには 2 つの部分が含まれています: 1 つの部分は、.navbar-header のコンテナーによって定義されたアイコン ボタンの配置に使用され、もう 1 つの部分はナビゲーションの配置に使用されます。コンポーネント。.nav-collapse.collapse のコンテナーによって定義されます。

.navbar-header コンテナには通常、サイト名とアイコン ボタンが含まれています。サイト名は常に表示されますが、アイコン ボタンは小さな画面でのみ表示されます。サイト名は .navbar-brand リンクです。アイコン ボタンは .navbar-toggle クラス ボタンで、3 つの class="icon-bar" 要素が含まれています。ボタンを定義するときは、ボタンに data-toggle 属性と data-target 属性も指定します。 data-toggle 属性は JavaScript にボタンの動作を伝え、data-target 属性はボタンがクリックされたときに表示されるメニュー要素を示します。

.nav-collapse.collapse 通常、コンテナには、ナビゲーション リンク、フォーム、ボタン、ドロップダウン メニュー、テキスト、非ナビゲーション リンクなどのナビゲーション コンポーネントのみが含まれます。ナビゲーション コンポーネントは、大きいサイズでは水平方向にのみ展開されます。小さな画面では拡大されず、画面上のアイコンボタンをクリックすると表示されます。単純なナビゲーション バーの場合、通常、これにはナビゲーション リンクのみが含まれます。ナビゲーション リンクは、.nav.navbar のリスト要素を使用して定義されます。

ナビゲーション バーの応答性を高めるために、通常は .navbar

要素でラップされます。

タグは、ナビゲーション リンクの部分を定義します。

もちろん、

要素を使用することもできますが、支援機器を使用しているユーザーがこれがナビゲーション領域であることを明確に認識できるように、必ず role="navigation" 属性を設定してください。 。または、適切な配置とパディングを得るには、ナビゲーション バー全体を .container または .container-fluid コンテナーに配置します。

関連する推奨事項: ブートストラップ チュートリアル

以上がブートストラップのナビゲーション バーにはどのパッケージが使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。