<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">

<title>分页标签</title>

<link rel="stylesheet" href="css/bootstrap.css">

<script src="js/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>

</head>

<body>

    <ul class="pagination">

        <li><a href="#">首页</a></li>

        <li><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><a href="#">末尾</a></li>

    </ul>

    <ul class="pager">

        <li><a href="#">上一页</a></li>        <!-- 中间 -->

        <li><a href="#">下一页</a></li>        <!-- 中间 -->

    </ul>

    <ul class="pager">

        <li class="previous"><a href="#">上一页</a></li>     <!-- 最左边 -->

        <li class="next"><a href="#">下一页</a></li>            <!-- 最右边 -->

    </ul>

</body>

</html>

示例图：

bootstrap:导航分页的更多相关文章

  1. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  2. Bootstrap Paginator分页插件

    Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...

  3. 第二百三十九节，Bootstrap路径分页标签和徽章组件

    Bootstrap路径分页标签和徽章组件 学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件 ...

  4. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  5. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  6. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  7. 使用KnockoutJs+Bootstrap实现分页

    [后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页   一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端 ...

  8. Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

    之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...

  9. Bootstrap 导航 标题栏

    Bootstrap 导航 标题栏: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

  1. POJ3080 Blue Jeans 题解 KMP算法

    题目链接:http://poj.org/problem?id=3080 题目大意:给你N个长度为60的字符串(N<=10),求他们的最长公共子串(长度>=3). 题目分析:KMP字符串匹配 ...

  2. 添加SuperSocket的启动代码到 Windows Azure 的 WorkRole 项目

    与其它SuperSocket程序相同,启动代码同样也要写到程序的入口处,如 Windows Azure 的 WorkRole 项目的OnStart() 方法: public override bool ...

  3. 推荐几个web前端比较实用的网站

    第一次写博客,说实在的有点紧张和兴奋,哈哈哈哈,本人工作了有两年的时间,平时也有做笔记的习惯,但是都做得乱七八糟的,所以就想通过写博客来记录.好了,废话不多说了,先来几个觉得在工作中使用到的,还不错的 ...

  4. Python 函数参数有冒号 声明后有-> 箭头 返回值注释 参数类型注释

    在python3.7 环境下 函数声明时能在参数后加冒号,如图: 1 def f(ham: str, eggs: str = 'eggs') -> str : 2 print("Ann ...

  5. 买房的贷款时间是否是越长越好？https://www.zhihu.com/question/20842791

    买房的贷款时间是否是越长越好?https://www.zhihu.com/question/20842791

  6. SpringBoot+Thyemleaf开发环境正常，打包jar发到服务器就报错Template might not exist or might not be accessible

    网上查看了各种解决的思路,总结如下: 1. 在controller层请求处理完了返回时,没有使用@RestController或@ResponseBody而返回了非json格式 这种情况下返回的数据t ...

  7. 【codeforces 766B】Mahmoud and a Triangle

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  8. ActiveMQ--配置端口

    配置端口 端口配置选项 一般最常用的URI是连接到代理的端口URI,通常为TCP或VM端口. 要注意空格:所有的URI都是基于java.net.URI类,它并不允许使用空格.所以,如果你使用failo ...

  9. H3C 路由表查找规则（2）

  10. 11-28\enum

    1.创建一个枚举对象,对象中4个属性video视频.book书----(这2个属性可以用数字表示). 2.创建一个class对象,对象中有2个属性,一个是id属性(自己设置),第二个属性是type类型 ...