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

    默认分页

    受 Rdio 的启发,我们提供了这个简单的分页组件,用在应用或搜索结果中超级棒。组件中的每个部分都很大,优点是容易点击、易缩放、点击区域大。

      <nav>
        <ul class="pagination">
          <li>
            <a href="" aria-label="Previous"><span>&laquo;</span></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="" aria-label="Next"><span>&raquo;</span></a>
          </li>
        </ul>
      </nav>

    这里写图片描述


    尺寸

    想要更小或更大的分页?.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。

    <nav>
        <ul class="pagination pagination-lg">
          <li>
            <a href="" aria-label="Previous"><span>&laquo;</span></a>
          </li>
            <li><span>1</span></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="" aria-label="Next"><span>&raquo;</span></a>
          </li>
        </ul>
      </nav>  
      <nav>
        <ul class="pagination">
          <li>
            <a href="" aria-label="Previous"><span>&laquo;</span></a>
          </li>
            <li><span>1</span></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="" aria-label="Next"><span>&raquo;</span></a>
          </li>
        </ul>
      </nav> 
       <nav>
        <ul class="pagination pagination-sm">
          <li>
            <a href="" aria-label="Previous"><span>&laquo;</span></a>
          </li>
            <li><span>1</span></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="" aria-label="Next"><span>&raquo;</span></a>
          </li>
        </ul>
      </nav>

    这里写图片描述


    翻页

    用简单的标记和样式,就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。

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

    这里写图片描述


  • 相关阅读:
    angular流程引擎集成
    angular打印功能实现方式
    文件hash、上传,实现文件上传重复验证
    HDU 6096 String(AC自动机+树状数组)
    HDU 5069 Harry And Biological Teacher(AC自动机+线段树)
    BZOJ 3172 单词(AC自动机)
    LightOJ 1268 Unlucky Strings(KMP+矩阵乘法+DP)
    Codeforces 808G Anthem of Berland(KMP+DP)
    LightOJ 1258 Making Huge Palindromes(KMP)
    UVA 11019 Matrix Matcher(哈希)
  • 原文地址:https://www.cnblogs.com/wood2012/p/7896554.html
Copyright © 2011-2022 走看看