ナビゲーションバー（NAVBAR）は、ブートストラップの独立したコンポーネントであり、ブートストラップのナビゲーションバー（NAVBAR）とナビゲーション（NAV）の間には明確な違いがあります。ナビゲーションバー（NAVBAR）には背景色があり、ナビゲーションバーは純粋なリンク、フォーム、フォーム、ナビゲーションなどのさまざまな形式であることができます。
1。レベル2のメニューとフォームを備えた実用的な戦闘1ナビゲーションバー
<！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つのレスポンシブナビゲーションバー
レンダリングは次のとおりです。
色を反転する必要がある場合があります。 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>
レンダリングは次のとおりです。
5。実用的な5タグ
一部のWebページでは、ユーザーに次のような追加情報を伝えるためにタグが追加されることがよくあります。
この効果は、ブートストラップでラベルコンポーネントに抽出され、「.label」スタイルで強調表示されます。ボタン要素ボタンと同様に、ラベルスタイルは、主にこれらのクラス名を介してさまざまな色を提供し、背景色とテキスト色を変更します。
レンダリングは次のとおりです。
6.実用的な戦闘6-バッジ
バッジは主に、未読メッセージの数を思い出させるために使用されます。ブートストラップでは、「バッジ」スタイルを使用してバッジ効果を実現します。
<！ - Navbar-Default Navigation Bar Medal - > <Div Role = "Navigation"> <div> <a href = "##"> title </a> </div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "## ">ブログ</a> </li> < href = "##"> forum <span> 10 </span> </a> </li> <li> <a href = "##">フィードバック</a> </li> </ul> </div>
レンダリングは次のとおりです。
7。実用的なセブン -アニメーションのトランジションを駆動するポップアップボックス
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title>アニメーショントランジションポップアップボックス</title> <link rel = "styleSheet" href = "http://netdna.boottrapcdn.com/boottrap/3.1.1/cs/boottrap.min.css <style> body {margin：30px; padding：30px;} </style> </head> <body> <button type = "button">クリックします</button> <div div = "mymodal"> <div> <div> <div> <ボタン= "ボタン" data-dismiss = "modal"> <span </button </spar> </span> </> < <h4>ポップアップタイトル</h4> </div> <div> <p>ポップアップボディコンテンツ</p> </div> <div> <ボタンタイプ= "button" data-dismiss = "modal"> close </button> </div> <ドキュメントの最後に、ページの読み込みをより速くするために - > <！ - ブートストラップのJSプラグインを使用する場合は、最初にjQuery-> <スクリプトsrc = "http://libs.baidu.com/jquery/1.9.9.0/jquery.min.js"> </</> < src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> <script> $（function（）{$（ "。btn"）。 }）; </script> </body> </html>レンダリングは次のとおりです。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial