如果您想要创建一个简单的分页链接为用户提供导航，可以通过翻页来实现。与分布链接一样，也是一个无序列表。默认情况下，翻页是居中显示的。下面列出了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. Codeforces 749C【模拟】

    FST的时候好像挂了挺多人的~ 其实思路没啥难的,就是更好地理解题意吧,1到n一直循环,直到没有人能vote,一个人能vote也能叉掉一个人,一个人被叉就不能vote,判谁赢. 其实我管vote干嘛, ...

  2. hard(2018.10.18)

    题意:给你一棵\(n\)个节点的树,\(q\)个询问,每次询问读入\(u,v,k,op\),需要满足树上有\(k\)对点的简单路径交都等于\(u,v\)之间的简单路径,\(op=1\)表示\(k\)对 ...

  3. Linux (三)

    chmod :用来改变文件或目录的访问权限 语法格式:chmod [参数选项] [mode][文件或者目录] 参数选项: -v :显示权限变更的详细信息 -R :对当前目录下的所有文件以及子目录进行相 ...

  4. Tinghua Data Mining 3

    特征选择 男女身高 男女抽烟 先验分布 熵 衡量系统的不确定性 属性的价值 降低了不确定性 降低的幅度越高越好 主成分分析 旋转是的数据间的correlation消失掉 Q是正交阵 七长八短,长宽相关 ...

  5. 牛客寒假6-B.煤气灶

    链接:https://ac.nowcoder.com/acm/contest/332/B 题意: 小j开始打工,准备赚钱买煤气灶. 第一天,小j的工资为n元,之后每天他的工资都比前一天多d元. 已知煤 ...

  6. Gym - 101810B ACM International Collegiate Programming Contest (2018)

    bryce1010模板 http://codeforces.com/gym/101810 #include <bits/stdc++.h> using namespace std; #de ...

  7. Java EE学习笔记（二）

    Spring中的Bean 1.Bean的配置: a).Bean的本质就是Java中的类,而Spring中的Bean其实就是对实体类的引用,来生产Java类对象,从而实现生产和管理Bean . b).S ...

  8. SNMP4J 总结

    一.SNMP4J介绍 SNMP4J是一个用Java来实现SNMP(简单网络管理协议)协议的开源项目.它支持以命令行的形式进行管理与响应.SNMP4J是纯面向对象设计与SNMP++(用C++实现SNMP ...

  9. Springboot日志配置探索（主要看logback）（一）

    这篇博客是springboot日志配置探索的第一篇,主要讲默认配置下springboot的logback日志框架的配置(即直接使用是怎样的) 首先,是一个SpringBoot的有关日志的说明文档:ht ...

  10. HDU 3117 Fibonacci Numbers 数学

    http://acm.hdu.edu.cn/showproblem.php?pid=3117 fib是有一个数学公式的. 这里的是标准的fib公式 那么fib = 1 / sqrt(5) * ((1 ...