ブートストラップのナビゲーションバーにはどのパッケージが使用されますか?-ブートストラップのチュートリアル-php.cn

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

WBOY

リリース： 2022-02-11 16:54:03

オリジナル

2456 人が閲覧しました

ブートストラップでは、ナビゲーションバーは「nav」要素でラップされます。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 サイトの他の関連記事を参照してください。