`
郑云飞
  • 浏览: 813900 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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分页插件.zip

    Bootstrap分页插件是前端开发中常用的一种工具,它基于Twitter Bootstrap框架,为网页提供美观且功能丰富的分页导航。这个压缩包文件“bootstrap分页插件.zip”包含了一个名为“317482454-tm.pagination-195db9b”的...

    两款漂亮的bootstrap分页样式

    在本主题中,我们聚焦于"两款漂亮的bootstrap分页样式",这涉及到CSS3技术在Bootstrap分页组件上的应用。 Bootstrap的分页组件(Pagination)是一个基本的导航元素,用于分隔大量的内容或结果,让用户能够分步骤...

    bootstrap分页插件

    Bootstrap分页插件是一种基于流行的前端框架Bootstrap设计的页面导航工具,主要用于在大量数据或内容中实现分块显示,提供用户友好的翻页体验。在Web应用中,当需要展示的数据超过一个页面所能容纳的范围时,分页就...

    jQuery基于Bootstrap分页插件.zip

    jQuery基于Bootstrap分页插件是一款分页插件设置固定列表分页显示,支持动态分页数据代码。  jQuery(document).ready(function($){ for (var i = 1; i ; i ) {  $('.list-group').append('...

    两款bootstrap分页样式美化特效

    在这个主题中,我们将深入探讨两款Bootstrap分页样式的美化特效。 首先,我们来理解Bootstrap分页的基本概念。Bootstrap的分页组件是一种用于导航长内容的方式,用户可以通过点击页码来浏览页面。默认的Bootstrap...

    Bootstrap分页条页码过多隐藏部分页码

    当从数据库查出数据过多时,分页条页码太多,将多余部分进行隐藏,永远只显示固定数量的页码

    Bootstrap分页类

    Bootstrap分页类是基于流行的前端开发框架Bootstrap设计的一种页面导航组件,主要用于在大量数据或内容分页展示时提供用户友好的交互体验。Bootstrap框架以其简洁、直观和响应式的设计理念,使得Bootstrap分页类成为...

    四种jQuery+bootstrap分页效果插件.rar

    这个"四种jQuery+bootstrap分页效果插件.rar"压缩包文件包含了四个不同的jQuery和Bootstrap分页插件,每个都有其独特的特性和应用场景。 首先,我们来了解一下jQuery。jQuery是一个轻量级、高性能的JavaScript库,...

    Bootstrap分页插件和seajs分页插件 分页器

    Bootstrap分页插件和SeaJS分页插件是两种用于前端网页实现动态分页效果的工具,它们在网页开发中有着广泛的应用。分页是网页数据量过大时,为了提高用户体验,将大量信息分段展示的重要手段。接下来,我们将详细讨论...

    jQuery Bootstrap分页插件.zip

    《jQuery Bootstrap分页插件深度解析》 在Web开发领域,高效、美观的分页功能是必不可少的,尤其是在处理大量数据时。jQuery Bootstrap分页插件便是为了解决这一问题而生,它结合了jQuery的强大功能和Bootstrap的...

    Bootstrap分页组件的设计

    Bootstrap 分页组件的设计 Bootstrap 分页组件的设计是基于 Bootstrap 前端开发框架,简单设计了前端分页控件。该组件提供了一个基本的分页控件,能够满足大多数情况下的分页需求。 分页组件的结构 分页组件的...

    Spring Boot+Mybatis-Plus+Thymeleaf+Bootstrap分页页查询(前后端都有).zip

    在本项目中,我们结合了Spring Boot、Mybatis-Plus、Thymeleaf以及Bootstrap来实现一个具有分页查询功能的Web应用。首先,让我们详细探讨每个技术在项目中的作用和实现方式。 **Spring Boot** Spring Boot是Spring...

    【ASP.NET编程知识】ASP.NET GridView的Bootstrap分页样式.docx

    ASP.NET GridView 的 Bootstrap 分页样式 本文将详细介绍 ASP.NET GridView 的 Bootstrap 分页样式,包括Revenue.cs 收入类的实现、Default.aspx 内容的设计和GridView 的 Bootstrap 分页样式的实现。 Revenue.cs ...

    bootstrap分页效果实现

    在这个“bootstrap分页效果实现”的主题中,我们将深入探讨如何利用Bootstrap来创建功能强大的分页功能。 首先,Bootstrap的分页组件是通过其内置的CSS类和HTML结构来实现的。分页的主要目的是在大量数据或内容中...

    bootstrap 分页

    Bootstrap 分页是网页设计中常用的一种组件,它用于在大量数据或内容中提供导航,让用户能够轻松地在多个页面间切换。Bootstrap 框架提供了优雅且响应式的分页解决方案,使得网页在不同设备上都能呈现出良好的用户...

    Django结合Bootstrap完美实现分页效果

    **二、Bootstrap分页组件** Bootstrap的分页组件提供了一套美观的UI,用于展示和导航分页。它包括了不同状态的链接(如活动、禁用)和箭头图标,使得用户能够轻松地浏览多页内容。在HTML模板中,我们可以使用...

    Bootstrap分页

    * 自定义标签实现分页 * * @param request * @param response * @param @ResponseBody ajax响应 * @param method={RequestMethod.POST,RequestMethod.GET}表单请求 * @param consumes="application/...

    bootstrap分页组件 bootstrap-paginator-master

    Bootstrap分页组件是Web开发中常见的一种功能,用于在大量数据中进行页面切换,提高用户体验。Bootstrap-Paginator是一个专门针对Bootstrap框架设计的轻量级分页插件,它能够帮助开发者快速、便捷地在网页应用中实现...

Global site tag (gtag.js) - Google Analytics