<div role="navigation"> <div> <a href="##">Bootstrap</a> </div> <ul> <li><a href="##">Navbar Text</a></li> <li><a href="##">Navbar Text</a></li> <li><a href="##">Navbar Text</a></li> </ul> </div> <div role="navigation"> <div> <a href="##">Bootstrap</a> </div> <div> <a href="##">Navbar Text</a> <a href="##">Navbar Text</a> <a href="##">Navbar Text</a> </div> </div>
7、Bootstrap固定导航条
很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式：
.navbar-fixed-top：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom：导航条固定在浏览器窗口底部
<div role="navigation"> … </div> <div>我是内容</div> <div role="navigation"> … </div>
8、Bootstrap分页导航
带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法。
<ul> <li><a href="#">«</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="#">»</a></li> </ul>
在Bootstrap框架中，也可以通过几个不同的情况来设置分页按钮大小。
1).通过“pagination-lg”让分页导航变大；
2).通过“pagination-sm”让分页导航变小
<ul> … </ul> <ul> … </ul> <ul> … </ul>
Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。
在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类。
<ul> <li><a href="#">«上一页</a></li> <li><a href="#">下一页»</a></li> </ul>
默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式
previous：让“上一步”按钮居左
next：让“下一步”按钮居右
<ul> <li><a href="#">«上一页</a></li> <li><a href="#">下一页»</a></li> </ul>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
以上就是关于Bootstrap 导航条的全部内容，希望对大家的学习有所帮助。
您可能感兴趣的文章: