ホームページ >ウェブフロントエンド >htmlチュートリアル >ナビゲーション バー (navbar) とナビゲーション (nav) の概要

ナビゲーション バー (navbar) とナビゲーション (nav) の概要

零下一度
零下一度オリジナル
2017-07-18 16:22:5318951ブラウズ

Bootstrap ナビゲーション バー

<p> ナビゲーション バーは、Bootstrap Web サイトの優れた機能であり、目立つ機能です。ナビゲーション バーは、アプリまたは Web サイトのナビゲーション ヘッダーの応答性の高い基本コンポーネントとして機能します。ナビゲーション バーは、モバイル ビューポートでは折りたたまれ、使用可能なビューポートの幅が増加するにつれて水平に広がります。 Bootstrap ナビゲーション バーの中核となるナビゲーション バーには、サイト名と基本的なナビゲーション定義スタイルが含まれています。

<p>デフォルトのナビゲーション バー

<p> デフォルトのナビゲーション バーを作成する手順は次のとおりです。

<p>クラス .navbar、.navbar-default を <nav> タグに追加します。

<p> アクセシビリティを高めるために、上記の要素に role="navigation" を追加します。

<p> ヘッダー クラス .navbar-header を <div> 要素に追加します。これには、クラス navbar-brand が含まれる <a> 要素が含まれます。こうすることで文字が大きく表示されます。

<p> ナビゲーション バーにリンクを追加するには、クラス .nav、.navbar-nav を使用して順序なしリストを追加するだけです。

前に言った事

<p> ナビゲーションバー(navbar)とナビゲーション(nav)の違いはたったの一言で、さらに「バー」という単語が追加されています。実際、Bootstrap フレームワークでは依然として明らかに異なります。ナビゲーション バー (navbar) には背景色があり、ナビゲーション バーは純粋なリンク (ナビゲーションと同様)、フォーム、またはフォームとナビゲーションの組み合わせにすることができます。この記事では、Bootstrap ナビゲーション バーについて詳しく紹介します

<p>

基本的なナビゲーション バー

<p> Bootstrap フレームワークでは、ナビゲーション バーとナビゲーションは見た目にはそれほど違いはありませんが、実際に使用すると、ナビゲーション バーはナビゲーションよりもはるかに複雑です。

<p> ナビゲーションバーは、アプリケーションまたはWebサイトのナビゲーションヘッダーとして使用される応答性の高い基本コンポーネントです。モバイル デバイス上では折りたたむ (および開いたり閉じたり) ことができ、ビューポートの幅が増えると徐々に水平方向に拡張されます

<p> 基本的なナビゲーション バーを作成する場合、主に次の手順があります:

<p> 1、まずクラス名を追加します。 「navbar-nav」をベースにナビゲーションリスト(
<p> 

反色导航条

<p>  反色导航条其实是Bootstrap框架提供的第二种风格的导航条,与默认的导航条相比,使用方法并无区别,只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改

<p>

<div class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">   
<li class="active"><a href="##">HTML</a></li>   
<li><a href="##">CSS</a></li>   <li><a href="##">Javascript</a>
</li> 
</ul>
</div>
<p>

<p> 

以上がナビゲーション バー (navbar) とナビゲーション (nav) の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:ホワイトスペースとは何ですか?空白文字が HTML 構造に及ぼす影響次の記事:ホワイトスペースとは何ですか?空白文字が HTML 構造に及ぼす影響

関連記事

続きを見る