bootstrap分页

关于作者:

  • 郑云飞, 程序员Java(web前端,web后端,oracle数据库or mysql数据库)
  • 艺名:天放
  • weibo:@tianFang
  • blog: zhengyunfei.iteye.com
  • email: zhengyunfei8@gmail.com

本文主要来讲解以下内容:1.分页;2.徽章;3.总结。

分页

为您的网站或应用提供多页的分页组件,或是用更简单的翻页替换。

默认分页

发出了这个简单的分页,用在应用或搜索结果中超级棒。这个大块容易看见,容易缩放并有大块的点击区域。

1

激活和禁用状态

链接在不同情况下可以定制。给不能点击的链接用.disabled 并且用.active显示是当前页。

2

你还可以将active或disabled应用于标签,这样就可以让其保持需要的样式并移除点击功能。

3

你可以通过点击测试,看是否移除了点击功能。

尺寸

想要更小或更大的分页?要得到更多尺寸,加上.pagination-lg或.pagination-sm吧。

4

翻页

用轻便的标记和样式,就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。

默认案例

在默认的翻页中,链接居中。

5

对齐链接

您可以把链接向两端对齐作为替代。

6

可选的禁用状态

翻页链接也用分页中的.disabled工具类。

7

徽章

给链接,Bootstrap导航等等加入,可以容易地高亮新的或未读的条目。

8

自动消失(self colapsing)

当没有新的或未读的条目时,里面没有内容的徽章会消失(通过CSS的:empty选择器实现)

9

跨浏览器兼容性

徽章在Internet Explorer 8中不会自动消失,因为它需要对:empty选择器的支持。

适应导航的激活状态

在胶囊式导航和列表式导航中的徽章有内置的样式。

10

总结

分页在数据列表当中必然会用到的,恰到好处的使用徽章同样会给页面布局带来不少的新意。

Bootstrap分页是一种用于网页内容分页显示的前端框架。它可以帮助开发者快速创建并美化分页组件,提供了丰富的样式和交互效果。 在Bootstrap中,分页组件通常由以下几个部分组成: 1. 分页容器(pagination):用于包裹分页按钮的容器。 2. 分页按钮(page-item):用于切换不同页码的按钮。 3. 上一页按钮(previous):用于切换到上一页的按钮。 4. 下一页按钮(next):用于切换到下一页的按钮。 5. 省略号(ellipsis):用于表示省略的页码。 6. 激活状态(active):用于标识当前所在的页码。 使用Bootstrap分页的步骤如下: 1. 引入Bootstrap的CSS和JS文件。 2. 创建一个分页容器,并添加相应的类名。 3. 在分页容器中添加分页按钮和其他相关元素,可以使用循环生成多个按钮。 4. 根据需要设置当前页码的激活状态。 5. 添加上一页和下一页按钮,并设置其功能。 6. 根据需要添加省略号。 以下是一个示例代码: ```html <nav aria-label="Page navigation"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">上一页</a></li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">下一页</a></li> </ul> </nav> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值