Bootstrap 入門メモ (5) ナビゲーション バー、ページネーション Navigation_html/css_WEB-ITnose

ナビゲーションバー

前回のnoteで紹介したナビゲーション（nav）と比べると、ナビゲーションバー（navbar）には「バー」という単語が一つ増えています。実際、Bootstrap フレームワークには特定の違いがあります。

ナビゲーション バー (navbar) には背景色があり、ナビゲーション バーは純粋なリンク (ナビゲーションに類似)、フォーム、またはフォームとナビゲーションの組み合わせにすることができます。モバイル デバイスでは折りたたまれ (開閉可能)、ビューポートの幅が増加するにつれて徐々に水平方向に拡張されます。

基本的なナビゲーション バー

実際、ナビゲーション バーとナビゲーションの外観上の違いはそれほど大きくありませんが、実際に使用すると、ナビゲーション バーはナビゲーションよりもはるかに複雑です。基本的なナビゲーション バーを実装してみましょう。

<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容-->    <ul class="nav navbar-nav">        <li class="active"><a href="#">HTML</a></li>        <li><a href="#">CSS</a></li>        <li><a href="#">JavaScript</a></li>        <li><a href="#">PHP</a></li>     </ul></div>

達成できる効果は次のとおりです:

ワイドスクリーン:

ナロースクリーン:

基本的なナビゲーション バーを作成するときは、次の点に注意してください:

1. 初めて作るナビゲーション リスト ( 73a72cdc17fc2b29bb35d64b4687fa7c ) に基づいてクラス名 .navbar-nav を追加します
2. ここで許可されている場合はリストの外にコンテナ (div) を追加します c787b9a589a3ece771e842a6176cf8e9 を使用することをお勧めします c787b9a589a3ece771e842a6176cf8e9クラス名 .navbar と .navbar-default を使用します
3. .navbar クラスの主な機能は、左右のパディングや角丸などの効果を設定することです。 .navbar-default を使用して、ナビゲーション バーの色を制御します。 .navbar-inverse として。 (興味のある方は、ソースコードをチェックしてみてください)

タイトル付き、サブメニュー

Webページ制作では、通常、メニューの前にタイトルが表示されます(テキストサイズは他のテキストよりわずかに大きくなります) ) 実際、Bootstrap フレームワークもすべての人に対してこの考慮を行っており、次のような .navbar-header および .navbar-brand を通じて実装されています。中国の公式ウェブサイトに詳しく説明されています。

セカンダリ メニューについては、前回のブログで詳しく説明していますので、まだ理解できない場合は、次のコードをもう一度見てください。達成できる効果: (ここでは navbar-inverse ナビゲーション バーが使用されていることに注意してください)

<div class="navbar-header">    <a href="##" class="navbar-brand">WEB开发</a></div>

その効果は次のとおりです:

フォームを使用すると

ナビゲーション バーでの検索がよく見られます フォーム、Zhihu、Sina Weiboなどはすべてそれらを備えています もちろん、Bootstrapフレームワークにそのようなものが欠けているはずはありません。使用方法も非常に簡単です。

.navbar-form は Bootstrap フレームワークで提供されており、.navbar コンテナーに .navbar-form クラス名を持つフォームを配置し、.navbar-left を追加してフォームを作成します。左にフロートすると整列が向上します。

Bootstrap では、要素をナビゲーション バーの右側に配置するための .navbar-right スタイルも提供されています。

このコードをコードにコピーして、効果を確認してください:

<div class="navbar navbar-inverse" role="navigation">    <div class="navbar-header">        <a href="##" class="navbar-brand">WEB开发</a>     </div>    <ul class="nav navbar-nav">        <li class="active"><a href="#">HTML</a></li>        <li><a href="#">CSS</a></li>        <li class="dropdown" >            <a href="#" class="dropdown-toggle" data-toggle="dropdown">JavaScript            <span class="caret"></span></a>            <ul class="dropdown-menu">                <li><a href="#">jQuery</a></li>                <li><a href="#">Vue</a></li>                <li><a href="#">NodeJS</a></li>            </ul>        </li>        <li ><a href="#">PHP</a></li>    </ul></div>

ボタン、テキスト、リンク

上記のスタイルの一部に加えて、ブートストラップ フレームワークは他の 3 つのスタイルを提供します:

ボタンナビゲーション バーの navbar-btn は、ボタンを ff9c23ada1bcecdd1a0fb5d5a0f18437 内に配置せず、ナビゲーション バーの垂直方向の中央に配置します

ナビゲーション バーのテキスト navbar-text は、通常、最適な行間隔を実現するために 23112e83153c545bef68f9c15f8b7801 要素の下部にパディングを設定しない限り、この固定ナビゲーション バーは

ページ上の他のコンテンツを覆います

。ヒント: ナビゲーション バーの

デフォルトの高さ

