bootstrap 分页样式代码，废话不多说，直接上源码

<!DOCTYPE html>

<html>

<head>

    <title>Bootstrap 实例 - 默认的分页</title>

    <style>

        .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; }

        .pagination li { display: inline; }

        .pagination li a { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.428571429; text-decoration: none; background-color: #fff; border: 1px solid #ddd; }

        .pagination li:first-child a { margin-left: 0; border-bottom-left-radius: 4px; border-top-left-radius: 4px; }

        .pagination li:last-child a { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

        .pagination li a:hover, .pagination li a:focus { background-color: #eee; }

        .pagination .active a, .pagination .active a:hover, .pagination .active a:focus { z-index: 2; color: #fff; cursor: default; background-color: #428bca; border-color: #428bca; }

        .pagination .disabled a, .pagination .disabled a:hover, .pagination .disabled a:focus { color: #999; cursor: not-allowed; background-color: #fff; border-color: #ddd; }

        .pagination-lg li a { padding: 10px 16px; font-size: 18px; }

        .pagination-sm li a, .pagination-sm li span { padding: 5px 10px; font-size: 12px; }

    </style>

</head>

<body>

    <ul class="pagination pagination-lg">

        <li><a href="#">«</a></li>

        <li class="active"><a href="#">1</a></li>

        <li class="disabled"><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>

    <br />

    <ul class="pagination">

        <li><a href="#">«</a></li>

        <li class="active"><a href="#">1</a></li>

        <li class="disabled"><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>

    <br />

    <ul class="pagination pagination-sm">

        <li><a href="#">«</a></li>

        <li class="active"><a href="#">1</a></li>

        <li class="disabled"><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>

</body>

</html>

bootstrap 分页样式代码的更多相关文章

  1. yii使用bootstrap分页样式

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...

  2. 百度分页样式代码 css+c#

    通过c#输出html分页代码: /// <summary> /// 返回分页Html代码 /// </summary> /// <param name="pag ...

  3. 打造简单实用的Thinkphp分页样式(Bootstrap版本)

    先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个“前5页”和“后5页”显得有点多余,因为点击当前显示第一页 ...

  4. php分页类代码带分页样式效果(转)

    php分页类代码,有漂亮的分页样式风格 时间:2016-03-16 09:16:03来源:网络 导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...

  5. bootstrap导航条+模态对话框+分页样式

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Bootstrap列表与代码样式(附源码)--Bootstrap

    给大家分享下Bootstrap框架中列表与代码样式相关的知识 1.列表 (1)无序列表 <ul> <li>CN217编程</li> </ul> 注意:u ...

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

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

  8. DataTables ajax + bootstrap 分页/搜索/排序/常见问题

    最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...

  9. Bootstrap分页插件ajax返回数据，工具类的编写

    使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...

随机推荐

  1. 批量下载QQ空间日志

    从手机页面读取,有时候也会卡死,解决办法还是重新来……………… # -*-coding:utf-8-*- # 作者:fwindpeak # import urllib import urllib2 i ...

  2. Codeforces Round #330 (Div. 2) B. Pasha and Phone 容斥定理

    B. Pasha and Phone Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/595/pr ...

  3. hdu 5279 Reflect phi 欧拉函数

    Reflect Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://bestcoder.hdu.edu.cn/contests/contest_chi ...

  4. 解决使用DevExpress开发错误:未将对象引用设置到对象的实例

    在使用DevExpress是总是会出现一些状况.这次同事在他的机器上调试完成的代码发过来,却出现"未将对象引用设置到对象的实例"的错误,提示是Resources.resx的问题.另 ...

  5. Oracle DB 通过 Oracle Enterprise Manager注册要使用的恢复目录

    通过 Oracle Enterprise Manager  注册要使用的恢复目录.  a)  在 EM 中,导航到“Availability > Recovery Catalog Setting ...

  6. Qt4.8.6+mingw+Qgis2.4.0基于QGis的二次开发

    关于QGis的二次开发,大致看了一下,基本都是在VC+QT的环境下做环境部署,并且QGis的版本号很老.在mingw下直接开发搭建好开发环境的样例少之又少.基于最新的Qgis2.4.0版本号做了对应的 ...

  7. Android APK方式换肤实现原理

    现在很多APP都有换肤的功能,例如微博,QQ等应用.这些应用的换肤原理是什么? 在用微博的时候,不难发现,当你要换肤时,先下载并安装一个皮肤apk,然后选择这个皮肤,就可以了. 这种方式就是把皮肤打包 ...

  8. iOS开发——UI篇OC篇&初始化图片方式

    初始化图片方式 一.读取图片 1.从资源(resource)读取 [cpp] view plaincopyprint?   UIImage* image=[UIImage imageNamed:@&q ...

  9. mybatis0209 二级缓存

    .1二级缓存 1.1.1原理 mybatis和spring整合后一级缓存就没有了,sqlSession在不关闭的前提下2次查询就会从缓存中取,一级缓存缓存在sqlSession对象里面,当多用户查询的 ...

  10. java_类承继其他类的内部类例子

    package ming; class Outer { class In { public In(String msg) { System.out.println(msg); } } } public ...