Bootstrap ナビゲーション bar_javascript スキルを使用するための一連の共有方法-jsチュートリアル-php.cn

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

PHP中文网

リリース： 2016-05-16 15:03:05

オリジナル

1478 人が閲覧しました

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

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

HomeCSS3SassjQueryResponsive

ログイン後にコピー

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

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

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

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

".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) 「ページングナビゲーションを作成します。」小さい

&laquo;12345&raquo;

ログイン後にコピー

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

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

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