は 50 ピクセルです。例: body {padding-bottom: 70px; } もちろん、独自の値を使用することもできます。

响应式导航条

在上面的例子中，导航条就仅仅能大屏幕下有一个不错的效果，在屏幕变小的情况下，还 直接把所有的导航项直接展现出来就不适合了 。为了有一个更好的显示效果，响应式的导航条设计也就随之而来。我们先来看看效果，再一步一步分析它！

窄屏时，点击右边的按钮图标可展开，效果与上面的展开效果除了 active 状态不再溢出容器外，其他基本相同。实现代码如下：

<div class="navbar navbar-default" role="navigation">    <div class="navbar-header">        <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">            <span class="sr-only">Toggle Navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>        </button>        <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->        <a href="#" class="navbar-brand">WEB开发</a>    </div>    <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->    <div class="collapse navbar-collapse navbar-responsive-collapse">        <ul class="nav navbar-nav">            <li class="active"><a href="#">HTML</a></li>            <li><a href="#">CSS</a></li>            <li><a href="#">JavaScript</a></li>            <li><a href="#">PHP</a></li>        </ul>    </div></div>

分析：

1. 和普通导航条一样，最外层使用 bfb24431c22f723e39ac0ddf14fd9a3d 容器包裹，主要是 .navbar 和 .navbar-default 类。
2. 保证在窄屏时 需要折叠的内容必须 包裹在带一个div内，并且为这个div加入 .collapse 、 .navbar-collapse 两个类名。最后为这个div 添加一个class类名或者id名 。

3. 保证在窄屏时要显示的图标样式（固定写法）：

   <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>

4. 并为button添加 data-target=”.类名/#id名” ，究竞是类名还是id名呢？由 需要折叠的div 来决定。（这里很关键，你可以把上面的代码在这里进行修改，会发现无法展开）

分页导航

分页导航几乎在所有的网站都可以看到，好的分页导航可以给用户带来更好额用户体验，还可以方便爬虫在网页中进行搜索。

带页码的分页导航

带页码的分页导航，应该是最常见的一种分页导航，特别是在列表页内容很多的时候，会给用户提供带页码的分页导航方式，在Bootstrap中使用的是 ul>li>a 这样的结构，在ul标签上加入 pagination 类：

<ul class="pagination ">    <li><a href="#">&laquo;第一页</a></li>    <li><a href="#">6</a></li>    <li class="active"><a href="#">7</a></li>    <li><a href="#">8</a></li>    <li><a href="#">9</a></li>    <li><a href="#">10</a></li>    <li class="disabled"><a href="#">最后一页&raquo;</a></li></ul>

实现效果如下：

可以看到同样会有 hover 、 active 、 disabled 等等状态，当然它也可以调整大小：在外层容器中的 .pagination 类后，添加 .pagination-lg 让分页导航变大； .pagination-sm 让分页导航变小：

翻页分页导航

其实这种方式，就是看不到具体的页码，只会提供一个 上一页 和 下一页 的按钮。

使用方式很简单，也就是在ul标签上添加 pager 类：

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

它默认是居中显示的，如果我们需要一个居左一个居右显示的话，添加两个样式： previous 让“上一步”按钮居左； next 让“下一步”按钮居右。（同样可以使用 disabled 表示禁用状态）

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

其他

标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。

在Bootstrap专门将这样的效果提取成为了单独的标签组件。可以使用 45a2772a6b6107b401db3c9b82c049c2 这样的行内标签添加 .label 类来控制大小，再使用情景类来控制高亮显示的颜色如： label-default 、 label-danger 等等（在原来笔记中说到过这样的情景类，只不过这里需要加上不同的前缀）

徽章（角标）

其实和上面的标签效果很大一部分是类似的，一般用作信息提示，例如剩余多少未读信息等等，也就是我们常常能在右上角看到的未读信息提示。在Bootstrap中，把这种效果称作为徽章效果，使用 badge 类来实现。

给链接、导航等元素嵌套 bdba726d1fe413e2aadb0deeccaf8298 元素，可以很醒目的展示新的或未读的信息条目。

<a href="#">Inbox <span class="badge">42</span></a><button class="btn btn-primary" type="button">  Messages <span class="badge">4</span></button>

通过查看源码，我们可以发现Bootstrap同样使用 :empty 伪元素，来设置当没有内容的时候隐藏：

.badge:empty { display: none;}

需要注意的是IE8 不支持 :empty 选择符，所以不会默认隐藏；

Bootstrap 中的徽章会适配导航元素的激活状态。

<ul class="nav nav-pills" role="tablist">    <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>    <li role="presentation"><a href="#">Profile</a></li>    <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li></ul>

好了《导航条、分页导航》的学习到此就结束了，下面需要学习Bootstrap中其他的一些比较零散的 内置组件 。

继续坚持，加油！