Bootstrap源码解读导航条（7）(2)

要将导航条固定在浏览器顶部或底部，只需要在制作导航条最外部容器navbar上追加对应的类名即可：
.navbar-fixed-top：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom：导航条固定在浏览器窗口底部
例如：<div role="navigation">...</div>
实现原理就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed属性，并且设置navbar-fixed-top的top值为0,而navbar-fixed-bottom的bottom值为0。实现源码如下：

.navbar-fixed-top, .navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; } @media (min-width: 768px) { .navbar-fixed-top, .navbar-fixed-bottom { border-radius: 0; } } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-fixed-bottom { bottom: 0; margin-bottom: 0; border-width: 1px 0 0; }

不过我们可以发现，页面主内容顶部和底部都被固定导航条给遮住了。我们可以在body上加上样式：padding-top: 70px;或padding-bottom: 70px;来避免这种情况。

响应式导航条

响应式导航条比较复杂，宽屏是水平平铺显示，窄屏时收缩垂直显示，使用方法如下：
1. 把在窄屏时需要折叠的内容包裹在带一个div内，并且为这个div追加“collapse”、“navbar-collapse”两个类名。最后为这个div添加一个class类名或者id名。
2. 定制在窄屏时要显示的图标样式。
3. 为button添加data-target=”.类名”或data-target=”#id名”，是类名还是id名由需要折叠的div来决定。
完整示例如下：

<div role="navigation"> <div> <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 --> <button type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span>Toggle Navigation</span> <span></span> <span></span> <span></span> </button> <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 --> <a href="##">Bootstrap中文网</a> </div> <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 --> <div> <ul> <li><a href="##">Bootstrap2</a></li> <li><a href="##">Bootstrap3</a></li> <li><a href="##">Bootstrap4</a></li> <li><a href="##">网站实例</a></li> </ul> </div> </div>

反色导航条

将navbar-deafult类名换成navbar-inverse即可。只是导航条的背景色和文本做了修改。

带页码的分页导航

在ul标签上加入pagination方法即可。例如：

<ul> <li><a href="#">&laquo;第一页</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>

实现源码如下：

.pagination> .active > a, .pagination> .active > span, .pagination> .active >a:hover, .pagination> .active >span:hover, .pagination> .active >a:focus, .pagination> .active >span:focus { z-index: 2; color: #fff; cursor: default; background-color: #428bca; border-color: #428bca; } .pagination> .disabled > span, .pagination> .disabled >span:hover, .pagination> .disabled >span:focus, .pagination> .disabled > a, .pagination> .disabled >a:hover, .pagination> .disabled >a:focus { color: #999; cursor: not-allowed; background-color: #fff; border-color: #ddd; }

在ul上追加“pagination-lg”可以让分页导航变大，“pagination-sm”可以让分页导航变小。实现源码如下：

.pagination-lg> li > a, .pagination-lg> li > span { padding: 10px 16px; font-size: 18px; } .pagination-lg>li:first-child> a, .pagination-lg>li:first-child> span { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .pagination-lg>li:last-child> a, .pagination-lg>li:last-child> span { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .pagination-sm> li > a, .pagination-sm> li > span { padding: 5px 10px; font-size: 12px; } .pagination-sm>li:first-child> a, .pagination-sm>li:first-child> span { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .pagination-sm>li:last-child> a, .pagination-sm>li:last-child> span { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }

翻页分页导航

为ul标签加入pager类即可。例如：

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

实现源码如下：