ナビゲーションバー（NAVBAR）は、ブートストラップの独立したコンポーネントであり、ブートストラップのナビゲーションバー（NAVBAR）とナビゲーション（NAV）の間には明確な違いがあります。ナビゲーションバー（NAVBAR）には背景色があり、ナビゲーションバーは純粋なリンク、フォーム、フォーム、ナビゲーションなどのさまざまな形式であることができます。
1.レベル2のメニューとフォームを備えた実用的な戦闘用ワンナビゲーションバー
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title> navigation bar </title> <link rel = "stylesheet" http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/boottrap.min.cs ">ボディ{マージン：30px;パディング：30px;} </style> </head> <body> <div role = "navigation"> <！ - タイトルは「navbar-header "and" navbar-brand " - > <div> <a href =" ## ">タイトル</a> <a href = "##" data-toggle = "dropdown"> blog <span> </span> </a> <！ - 2番目のメニュー - > <ul> <li> <a href = "##"> 2番目のメニュー</</li> </li> </li> <li> <a href = "## "> rol = "search"> <div> <入力タイプ= "Text" Placeholder = "/> </div> <button type =" submit "> search </button> </form> </div> <！ - ページの読み込みをより速くするためにドキュメントの最後に配置 - > <！ - bootstrapのJSプラグインを使用する場合は、jquery- <> <> <> <> < src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <！ - 必要に応じて使用できるすべてのJSプラグインまたはJSプラグインを含む - > <スクリプトsrc = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>レンダリングは次のとおりです。
Navbar-brandのA要素とNavbar-NavのULおよびNavbar形式を使用することに加えて、Bootstrapのナビゲーションバーで他の要素を使用できます。
1）ナビゲーションバーNavbar-Btnのボタン
2）ナビゲーションバーNavbarのテキスト
3）ナビゲーションバーNavbar-Linkの通常のリンク
2。実用的な戦闘2固定ナビゲーションバー
<！ - トップナビゲーションバー - > <div role = "navigation"> <div> <a href = "##"> title </a> </div> <ul> <li> <a href = "##"> home </a> <li> <li> <a href = "##"> blog </a> </ul> </div> <！ - ボトムナビゲーションバー - > <div role = "navigation"> <div> <a href = "##"> title </a> </div> <ul> <li> <ul> <li> </a> </li> <li> <a href = "##"> blog </a> </li> < href = "##"> forum </a> </li> </ul> </div> <！ - テキストコンテンツ - > <div> Webページテキストコンテンツ</div>
レンダリングは次のとおりです。
3.実用的な3応答ナビゲーションバー
<div role = "navigation"> <div> <！ - .navbar-toggleスタイルは、トグルを縮小するコンテンツに使用されます。つまり、Nav-ollapse collapseスタイルが配置されている要素 - > <ボタン= "ボタン" data-toggle = "collapse" data-target = "。 <！ - navbarブランドが広い画面と狭い画面の両方に表示されていることを確認してください - > <a href = "##">タイトル</a> </div> <！ - div.navbar-responsive-collapseコンテナの内容が隠され、Icon-bar Iconが表示されます。アイコンバーアイコンがクリックされたら、もう一度展開します。画面が768pxを超えると、デフォルトで表示されます。 - > <div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> forum </a> </li> </ul> </div> </div>
レンダリングは次のとおりです。
色を反転する必要がある場合があります。 Bootstrapはこのために倒立ナビゲーションバーを提供しますが、Navbarの耳の耳の耳の耳のようなクラス名をNavbarの逆に置き換えるだけで、ナビゲーションバーの背景色とテキスト色が変更されます。
4.実用的な4ページネーションナビゲーション
1）ページ番号を使用したページネーションナビゲーション
<！ - ページネーション：通常のサイズページネーションLG：ページネーションナビゲーションをより大きくするパジネーションパジネーション-SM：ページネーションを小さくする - > <ul> <li> <a href = "＃">«home </a> </li> <li> <li> <a href = "＃"> 3 </a> </li> <li> <a href = "＃"> 4 </a> </li> <li> <a href = "＃"> 5 </a> </li> <！
レンダリングは次のとおりです。
2）ページターンとページネーションナビゲーション
<ul> <li> <a href = "＃">«前のページ</a> </li> <！ - 無効ステータス - > <li> <a href = "＃">次のページ»</a> </li> </ul> <ページ»</a> </li> </ul>
レンダリングは次のとおりです。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。