精选文章 Bootstrap 分页

Bootstrap 分页

作者:weixin_33806509 时间: 2021-02-07 01:48:50
weixin_33806509 2021-02-07 01:48:50
【摘要】原文:Bootstrap <基础十九>分页
Bootstrap 支持的分页特性。分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。
分页(Pagination)
下表列出了 Bootstrap 提供的处理分页的 class。
Class
描述
示例代码
.pagination
添加该 class 来在页面上显示分页。

 class="pagi...
原文:Bootstrap <基础十九>分页

Bootstrap 支持的分页特性。分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。

分页(Pagination)

下表列出了 Bootstrap 提供的处理分页的 class。

Class 描述 示例代码
.pagination 添加该 class 来在页面上显示分页。
.disabled, .active 您可以自定义链接,通过使用 .disabled 来定义不可点击的链接,通过使用 .active 来指示当前的页面。
.pagination-lg, .pagination-sm 使用这些 class 来获取不同大小的项。
    class="pagination pagination-lg">...
      class="pagination">...
        class="pagination pagination-sm">...

默认的分页

下面的实例演示了上表中所讨论的 class .pagination 的用法:

   Bootstrap 实例 - 默认的分页  <script></script> <script></script>  

结果如下所示:

Bootstrap 分页1

分页的状态

下面的实例演示了上表中所讨论的 class .disabled、.active 的用法:

   Bootstrap 实例 - 分页的状态  <script></script> <script></script>  

结果如下所示:

Bootstrap 分页2

分页的大小

下面的实例演示了上表中所讨论的 class .pagination-* 的用法:

   Bootstrap 实例 - 分页的大小  <script></script> <script></script> 

结果如下所示:

Bootstrap 分页3

翻页(Pager)

如果您想要创建一个简单的分页链接为用户提供导航,可通过翻页来实现。与分页链接一样,翻页也是无序列表。默认情况下,链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。

Class 描述 示例代码
.pager 添加该 class 来获得翻页链接。
.previous, .next 使用 class .previous 把链接向左对齐,使用 .next把链接向右对齐。
.disabled 添加该 class 来获得一个颜色变淡的外观。

默认的翻页

下面的实例演示了上表中所讨论的 class .pager 的用法:

   Bootstrap 实例 - 默认的翻页  <script></script> <script></script> 


结果如下所示:

Bootstrap 分页4

对齐的链接

下面的实例演示了上表中所讨论的 class .previous、.next 的用法:

   Bootstrap 实例 - 翻页中对齐的链接  <script></script> <script></script> 


结果如下所示:

Bootstrap 分页5

翻页的状态

下面的实例演示了上表中所讨论的 class .disabled 的用法:

   Bootstrap 实例 - 翻页的状态  <script></script> <script></script> 


结果如下所示:

Bootstrap 分页6
 
勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:Bootstrap 面包屑导航(Breadcrumbs)

下一篇:DOM操作一

您可能感兴趣

  • 大数据量下的分页

    大数据量下的分页     对于非常大的数据模型而言,分页检索时,每次都加载整个数据源非常浪费。通常的选择是检索页面大小的块区的数据,而非检索所有的数据,然后单步执行当前行。     本文演示ASP.net的DataGrid和Sql Server 实现大数据量下的分页,为了便于实现演示,数据表采用了Northwind数据库的Orders表(830条记录)。     如果数据表中有唯一的自增索引...

  • Jive笔记4--结果集分页处理

    Jive中的分页处理by Shyguy2002/09/18转载请标明作者和出处在Web应用中,难免和数据库打交道,对于返回的结果集,究竟该如何处理?尤其是,当你的一个查询可能会返回数万条纪录的时候,你还能像某些骗钱骗精力的jsp垃圾书本上介绍的用rs.next()来处理么?呵呵,我以前就是这么干的,直接传回resultset,在jsp中while(rs.next())循环中一个一个的处理。还...

  • Henry手记—Web Form中的Datagrid的自定义分页

    Henry手记—Web Form中的Datagrid的自定义分页                                   韩睿  ( 05/31/2003)   ASP.NET带给我们很多惊喜,强大的Web Form控件自然是其中的重要部分。这其中,最受关注的当然是Datagrid。在ASP中用HTML标记语法来输出数据的方法在Datagrid数据绑定面前显得如此繁杂。但是只使用...

  • JIURL玩玩Win2k内存篇 分页机制 (三)

    JIURL玩玩Win2k内存篇 分页机制 (三) 作者: JIURL                 主页: http://jiurl.yeah.net     日期: 2003-7-30 8种转换由于页表被映射到了0xc0000000 开始的4MB地址空间。所以我们也可以象CPU那样完成虚拟地址到物理地址的转换。系统按照对应虚拟空间的先后顺序,把一个进程的页表映射在0xc00...

  • JIURL玩玩Win2k内存篇 分页机制 (二)

    JIURL玩玩Win2k内存篇 分页机制 (二) 作者: JIURL                 主页: http://jiurl.yeah.net     日期: 2003-7-30 进程的页目录和页表在虚拟地址空间中的位置     当执行一条访问内存的指令时,如果寄存器中的分页标志位已经被设置,CPU就自动完成虚拟地址到物理地址的转换,来完成该指令。CPU在转换地址...

  • 面向对象的asp编程之二--分页对象(javascript版)

    基于组件的asp编程之二--分页对象     在asp中,分页使用的最多的程序段了,把分页写成函数,调用起来,要传很多参数,写成对象,可以使分页 对象调用简单,本文在参考众多网友的分页函数基础上,用javascript把它写成了一个对像放于文件 夹"_ScriptCom"下,文件名为"JPageNavbar.asp",先看一下分页对象的调用方式(由于大多数的asp开发人员使 用vbscrip...

  • XML卷之实战锦囊(3):动态分页

    XML卷之实战锦囊(3):动态分页--  Sailflying Sailflying(车仔)原创,版权所有,如需使用,请与我联系( sailflying@163.net ) 动机: 为了方便用户查看大批量数据,我们会用到动态分页,因此分页功能是我们在网站上见过的最普遍也是最常用的一个功能模块了。而以往的信息分页都是连接到数据库的,每一次点击都必须要后台数据库的支持。这样不但服务器的负担...

  • 数据分页方法新思路,速度非常快!

    这篇文章要达到的目的就是,实现大数据分页浏览并最优化速度。 建立一个web 应用,分页浏览功能必不可少;这个问题也是长久以来最普遍的问题,目前也得到了较好的解决,其中象ASP 程序的分页算法有很多,比如使用ado 对象的PageSize 这些属性,按记录总数计算页,然后跳转记录集再输出;也有编写存储过程实现分页数据,这些方面各有优缺点,以下本人介绍一种应用实际项目中速度非常快的分页算法; 关...

CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
Bootstrap 分页介绍:华为云为您免费提供Bootstrap 分页在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多Bootstrap 分页的相关内容。| 移动地址: Bootstrap 分页 | 写博客