Bootstrap ナビゲーション bar_javascript スキルを使用するための一連の共有方法

この記事には、Bootstrap ナビゲーション バーの基本的な使い方が記載されています。具体的な内容は次のとおりです。

Bootstrap フレームワークでのナビゲーション バーの作成主に.nav」スタイルを使用します。デフォルトの「.nav」スタイルにはデフォルトのナビゲーション スタイルが用意されていないため、有効にするには、「nav-tabs」、「nav-pills」などの別のスタイルをアタッチする必要があります。たとえば、右側のコード エディターにタブ ナビゲーション バーの例があります。実装方法は、ul タグ

HomeCSS3SassjQueryResponsive

2. ブートストラップの基本ナビゲーション バー

基本的なナビゲーション バーを作成するには、主に次の手順があります。

ステップ 1 : まず、ナビゲーション リスト (

) を作成し、クラス名 "navbar-nav"

を追加します。 ステップ 2 : リストの外にコンテナ (p) を追加し、クラス名 "navbar" と "navbar-default" を使用します

".navbar" スタイルの主な機能は、左右などの効果を設定することですパディングと丸い角はありますが、色関連のスタイルはまったく設定されていません

网站首页系列教程名师介绍成功案例关于我们

3. Bootstrap ナビゲーション バーのタイトル

Web ページを作成する場合、メニューの前にタイトルが表示されることがよくあります (テキスト サイズは他のテキストよりわずかに大きくなります)。実際、Bootstrap フレームワークではこの点も考慮されています。 「navbar-header」と「navbar-brand」を通じて誰でも実現できます。

导航条
网站首页系列教程名师介绍成功案例关于我们

4. ブートストラップ ナビゲーション バーのセカンダリ メニュー

ナビゲーション バーにもセカンダリ メニューを追加します。シンプル

导航条
网站首页系列教程
CSS3JavaScriptPHP名师介绍成功案例关于我们

5. フォーム

を備えたブートストラップ ナビゲーション バーには、検索があります。 「navbar-form」はBootstrapフレームワークで提供されています。使用方法は非常に簡単です。navbar-formクラス名のフォームをnavbarコンテナに配置します。 navbar-left を使用すると、フォームを左にフローティングして配置を改善できます。Bootstrap フレームワークでは、ナビゲーション バーの要素を右に配置するための「navbar-right」スタイルも提供されます。

Bootstrap
网站首页系列教程
CSS3JavaScriptPHP名师介绍成功案例关于我们搜索

6. Bootstrap ナビゲーション バーのボタン、テキスト、リンク

の navbar ブランドの a 要素と navbar の使用に加えて、 Bootstrap フレームワークのナビゲーション バー nav の ul および navbar-form に加えて、フレームワークでは他の 3 つのスタイルも使用できます:

1) ナビゲーション バーのボタン navbar-btn <🎜。 >2). ナビゲーション バー navbar-text
3) ナビゲーション バーの通常のリンク navbar-link
。 navbar-brand と組み合わせる必要があり、navbar-nav も併用する必要があります。通常は、

の数に制限があります。

7. ブートストラップの固定ナビゲーション バー

Bootstrap
Navbar TextNavbar TextNavbar Text　　 Bootstrap
Navbar Text
Navbar Text
Navbar Text

多くの場合、デザイナーはナビゲーション バーを上部または下部に固定したいと考えます。この固定ナビゲーション バーは、モバイル開発でよく使用されます。Bootstrap フレームワークでは、ナビゲーション バーを修正する 2 つの方法が提供されます。

.navbar-fixed-top: ナビゲーション バーはブラウザーの上部に固定されます。ブラウザ ウィンドウ

.navbar-fixed-bottom: ブラウザ ウィンドウの下部に固定されたナビゲーション バー

8. ブートストラップ ページング ナビゲーション

…我是内容　…

ページ番号付きのページ ナビゲーション。おそらく最も一般的なタイプのページング ナビゲーションです。特にリスト ページに多くのコンテンツがある場合、通常、多くの学生が好むページング ナビゲーションがユーザーに提供されます。ただし、Bootstrap フレームワークでは、ul>li>a のような構造が使用され、ページネーション メソッドが >In に追加されます。 Bootstrap フレームワークでは、いくつかの異なる状況でページング ボタンのサイズを設定することもできます。

1) 「pagination-lg」を通じてページング ナビゲーションを大きくします。

2) 「ページング ナビゲーションを作成します。」小さい

«12345»

ページ番号を使用したページング ナビゲーションに加えて、Bootstrap フレームワークは、よく見られるこの種のページング ナビゲーションも提供します。個人のブログ、雑誌のウェブサイトなどのいくつかの単純なウェブサイト。この種のページング ナビゲーションでは、特定のページ番号は表示されず、「前のページ」と「次のページ」ボタンが提供されるだけです。

実際の使用では、ページ送りのページング ナビゲーションはページ番号付きのページング ナビゲーションと同様に、pager クラスが ul タグに追加されます。

デフォルトでは、ページめくりナビゲーションは中央に表示されますが、場合によっては、左側に 1 つと左側に 1 つ必要になることがあります。右側に。 Bootstrap フレームワークには 2 つのスタイルが用意されています。

………

previous: [前へ] ボタンを左側にします

next: [次へ] ボタンを右側にします

«上一页下一页»

上記は、Bootstrap ナビゲーション bar_javascript スキルの使用方法を共有するシリーズです。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。