この記事には、参照用のブートストラップナビゲーションバーの基本的な使用方法が含まれています。特定のコンテンツは次のとおりです
1。ブートストラップ基本的なナビゲーションスタイル
ナビゲーションバーは、主に「.nav」スタイルを通じてブートストラップフレームワークで作られています。デフォルトの「.NAV」スタイルは、デフォルトのナビゲーションスタイルを提供しません。 「Nav-Tabs」、「Nav-Pills」など、効果的にするには、別のスタイルを取り付ける必要があります。たとえば、右側のコードエディターにタブナビゲーションバーの例があります。彼の実装方法は、UL Tag.NavとNav-Tabsに2つのクラススタイルを追加することです
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##" href = "##">レスポンティブ</a> </li> </ul>
2。BootstrapBasic Navigation Bar
基本的なナビゲーションバーを作成する場合、主に次の手順が含まれます。
ステップ1：最初にナビゲーションリスト（<ul class = "nav">）に基づいてクラス名「navbar-nav」を追加します
ステップ2：リストの外側にコンテナ（div）を追加し、クラス名「navbar」と「navbar-default」を使用します
「.navbar」スタイルの主な機能は、左右のパディングと丸い角の効果を設定することですが、色に関連するスタイルは決して設定されていません。
<div role = "navigation"> <ul> <li> <a href = "##">ホームページ</a> </li> <li> <a href = "##">一連のチュートリアル</a> </li> <li> <li> <a href = "##">私たちについて</a> </li> </ul> </div>
3.ブートストラップナビゲーションバーにタイトルを追加します
Webページの制作には、多くの場合、メニューの前にタイトルがあります（テキストサイズは他のテキストよりもわずかに大きいです）。実際、Bootstrapフレームワークは、「Navbar-Header」と「Navbar-Brand」を通じて実装されているすべての人にこの考慮事項も行いました。
<div role = "navigation"> <div> <a href = "##">ナビゲーションバー</a> </div> <ul> <li> <a href = "##">ホームページ</a> </li> <li> <a href = "##">チュートリアルのシリーズ</a> <li> <a href = "##">成功したケース</a> </li> <li> <a href = "##">私たちについて</a> </li> </ul> </div>
4。ブートストラップナビゲーションバーセカンダリメニュー
また、ナビゲーションバーにセカンダリメニューを追加するのは非常に簡単です
<div role = "navigation"> <div> <a href = "##">ナビゲーションバー</a> </div> <ul> <li> <a href = "##">ホームページ</a> </li> <li> <a href = "##"> data-toggle = "dropdown" href = "##"> css3 </a> </li> <li> <a href = "##"> javascript </a> </li> <li> <a href = "##"> php </a> href = "##">成功したケース</a> </li> <li> <a href = "##">私たちについて</a> </li> </ul> </div>
5。フォーム付きブートストラップナビゲーションバー
一部のナビゲーションバーには検索フォームが含まれており、「Navbar-form」がBootstrapフレームワークに提供されています。この方法は非常に簡単に使用できます。 navbar-formクラス名のあるフォームをNavbarコンテナに配置します。 Navbar-Left」を使用すると、フォームが左側に浮かんでアライメントをより適切に実現できます。ブートストラップフレームワークでは、「Navbar-Right」スタイルも提供され、ナビゲーションバーの右に要素を整列させることができます。
<div role = "navigation"> <div> <a href = "##"> bootstrap </a> </div> <ul> <li> <a href = "##"> Homepage </a> </li> <li> href = "##"> css3 </a> </li> <li> <a href = "##"> javascript </a> </li> <li> <a href = "##"> php </a> href = "##">有名な教師への紹介</a> </li> <li> <a href = "##">成功したケース</a> </li> <li> <a href = "##">私たちについて</li> </ul> <form action = "##" rol = ""/> <div> <入力タイプ= </> type = "submit">検索</button> </form> </div>
6。ブートストラップナビゲーションバーのボタン、テキスト、リンク
NavbarブランドのA要素とNavbar-NavのULおよびNavbar形式を使用することに加えて、Bootstrapフレームワークのナビゲーションバーで他の要素を使用できます。フレームワークは、他の3つのスタイルを提供します。
1）。ナビゲーションバーNavbar-Btnのボタン
2）。ナビゲーションバーNavbarのテキスト
3）。ナビゲーションバーのnavbar-link
ただし、これらの3つのスタイルは、フレームワークで使用される場合、特定の制限の対象となり、NavbarブランドとNavbar-Navと組み合わせて使用する必要があります。さらに、数量には特定の制限があります。一般に、1つまたは2つを使用する場合、問題はありません。2つを超えると問題が発生します。
<div role = "navigation"> <div> <a href = "##"> bootstrap </a> </div> <ul> <li> <a href = "##"> navbar text </a> </li> <li> <li> <a href = "##"> navbar Text </a> </li> </ul> </div> <div role = "navigation"> <div> <a href = "##"> bootstrap </a> </div> <div> <a href = "##"> navbar tex href = "##"> navbar text </a> </div> </div>
7。ブートストラップ固定ナビゲーションバー
多くの場合、設計者はナビゲーションバーをブラウザの上部または下部に固定したいと考えており、この固定ナビゲーションバーの適用はモバイル開発でより一般的です。ブートストラップフレームワークは、ナビゲーションバーを修正する2つの方法を提供します。
.Navbar-Fixed-Top：ナビゲーションバーはブラウザウィンドウの上部に固定されています
.Navbar-Fixed-Bottom：ナビゲーションバーはブラウザウィンドウの下部に固定されています
<div role = "navigation">…</div> <div>私はコンテンツです</div> <div role = "navigation">…</div>
8。ブートストラップページネーションナビゲーション
ページ番号付きページネーションナビゲーションは、特にリストページに多くのコンテンツがある場合、ページネーションナビゲーション方法をユーザーに提供する場合に、最も一般的なページネーションナビゲーションである可能性があります。通常、多くの学生は、div> aおよびdiv> span構造を使用してページナビゲーションを作成するのが好きです。ただし、ブートストラップフレームワークでは、ul> li> aのような構造が使用され、ULタグにページネーション方法が追加されます。
<ul> <li> <a href = "＃">«</a> </li> <li> <a href = "＃"> 1 </a> </li> <li> <a href = "＃"> 2 </a> </li> <li> <a href = "＃"＃ "> 3 </a> href = "＃"> 4 </a> </li> <li> <a href = "＃"> 5 </a> </li> <li> <a href = "＃">»»»»</a> </li> </ul>
ブートストラップフレームワークでは、いくつかの異なる状況でページネーションボタンサイズを設定することもできます。
1）。 「ページネーションlg」を介してページネーションナビゲーションを大きくします。
2）。 「ページネーション-SM」を通してページネーションナビゲーションを小さくする
<ul>…</ul> <ul>…</ul> <ul>…</ul> <ul>…</ul>
ページ番号のページナビゲーションを提供することに加えて、ブートストラップフレームワークはページターンナビゲーションも提供します。この種のページネーションナビゲーションは、個人ブログ、雑誌Webサイトなどのいくつかの簡単なWebサイトでよく見られます。この種のページネーションナビゲーションは、特定のページ番号を表示せず、「前のページ」と「次のページ」ボタンのみを提供します。
実際には、ページ旋回ページネーションナビゲーションは、ページコーディングされたページネーションナビゲーションに似ており、ULタグにページャークラスを追加します。
<ul> <li> <a href = "＃">«前のページ</a> </li> <li> <a href = "＃">次のページ»</a> </li> </ul>
デフォルトでは、ページ旋回のページングナビゲーションが中央に表示されますが、1つが左側に、もう1つが右にある必要がある場合があります。 Bootstrapフレームワークは2つのスタイルを提供します
前：「前の」ボタンを残します
次：右側の「次の」ボタンを使用します
<ul> <li> <a href = "＃">«前のページ</a> </li> <li> <a href = "＃">次のページ»</a> </li> </ul>
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はすべてブートストラップナビゲーションバーに関するものです。すべての人の学習に役立つことを願っています。