zoukankan      html  css  js  c++  java
  • Bootstrap分页样式

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"> 
        <title>Bootstrap 实例 - 分页的大小</title>
    //需引用bootstrap 3.3.7的
    bootstrap.min.css
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    //
    jquery/2.1.1/jquery.min.js
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    //
    bootstrap/3.3.7/js/bootstrap.min.js
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <ul class="pagination pagination-lg">
        <li><a href="#">&laquo;</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="#">&raquo;</a></li>
    </ul><br>
    <ul class="pagination">
        <li><a href="#">&laquo;</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="#">&raquo;</a></li>
    </ul><br>
    <ul class="pagination pagination-sm">
        <li><a href="#">&laquo;</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="#">&raquo;</a></li>
    </ul>
    </body>
    </html>

    运行结果:1:大 2:正常 3:小

    第二种样式:

    <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
    </ul>

    第三种样式:

    <ul class="pager">
    <li class="previous"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
    </ul>

    .pager 一个简单的分页链接,链接居中对齐。  
    .previous .pager 中上一页的按钮样式,左对齐  
    .next .pager 中下一页的按钮样式,右对齐  
    .disabled 禁用链接  
    .pagination 分页链接  
    .pagination-lg 更大尺寸的分页链接  
    .pagination-sm 更小尺寸的分页链接  
    .disabled 禁用链接  
    .active 当前访问页面链接样式
    以上内容纯属借鉴
  • 相关阅读:
    numpy的文件存储 .npy .npz 文件
    Google词向量word2vec的使用
    Python函数-logging.basicConfig
    现货黄金-20180918
    Pandas的loc方法
    Pandas的index属性
    python调用exe程序
    Pandas的concat方法
    转载:为什么选择Nginx(1.2)《深入理解Nginx》(陶辉)
    discuz3.4:在Centos6.5中安装过程
  • 原文地址:https://www.cnblogs.com/fuyao/p/7644322.html
Copyright © 2011-2022 走看看