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

    题意: 给你一个串只有小写字母和点,让你构造前缀是1-8,后缀是1-3长度的文件名: 思路: 那么以"."作为分割点,把字符串都拿出来,然后 首段长度<=8 OK; 中间&l ...

  3. 3DMAX 6 游戏特效制作

    3d主要是粒子系统为主,一个特效可能包含多个粒子系统,需要注意粒子系统尽量减少多余参数,材质shader在手机上要经过优化 另外可以使用面片加脚本实现滚动效果,比如瀑布等等 具体方法以后补充,占位

  4. 計蒜客/小教官(xjb)

    題目鏈接:https://nanti.jisuanke.com/t/366 題意:中文題誒~ 思路: 先通過給出的條件構造一個符合題意的數組(可以是任意一個符合條件的數組,菜雞不會證明: 然後構造的數 ...

  5. 进击python第4篇：初探模块

    模块,用一砣代码实现了某个功能的代码集合,任何python程序都可以作为模块导入,n个 .py 文件组成的代码集合就称为模块. but 为什么要引入模块概念?主要原因是代码重用(code reuse) ...

  6. C 语言实例 - 从文件中读取一行

    C 语言实例 - 从文件中读取一行 从文件中读取一行. 文件 runoob.txt 内容: $ cat runoob.txt runoob.com google.com 实例 #include < ...

  7. dubbo-admin安装

    1.下载dubbo-adminhttps://github.com/apache/incubator-dubbo/tree/dubbo-2.5.7 2.解压,进入到/home/zhanxuewei/D ...

  8. OSPF-1-OSPF的数据库交换（4）

    4.DD交换:主/从关系   当两台路由器之间形成了邻居关系后(ExStart),邻居双方需要决定在数据库交换的过程中,哪台路由器的角色是主,哪台路由器的角色是从.主和从这两个角色决定了DD包交换过程 ...

  9. UVA297：Quadtrees（四分树）

    题目描述 四象树是每个内结点均有4个子结点的特殊四叉树,它可用于描述平面上黑白图像.平面上的黑白图像是32行×32列的正方形,每个格子称为1个象素,是最小的图像单位.正方形图像可分成四个相等的小正方形 ...

  10. bzoj 4695: 最假女选手 && Gorgeous Sequence HDU - 5306 && (bzoj5312 冒险 || 小B的序列) && bzoj4355: Play with sequence

    算导: 核算法 给每种操作一个摊还代价(是手工定义的),给数据结构中某些东西一个“信用”值(不是手动定义的,是被动产生的),摊还代价等于实际代价+信用变化量. 当实际代价小于摊还代价时,增加等于差额的 ...