精选文章 Bootstrap 分页

Bootstrap 分页

作者:weixin_33806509 时间: 2015-05-05 04:54:00
weixin_33806509 2015-05-05 04:54:00
原文: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 实例 - 默认的分页
   
   
   







结果如下所示:

Bootstrap 分页1

分页的状态

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

   Bootstrap 实例 - 分页的状态
   
   
   







结果如下所示:

Bootstrap 分页2

分页的大小

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

   Bootstrap 实例 - 分页的大小
   
   
   





结果如下所示:

Bootstrap 分页3

翻页(Pager)

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

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

默认的翻页

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

   Bootstrap 实例 - 默认的翻页
   
   
   






结果如下所示:

Bootstrap 分页4

对齐的链接

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

   Bootstrap 实例 - 翻页中对齐的链接
   
   
   






结果如下所示:

Bootstrap 分页5

翻页的状态

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

   Bootstrap 实例 - 翻页的状态
   
   
   






结果如下所示:

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

上一篇:DOM操作一

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

您可能感兴趣

  • 学习HTML5大前端可以从事哪些工作?

      近几年,随着互联网技术的日渐成熟,越来越多的年轻人想往互联网行业发展,就单纯的HTML5大前端网页设计师这一岗位就吸引了无数人。虽然HTML5大前端网页设计门槛相对较低,但是薪资却很高。当然,除了HTML5大前端网页设计外,还有其他的岗位可供选择。今天就让千锋为大家分享一下学习HTML5大前端可以从事的工作有哪些?希望对大家选择相应岗位有所帮助。   一、HTML5开发工程师   HTM...

  • MemCache详细解读

    本节内容主要关于mencache的工作原理,memcache的应用场景及其应用实例配置,memcache安装部署。 一、Memcached工作原理 1.服务端缓存实现 (1)memcached特性 分布式: 实例和缓存在逻辑上是分离的 普通缓存 Memcached缓存 特 性 缓存与特定的应用实例绑定,每个应用实例只能访问特定的缓存 实例独立于各个应用服务器实例运行,每应用实例可以访问任意缓...

  • HTML5和WAP的联系与区别!

      随着时代的快速发展,移动互联网加速来临,有越来越多的热门技术被人们提及和应用。虽然人们对于HTML5大前端、大数据、云计算、等热门IT技术热情不减,但对于技术与技术之间的区别以及具体生活的应用了解的还不是十分详细。今天,就让我们以HTML5大前端为例,具体讲解一下移动互联网时代下HTML5大前端和WAP之间的区别与联系。   首先,从定义上区分。HTML5的全称是“超文本标记语言”,它是...

  • 源码包管理 任务计划——at cron

    一、文件管理 1、源码包管理 (1)概述 Source Code 源代码经过GCC、C++编译环境编译才能运行 可以设定个人设置,开关功能 (2)源码包管理 获取源码包——官网下载到真机,然后 rz 命令上传到虚拟机 ——在网上找到软件包的下载链接,直接 “ wget 链接 ” 就可以下载了 (3)示例——部署 Tengine 下载源码包的命令 [root@localhost ~]# wge...

  • 绝了!这款工具让SpringBoot不再需要Controller、Service、DAO、Mapper!

    Dataway介绍 Dataway 是基于 DataQL 服务聚合能力,为应用提供的一个接口配置工具,使得使用者无需开发任何代码就配置一个满足需求的接口。整个接口配置、测试、冒烟、发布,一站式都通过 Dataway 提供的 UI 界面完成。UI 会以 Jar 包方式提供并集成到应用中并和应用共享同一个 http 端口,应用无需单独为 Dataway 开辟新的管理端口。 这种内嵌集成方式模式的...

  • IntellIJ IDEA2020新功能

    一、java 1、Java 14支持:记录和模式匹配 IntelliJ IDEA 2020.1添加了对Java 14及其新功能的支持。IDE不仅添加了对Records的完整代码洞察支持,而且还使您能够快速创建新记录并生成其构造函数和组件,并警告存在的错误。您还将发现对instanceof运算符的模式匹配的支持,包括新的检查和快速修复,该快速修复通过用新的简洁模式变量替换它们来快速简化冗长的i...

  • Puppeteer 应用容器化

    Puppeteer 应用容器化 Intro Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。 更多的介绍,可以参考这里 项目中使用到了 Puppeteer 来做一些爬虫项目,最后需要把应用容器化部署在 ...

  • sql语句-根据不同状态分组查询不同字段总和

    首先展示一下我需要处理的表~ 我首先想到的是根据freeze_status的不同状态分组查询,分别得到两种状态写的冻结积分(integral_frozen)总和,然后再通过union 连接两个不同的查询语句,sql语句如下: select user_id, SUM(integral_frozen),freeze_status from ws_user_account where freeze...

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

免费套餐,马上领取!
CSDN

CSDN

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