带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式。平时很多同学喜欢用div>adiv>span结构来制作带页码的分页导航。不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法。

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>

  在Bootstrap框架中,也可以通过几个不同的情况来设置分页按钮大小。

  1、通过“pagination-lg”让分页导航变大;

  2、通过“pagination-sm”让分页导航变小

<ul class="pagination pagination-lg">

</ul>
<ul class="pagination">

</ul>
<ul class="pagination pagination-sm">

</ul>

  Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到,比如说个人博客,杂志网站等。这种分页导航是看不到具体的页码,只会提供一个“上一页”和“下一页”的按钮。

  在实际使用中,翻页分页导航和带页码的分页导航类似,为ul标签加入pager类。

<ul class="pager">
<li><a href="#">&laquo;上一页</a></li>
<li><a href="#">下一页&raquo;</a></li>
</ul>

  默认情况之下,翻页分页导航是居中显示,但有的时候我们需要一个居左,一个居右。Bootstrap框架提供了两个样式

  previous:让“上一步”按钮居左

   next:让“下一步”按钮居右

<ul class="pager">
<li class="previous"><a href="#">&laquo;上一页</a></li>
<li class="next"><a href="#">下一页&raquo;</a></li>
</ul>

作者:情缘

出处:http://www.cnblogs.com/qingyuan/

关于作者:从事仓库,生产软件方面的开发,在项目管理以及企业经营方面寻求发展之路
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。

联系方式: 个人QQ  821865130 ; 仓储技术QQ群 88718955,142050808 ;

吉特仓储管理系统 开源地址: https://github.com/hechenqingyuan/gitwms

Bootstrap系列 -- 44. 分页导航的更多相关文章

  1. Bootstrap系列 -- 37. 基础导航样式

    Bootstrap框架中制作导航条主要通过“.nav”样式.默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”.“nav-pills”之类.比如右侧代码 ...

  2. Bootstrap系列 -- 43. 固定导航条

    很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式:  .navbar-fixed-top:导航条固定 ...

  3. Bootstrap系列 -- 38. 基础导航条

    在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div), ...

  4. bootstrap基础学习【导航条、分页导航】(五)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Bootstrap学习-导航条-分页导航

    1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...

  6. Bootstrap<基础十六> 导航元素

    Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切 ...

  7. ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  8. 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程

    反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑)   背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...

  9. C#泛型专题系列文章目录导航

    [C#泛型系列文章] 目录导航 第一部分:O'Reilly 出版的<C# Cookbook>泛型部分翻译 第一回:理解泛型 第二回:获取泛型类型和使用相应的泛型版本替换ArrayList ...

随机推荐

  1. Tomcat 目录详解

     一.文字版本: bin: 该目录下存放的是二进制可执行文件,如果是安装版,那么这个目录下会有两个exe文件:tomcat6.exe.tomcat6w.exe,前者是在控制台下启动Tomcat,后者是 ...

  2. jenkins邮件通知功能

    第部分:全局设置 第一步:进入jenkins的系统设置 第二步:设置管理员邮件地址: 第三步:下载email-ext插件并填写对应的内容: 第四部:填写邮件通知 第五步:以上就是系统管理里需要填写的全 ...

  3. Swift内存管理、weak和unowned以及两者区别

    Swift 是自动管理内存的,这也就是说,我们不再需要操心内存的申请和分配.当我们通过初始化创建一个对象时,Swift 会替我们管理和分配内存.而释放的原则遵循了自动引用计数 (ARC) 的规则:当一 ...

  4. android中BuildConfig.DEBUG的使用

    ADT(r17)中添加了一个新功能可以允许开发者只在Debug模式下允许某些代码.Build系统生成一个名称为BuildConfig的类,该类包含一个DEBUG 常量,该常量会根据您的Build类型自 ...

  5. jQuery中大于gt和小于lt

    gt,lt计数都是下标从0开始,而且不论大小于,都不包括它自己本身. <!DOCTYPE html> <html> <head> <meta charset= ...

  6. python class对象转换成json/字典

    # -*- encoding: UTF-8 -*- class Student: name = '' age = 0 def __init__(self, name, age): self.name ...

  7. django1.4日志模块配置及使用

    一.默认日志配置 在django 1.4中默认有一个简单的日志配置,如下 # A sample logging configuration. The only tangible logging # p ...

  8. 基于Bootstrap的DropDownList的JQuery组件的完善版

    在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...

  9. 转: rapidJSON与jsoncpp语法说明

    转:  http://www.voidcn.com/blog/hudejun007/article/p-1811986.html

  10. luogu1207双重回文数[usaco1.2]Dual Palindromes

    题目描述 如果一个数从左往右读和从右往左读都是一样,那么这个数就叫做“回文数”.例如,12321就是一个回文数,而77778就不是.当然,回文数的首和尾都应是非零的,因此0220就不是回文数. 事实上 ...