网站中常常用到分页功能用Bootstrap实现很便捷

在各种系统中分页是必不可少的，当系统要展示的数据较多时，一个页面不可能将所有的数据全部展示出来，这个时候就需要使用分页。Bootstrap提供了两种不同方式的分页：

带页码的分页导航条。

带翻页的分页导航条。

其实以上两种分页大同小异，在Bootstrap中制作分页导航条是一件非常简单的事情，下面我们将一一讲解其用法。

下面的代码实际就是一个分页导航条，其使用的是ul>li标签，在

中使用了class='pagination'，这样就可以快速制作一个分页导航条，代码运行效果如图所示。



上述代码运行效果图如下：



Bootstrap中的分页导航也分为三种状态：活动状态、鼠标悬停状态和禁用状态，Bootstrap为分页导航条提供了三种不同的大小，上面的代码为默认大小。class='pagination-lg'和class='pagination-sm'类提供了额外可供选择的尺寸。不同大小的分页导航条对比代码如下：



代码中第5页为活动状态，也是“最后一页”，一般页面处于“最后一页”时，“下一页”和尾页按钮是禁用状态，页面运行效果如图所示。



在某些新闻类网站或者博客中我们还经常看到另外一种分页：没有具体的页面，只有上一页、下一页按钮。这种分页方式在Bootstrap中也能够非常方便地实现，具体代码如下：



上面的代码定义了两个翻页导航条，这两个有一定区别：第一个导航条两个按钮是挨着的，第二个导航条中的按钮一个居左一个居右。其中，居左和居右使用了样式class='provious'和class='next'，页面运行效果如图所示



需要注意的是，翻页导航条只能使用鼠标悬停以及禁用状态，没有提供活动状态效果。