编程 Javascript

Bootstrap基本组件学习笔记之分页(12)

Posted in Javascript onDecember 08, 2016

Bootstrap提供了对分页的良好支持。

0x01 默认的分页

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>默认的分页</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>默认的分页</h1>
 </div>
 <div>
 <ul class="pagination">
  <li class="disabled"><a href="#">«</a></li>
  <li class="active"><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="#">»</a></li>
 </ul>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本组件学习笔记之分页(12)

上面增加了disabled和active的效果。

0x02 综合案例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>分页</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>分页</h1>
 </div>
 <div>
 <ul class="pagination">
  <li class="disabled"><a href="#">«</a></li>
  <li class="active"><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="#">»</a></li>
  <li> </li>
  <li>
  <label for="text">跳转到:</label><input type="text" class="text-info" id="text" size="10">
  </li>
  <li>
  <button class="btn btn-primary">Go</button>
  </li>
 </ul>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本组件学习笔记之分页(12)

0x03 翻页

下面的例子演示.pager的样式：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>翻页</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>翻页</h1>
 </div>
 <div>
 <ul class="pager">
  <li class="previous"><a href="#">前一页</a></li>
  <li class="next"><a href="#">后一页</a></li>
 </ul>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本组件学习笔记之分页(12)

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap基本组件学习笔记之分页(12)

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery点击tr实现checkbox选中的方法

Mar 19 Javascript

js改变embed标签src值的方法

Apr 10 Javascript

js实现延时加载Flash的方法

Nov 26 Javascript

原生JS实现拖拽图片效果

Aug 27 Javascript

js实现分割上传大文件

Mar 09 Javascript

JS实现简单抖动效果

Jun 01 Javascript

浅谈vue中使用图片懒加载vue-lazyload插件详细指南

Oct 23 Javascript

Vue项目中如何引入icon图标

Mar 28 Javascript

解决vue-router在同一个路由下切换,取不到变化的路由参数问题

Sep 01 Javascript

bootstrap table合并行数据并居中对齐效果

Oct 17 Javascript

vue 实现左右拖拽元素并且不超过他的父元素的宽度

Nov 30 Javascript

微信小程序利用swiper+css实现购物车商品删除功能

Mar 06 Javascript

浅谈Node.js：fs文件系统模块

Dec 08 #Javascript

Bootstrap基本插件学习笔记之模态对话框(16)

Dec 08 #Javascript

概述BootStrap中role="form"及role作用角色

Dec 08 #Javascript

Bootstrap基本插件学习笔记之标签切换(17)

Dec 08 #Javascript

Bootstrap基本插件学习笔记之Popover提示框(19)

Dec 08 #Javascript

JS焦点图,JS 多个页面放多个焦点图的实例

Dec 08 #Javascript

BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法

Dec 08 #Javascript

You might like

Zend Studio使用技巧两则

2016/04/01 PHP

php模拟post上传图片实现代码

2016/06/24 PHP

浅谈PHP发送HTTP请求的几种方式

2017/07/25 PHP

在视频前插入广告

2006/11/20 Javascript

JQuery Tab选项卡效果代码改进版

2010/04/01 Javascript

JQuery扩展插件Validate 3通过参数设置错误信息

2011/09/05 Javascript

自己写的兼容ie和ff的在线文本编辑器类似ewebeditor

2012/12/12 Javascript

js借助ActiveXObject实现创建文件

2013/09/29 Javascript

nodejs之请求路由概述

2014/07/05 NodeJs

基于javascript、ajax、memcache和PHP实现的简易在线聊天室

2015/02/03 Javascript

JS常见问题之为什么点击弹出的i总是最后一个

2016/01/05 Javascript

基于jQuery实现的无刷新表格分页实例

2016/02/17 Javascript

JavaScript组成、引入、输出、运算符基础知识讲解

2016/12/08 Javascript

Bootstrap基本组件学习笔记之分页(12)

2016/12/08 Javascript

浅谈angularjs中响应回车事件

2017/04/24 Javascript

激动人心的 Angular HttpClient的源码解析

2017/07/10 Javascript

JS使用Dijkstra算法求解最短路径

2019/01/17 Javascript

基于vue如何发布一个npm包的方法步骤

2019/05/15 Javascript

[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect

2018/04/03 DOTA

跟老齐学Python之??碌某?? target=

2014/09/12 Python

Python中Django 后台自定义表单控件

2017/03/28 Python

python利用dir函数查看类中所有成员函数示例代码

2017/09/08 Python

解决pandas中读取中文名称的csv文件报错的问题

2018/07/04 Python

matplotlib交互式数据光标实现(mplcursors)

2021/01/13 Python

HTML5 script元素async、defer异步加载使用介绍

2013/08/23 HTML / CSS

Allsole美国/加拿大：英国一家专门出售品牌鞋子的网站

2018/10/21 全球购物

电气专业应届生求职信

2013/11/01 职场文书

自荐书4要点

2014/01/25 职场文书

九年级英语教学反思

2014/01/31 职场文书

美术毕业生求职信

2014/02/25 职场文书

2015年学校后勤工作总结

2015/04/08 职场文书

首次购房证明

2015/06/19 职场文书

教您怎么制定西餐厅运营方案？

2019/07/05 职场文书

基于Redis结合SpringBoot的秒杀案例详解

2021/10/05 Redis

英镑符号￡

2022/02/17 杂记

浅析JavaScript中的变量提升

2022/06/01 Javascript