この記事は、Bootstrap のナビゲーション バーとページング ナビゲーションについて学習するのに役立ちます。

この記事では、Bootstrap のナビゲーション バーとページング ナビゲーションについて説明し、ラベルとバッジについても紹介します。

1. ナビゲーション バーの基本

ナビゲーション バー (navbar) は、で紹介したナビゲーション (nav) とは異なります。前のセクション. もう一言、もう一言「ティアオ」。実際、Bootstrap フレームワークでは依然として明らかに異なります。ナビゲーション バー (navbar) には背景色があり、ナビゲーション バーは純粋なリンク (ナビゲーションと同様)、フォーム、またはフォームとナビゲーションの組み合わせにすることができます。 [関連する推奨事項: "ブートストラップ チュートリアル"]

2. 基本ナビゲーション バー

[ブートストラップ] ボックスでは、ナビゲーション バーとナビゲーションが視覚的に表示されます。違いはそれほど大きくありませんが、実際に使用する場合、ナビゲーション バーはナビゲーションよりもはるかに複雑です。

使い方:

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

ステップ 1: まず、ナビゲーションを作成します。 bar リストに基づいてクラス名「navbar-nav」を追加します (<ul class="nav">) ステップ 2: リストの外にコンテナー (div) を追加し、クラス名「navbar」と「navbar-default」を使用します。

原理分析:

And Navigationバーの色は「.navbar-default」によって制御されます。

3. タイトル、二次メニュー、ステータスをナビゲーション バーに追加する

Web ページ制作では、メニュー (テキスト) の前にタイトルが配置されることがよくあります。フォント サイズが他のものより大きい (テキストがわずかに大きい)。実際、Bootstrap フレームワークは、すべての人のためにこの側面も考慮しています。「navbar-header」および「navbar-brand」を通じて実装されています。この機能は主にリマインダーとして機能します。もちろん、改善に次ぐ改善と考えることもできます (ここではあまり詳しく説明しません)。メインのスタイルは、フォント設定を増やして最大幅を設定することです。また、デフォルトのナビゲーション バー (navbar-default) の下に、navbar-ブランドも色処理されます。同様に、基本的なナビゲーション バーにメニューが提供されます。現在の状態、無効状態、一時停止状態、その他の効果があり、セカンダリ メニューを備えたナビゲーション バーを持つこともできます。

4. フォーム付きナビゲーション バー

は、Bootstrap フレームワークで「navbar-form」を提供します。使用方法は非常に簡単です。 navbar コンテナー内のフォーム navbar-form クラス名を持つフォームの場合、ブートストラップ フレームワークは、要素をナビゲーション バーの右側に揃えるための「navbar-right」スタイルも提供します。ここには、ブラウザ ウィンドウの幅が 768 ピクセルより大きい場合にのみ有効となる条件があります。

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

navbar-brand の a 要素と navbar-nav の ul をナビゲーションで使用することに加えて、 Bootstrap フレームワークの bar navbar-form に加えて、他の要素も使用できます。フレームワークは 3 つの追加スタイルを提供します。

1) ナビゲーション バーのボタン navbar-btn

2) ナビゲーション バーのテキスト navbar-text

3) ナビゲーション バー navbar- の通常のリンクlink

ただし、これら 3 つのスタイルは、フレームワークで使用する場合に特定の制限を受けるため、navbar-brand および navbar-nav と組み合わせて使用​​する必要があります。数量にも一定の制限があり、通常1～2個であれば問題ありませんが、2個以上になると問題が発生します。

6. 固定ナビゲーション バー

多くの状況のうちの 1 つとして、デザイナーはナビゲーション バーをブラウザーの上部または下部に固定したいと考えています。ナビゲーション バーは、モバイル開発ではより一般的です。 Bootstrap フレームワークでは、ナビゲーション バーを修正する 2 つの方法が提供されています。

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

☑ .navbar-fixed-下: ナビゲーション バー ブラウザ ウィンドウの下部に固定されています

使用方法は非常に簡単で、ナビゲーション バーの一番外側のコンテナである navbar に対応するクラス名を追加するだけです。

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

7. 応答性の高いナビゲーション バー

現在、Web ページを閲覧するための端末はもはや同じではありません。前の例で実装されたナビゲーション バーは適応することしかできません。 to 画面が大きいブラウザですが、ブラウザ画面が小さくなってしまうと不向きです。したがって、レスポンシブデザインが続きます。したがって、応答性の高い Web ページでは、応答性の高いナビゲーション バーが非常に重要です。

使用法:

1) 狭い画面で折りたたむ必要があるコンテンツは div でラップする必要があることを確認し、collapse と navbar-collapse を追加します。この div. 2 つのクラス名。最後に、この div にクラス名または ID 名を追加します。

2) 狭い画面でもアイコンのスタイルが表示されるようにします(書き込み方法を修正):

<button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

3) そして、data-target=".class name/#id name" をボタン、それはクラス名ですか、それともID名ですか?折りたたむ必要がある div によって決定されます。

折りたたむ必要がある div コード セグメント:

<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时显示的图标代码段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>也可以这么写，需要折叠的div代码段：<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时要显示的图标：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>

8、反色导航条

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。

9、分页导航（带页码的分页导航）

分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：

☑ 带页码的分页导航

☑ 带翻页的分页导航

带页码的分页导航

带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。

使用方法：

平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>

10、分页导航（翻页分页导航）

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。

使用方法：

在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

11、标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类。只要在span标签上添加vertical-align: super; 就可以实现标签定位在右上角了。

使用原理：

使用方法很简单，你可以在使用span这样的行内标签：

<h3>Example heading <span class="label label-default">New</span></h3>

12、徽章

从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。

使用方法：

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

<a href="#">Inbox <span class="badge">42</span></a>

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

以上がこの記事は、Bootstrap のナビゲーション バーとページング ナビゲーションについて学習するのに役立ちます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。