zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    JavaScript 实现打印操作
    linux-centos7.6设置固定IP网络方法
    VMware网络配置三种网络模式(桥接、NAT、Host-only)
    SVN 执行cleanup报错:Cleanup failed to process the following paths
    word生成目录的pdf
    win10开机后将存在多个系统选择,改为直接进入系统无需选择
    Win10删除或是不显示快速访问中最近使用文件记录
    Dell T30解决报Alert! Cover was previously removed.
    WIN10安装.net报0x800F081F解决方法
    查看SVN当前登录用户
  • 原文地址:https://www.cnblogs.com/wsk198726/p/4969061.html
Copyright © 2011-2022 走看看