<!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. swiper仿tab栏切换

    转载  https://developers.weixin.qq.com/community/develop/article/doc/000040a5dc4518005d2842fdf51c13 小程 ...

  2. 小程序加载大图片 使用widthFix时，图片先拉伸然后才显示完全

    <image src="http://www.ll.com/sss.jpg" mode="widthFix" style="width:180r ...

  3. 【原生JS】切换选项卡

    效果图: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  4. 2015-2016 ACM-ICPC Southwestern Europe Regional Contest (SWERC 15)

    C. Canvas Painting 合并果子. E. Wooden Signs \(dp(i,l,r)\)表示第\(i\)块木板的长度区间为\([l,r]\)的方案数,根据题意,\(l\)或\(r\ ...

  5. js实现点击隐藏图片

    方法一: 把图片的display设为none,触发点击事件时,display变为block <style> img { width: 400px;height: 300px; displa ...

  6. H3C HDLC配置

  7. Vue 组件切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. H3C 什么是OSPF

  9. visualStudio 无法登陆

    如果遇到 visualStudio 无法登陆,可以看下我的方法,可能有用 尝试关闭代理 打开设置.网络.代理,关了它,试试 如果遇到下面的问题: 我们无法刷新此账户的凭据 No home tenant ...

  10. 2018-8-10-win10-uwp-MVVM-语义耦合

    title author date CreateTime categories win10 uwp MVVM 语义耦合 lindexi 2018-08-10 19:16:53 +0800 2018-2 ...