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

Class 描述 示例代码
.pager 添加该 class 来获得翻页链接。 
<ul class="pager">

  <li><a href="#">Previous</a></li>

  <li><a href="#">Next</a></li>

</ul>
.previous, .next 使用 class .previous 把链接向左对齐，使用 .next 把链接向右对齐。 
<ul class="pager">

  <li class="previous"><a href="#">&larr; Older</a></li>

  <li class="next"><a href="#">Newer &rarr;</a></li>

</ul>
.disabled 添加该 class 来获得一个颜色变淡的外观。 
<ul class="pager">

  <li class="previous disabled"><a href="#">&larr; Older</a></li>

  <li class="next"><a href="#">Newer &rarr;</a></li>

</ul>

默认的翻页

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：默认翻页</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap 翻页(pager)的更多相关文章

  1. bootstrap 翻页的状态

    翻页的状态 下面的实例演示了上表中所讨论的 class .disabled 的用法: <!DOCTYPE html><html><head><meta htt ...

  2. bootstrap 翻页(对齐的链接)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  4. bootstrap table 复选框选中后，翻页不影响已选中的复选框

    使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...

  5. BootStrap一页通（样式+组件+插件）

    bootstrap是一种前端框架,实现美观的页面效果.使用BootStrap的前期工作(注意顺序): <!DOCTYPT html>:因为Bootstrap用到了h5的特性,所以需要此步. ...

  6. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

  7. JeeSite数据分页与翻页

    本文章介绍的是JeeSite开源项目二次开发时的一些笔记,对于没有使用过JeeSite的可以不用往下看了,因为下面的代码是跟JeeSite二次开发相关的代码,不做JeeSite的二次开发,以下代码对您 ...

  8. vue翻页器，包括上一页，下一页，跳转

    翻页组件 -- 子组件<template> <div class="pager-wrapper" ref="pager"> <di ...

  9. 34.scrapy解决爬虫翻页问题

    这里主要解决的问题: 1.翻页需要找到页面中加载的两个参数. '__VIEWSTATE': '{}'.format(response.meta['data']['__VIEWSTATE']), '__ ...

随机推荐

  1. lightoj1001【简单题】

    题意: 一个人的值不能超过10: #include<stdio.h> #include<queue> #include<string.h> #include< ...

  2. HTTP请求信息和响应信息的格式

    请求: (1)请求行信息 Request URL: 发起请求的路径 Request Method:请求的方式(get  post  head put  delete  trace  options等) ...

  3. css 3d旋转

  4. MyBais中xxMap.xml中的知识点

    添加新的mapper的时候下面两个标红的地方要注意,如果统一约定好命名的话都还好,但是就怕一会这样一会那样的业务代码:总之小心! <!-- spring与mybatis整合配置,扫描所有dao, ...

  5. Ubuntu使用实录

    在实验室的电脑上重新配置了Linux开发环境,使用的是Ubuntu 14.04.5 LTS. 在开发中遇到的问题甚多,一一记录如下: 1.切换为root身份 先给root用户设定密码,然后进行切换 s ...

  6. 最大xor,and,or

    http://210.33.19.103/contest/998 and,or部分 并不用01trie,题目&题解:https://blog.csdn.net/dreaming__ldx/ar ...

  7. 502的错误其实不是nginx的问题，要从后端找原因。php-cgi进程数不够用、php执行时间长、或者是php-cgi进程死掉，都会出现502错误。

    502的错误其实不是nginx的问题,要从后端找原因.php-cgi进程数不够用.php执行时间长.或者是php-cgi进程死掉,都会出现502错误.

  8. 543 Diameter of Binary Tree 二叉树的直径

    给定一棵二叉树,你需要计算它的直径长度.一棵二叉树的直径长度是任意两个结点路径长度中的最大值.这条路径可能穿过根结点.示例 :给定二叉树          1         / \        2 ...

  9. [未读]深入浅出node.js

    还没看过,据说很多内容来自国外译文.

  10. webstock学习

    1.WebSocket是HTML5中出出现的新技术,有着web TCP之称,这也是为了适应现在实时传输数据的趋势,在这之前一般采用两种方法进行实时数据交换. 轮询机制,其中又包括长轮询. ①短轮询是指 ...