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

    1.CSV 文件 不支持 EXCEL中 的多个工作表的模式. 一个 CVS 文件只能转换成 EXCEL 一个工作表. 2.逗号分隔值(Comma-Separated Values,CSV,有时也称为字 ...

  2. TFS 无法找到新加的Windows用户

    Windows 用户加入后,无法在TFS中的"浏览"中找到(只有已经加入TFS的Windows用户显示出来) 其实这时候只要直接输入 用户名 然后点击"保存更改" ...

  3. XHTML学习笔记 part1

    XHTML: 可扩展超文本标记语言 HTML语言最开始是用来描述文档的结构,如标题,段落等标记,后来HTML有增加了一些控制字体,对齐等方面的标记和属性,这样做的结果是HTML既可以用来描述文档的结构 ...

  4. [Noip2012普及组]摆花

    Description 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共 m 盆.通过调查顾客的喜好,小明列出了顾客最喜欢的 n 种花,从 1 到 n 标号.为了在门口展出更多种花,规定 ...

  5. B - Halloween Costumes

    #include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...

  6. IP服务-5-网络时间协议

    NTP版本3(RFC1305)允许IP主机向一个通用的时钟源同步它们的日期和时间. 从设计上来说,大多数路由器和交换机都使用NTP客户端模式,根据NTP服务器所提供的时间来调整自己的时钟.NTP定义了 ...

  7. PostgreSQL-2-用户权限管理

    1.创建与删除用户 CREATE ROLE rolename; 方法1,创建角色 CREATE USER username; 方法2,创建用户 CREATE USER指令创建的用户默认是有登录权限的, ...

  8. Ubuntu-通过v2版本的rancher安装部署k8s

    环境: ubuntu:16.04+(64位) CPU:2C MEM:>4G docker:17.03.2 1.13.1 1.12.6 基础配置:(若是云服务器,下列只需要放行端口) >&g ...

  9. ecshop的商品列表输出中多出一条空记录

    这个是ECSHOP的一个BUG, 在模板中显示商品列表的位置,加一句{if $goods}判断商品存在才显示: {foreach from=$goods_list item=goods} {if $g ...

  10. Navicat for MySQL在ubuntu下运行没有反应

    Step1: 打开Navicat官网,下载Navicat ,网址:http://www.navicat.com/en/download/download.html Step2:进入下载目录,解压压缩包 ...