专栏首页小白程序猿thinkphp/laravel框架bootstrap分页样式

thinkphp/laravel框架bootstrap分页样式

thinkphp框架和laravel框架都是国内知名的、使用量超大的框架,在每个网站应用中都会涉及到列表页面,但是在实际开发过程中,我们会遇到页面展示的分页没有css样式,表现的非常的丑。下面分享出一套css样式,可以展现出较好看的样式效果。

样式如下:

#page {
    background-color: #FFF;
    text-align: center;
    height: 75px;
    display: block;
}

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

#page .pagination > li {
    display: inline;
}

#page .pagination li.disabled,
#page .pagination li.active {
    cursor: not-allowed;
}

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

#page .pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #616161;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #d0d0d0;
}

#page .pagination > li:last-child > a, .pagination > li:last-child > span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#page .pagination li.active span {
    background-color: #009688;
    color: #FFF;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css实现logo扫光动画效果

    在WordPress博客系统中经常见到网站logo出现光条的动画效果,感觉挺好看的,今天实际的写了一些代码、演示一下。

    申霖
  • PSR-2 编码规范

    本规范希望通过制定一系列规范化 PHP 代码的规则,以减少在浏览不同作者的代码时,因代码风格的不同而造成不便。

    申霖
  • 克隆项目-Thinkphp5.1开发后台管理系统

    看本篇文章的朋友应该都是有基础的,太基础的不做讲解了,关于本地开发环境的搭建请参照:如何利用宝塔面板搭建服务器环境并搭建网站。

    申霖
  • 文件拷贝工具 原

    WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端。同时支持SCP协议。它的主要功能就是在本地与远程计算机间安全的复制文件。.winsc...

    wuweixiang
  • 谈响应式web设计代码实现

    在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。 1. ie9以下(不包括ie9)采用i...

    RP道貌不岸然
  • 2018中国十大科技进展公布!两院院士投票,港珠澳大桥和天河三号上榜

    不同于其他民间或大数据机构评选,该年度科技进展由中国科学院院士和中国工程院院士投票产生,代表科学技术研究领域的最高水平。

    量子位
  • Github更改账户名称/仓库地址/个人链接后缀

    注意:在public profile中修改的name,是主页个人名字,不是仓库地址后缀!!!

    浩Coding
  • css基本样式1(7.1)

    2.盒模型 盒模型内容的width、height、padding内边距、border、margin外边距。

    bamboo
  • nginx配置文件详解

    nginx配置参考文档(附带中文说明),能解决大部分配置问题了! #定义Nginx运行的用户和用户组 user nginx nginx; #指定工作衍生进程数...

    苦咖啡
  • 项目需求讨论 - WebView下拍照及图片选择功能

    现在很多app里面,都会有这么一个需求,就是上传图片的按钮,当然按了这个按钮之后,就会出现二种选择: 1. 直接拍照,2. 相册选择现有图片。

    青蛙要fly

扫码关注云+社区

领取腾讯云代金券