在各种系统中分页是必不可少的,当系统要展示的数据较多时,一个页面不可能将所有的数据全部展示出来,这个时候就需要使用分页。Bootstrap提供了两种不同方式的分页:
带页码的分页导航条。
带翻页的分页导航条。
其实以上两种分页大同小异,在Bootstrap中制作分页导航条是一件非常简单的事情,下面我们将一一讲解其用法。
下面的代码实际就是一个分页导航条,其使用的是ul>li标签,在
上述代码运行效果图如下:
Bootstrap中的分页导航也分为三种状态:活动状态、鼠标悬停状态和禁用状态,Bootstrap为分页导航条提供了三种不同的大小,上面的代码为默认大小。class='pagination-lg'和class='pagination-sm'类提供了额外可供选择的尺寸。不同大小的分页导航条对比代码如下:
代码中第5页为活动状态,也是“最后一页”,一般页面处于“最后一页”时,“下一页”和尾页按钮是禁用状态,页面运行效果如图所示。
在某些新闻类网站或者博客中我们还经常看到另外一种分页:没有具体的页面,只有上一页、下一页按钮。这种分页方式在Bootstrap中也能够非常方便地实现,具体代码如下:
上面的代码定义了两个翻页导航条,这两个有一定区别:第一个导航条两个按钮是挨着的,第二个导航条中的按钮一个居左一个居右。其中,居左和居右使用了样式class='provious'和class='next',页面运行效果如图所示
需要注意的是,翻页导航条只能使用鼠标悬停以及禁用状态,没有提供活动状态效果。
联系客服