关于作者:
- 郑云飞, 程序员Java(web前端,web后端,oracle数据库or mysql数据库)
- 艺名:天放
- weibo:@tianFang
- blog: zhengyunfei.iteye.com
- email: zhengyunfei8@gmail.com
本文主要来讲解以下内容:1.分页;2.徽章;3.总结。
分页
为您的网站或应用提供多页的分页组件,或是用更简单的翻页替换。
默认分页
发出了这个简单的分页,用在应用或搜索结果中超级棒。这个大块容易看见,容易缩放并有大块的点击区域。
激活和禁用状态
链接在不同情况下可以定制。给不能点击的链接用.disabled 并且用.active显示是当前页。
你还可以将active或disabled应用于标签,这样就可以让其保持需要的样式并移除点击功能。
你可以通过点击测试,看是否移除了点击功能。
尺寸
想要更小或更大的分页?要得到更多尺寸,加上.pagination-lg或.pagination-sm吧。
翻页
用轻便的标记和样式,就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。
默认案例
在默认的翻页中,链接居中。
对齐链接
您可以把链接向两端对齐作为替代。
可选的禁用状态
翻页链接也用分页中的.disabled工具类。
徽章
给链接,Bootstrap导航等等加入,可以容易地高亮新的或未读的条目。
自动消失(self colapsing)
当没有新的或未读的条目时,里面没有内容的徽章会消失(通过CSS的:empty选择器实现)
跨浏览器兼容性
徽章在Internet Explorer 8中不会自动消失,因为它需要对:empty选择器的支持。
适应导航的激活状态
在胶囊式导航和列表式导航中的徽章有内置的样式。
总结
分页在数据列表当中必然会用到的,恰到好处的使用徽章同样会给页面布局带来不少的新意。