bootstrap分页应用

时间:2019-09-16
本文章向大家介绍bootstrap分页应用,主要包括bootstrap分页应用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

为您的网站或应用提供带有展示页码的分页组件,或者可以使用简单的翻页组件。

默认分页

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

  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »
Copy
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&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 aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
 

Labelling the pagination component

The pagination component should be wrapped in a <nav> element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive aria-label for the <nav> which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

http://www.hiago.cn
http://www.fioan.cn
http://www.faladoo.cn
http://www.llafestin.cn
http://www.vapsint.cn
http://www.moshii.cn
http://www.yumengse.cn
http://www.yajuxuan.cn
http://www.grottoo.cn

原文地址:https://www.cnblogs.com/zjhcap/p/11529608.html