bootstrap 分页样式代码
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 分页样式代码的更多相关文章
- yii使用bootstrap分页样式
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...
- 百度分页样式代码 css+c#
通过c#输出html分页代码: /// <summary> /// 返回分页Html代码 /// </summary> /// <param name="pag ...
- 打造简单实用的Thinkphp分页样式(Bootstrap版本)
先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个“前5页”和“后5页”显得有点多余,因为点击当前显示第一页 ...
- php分页类代码带分页样式效果(转)
php分页类代码,有漂亮的分页样式风格 时间:2016-03-16 09:16:03来源:网络 导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...
- bootstrap导航条+模态对话框+分页样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Bootstrap列表与代码样式(附源码)--Bootstrap
给大家分享下Bootstrap框架中列表与代码样式相关的知识 1.列表 (1)无序列表 <ul> <li>CN217编程</li> </ul> 注意:u ...
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
- DataTables ajax + bootstrap 分页/搜索/排序/常见问题
最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...
- Bootstrap分页插件ajax返回数据,工具类的编写
使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...
随机推荐
- 推荐一个CodeProject上的SlideForm控件
CodeProject有一篇文章介绍了怎么实现一个SlideForm,非常不错,收藏在此. http://www.codeproject.com/KB/dialog/csslideform.aspx ...
- PostgreSQL的 initdb 源代码分析之九
继续:下面的是定义信号处理函数. /* * now we are starting to do real work, trap signals so we can clean up */ /* som ...
- 节点文件将两个不同格式的XML文件,进行节点对照,并生成一个用于对照功能的XML
本文纯属个人见解,是对前面学习的总结,如有描述不正确的地方还请高手指正~ 经常有的需求是,需要将一种格式的XML转换成另一种XML.如果要实现这个功能首先需要将两个不同XML手动建立节点对比关系.然后 ...
- 在WCF中不使用svc文件直接使用cs文件
在 配置中有个节点可以实现 此功能 <serviceHostingEnvironment multipleSiteBindingsEnabled="true" > &l ...
- BZOJ 2120: 数颜色 分块
2120: 数颜色 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/problem.php? ...
- c# 反射学习笔记
首先了解C#反射的概念,反射是一个运行库类型发现的过程.通过反射可以得到一个给定程序集所包含的所有类型的列表, 这个列表包括给定类型中定义的方法.字段.属性和事件.也可以动态的发现一组给定类支持的借口 ...
- mysql索引常见问题
一:对于先建索引再插入和先插入再统一建索引效率: 对于大数量的表来说, 先加载数据再来定义全文索引的 速度要远远优于在一个已经定义好全文索引的表里面插入大量数据的速度.一定会问:这是问什么呢?其实,道 ...
- 搭建属于自己的wiki
1.开源wiki mediawiki http://www.mediawiki.org/wiki/MediaWiki 2. 开发文档 http://www.mediawiki.org/wiki/Man ...
- java_小技巧
看很多人说,在Eclipse里面,输入Syso然后按 ALT+/不起作用. 正确的用法如下,先输入一行 System.out.println(); 然后连按5次以上shift键,其实就是粘滞的功能.接 ...
- Android客户端token简介和简单应用
一.什么是Token Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数 ...