Source

Pagination

Ny antontan-taratasy sy ny ohatra amin'ny fampisehoana pagination mba hanondroana andiana votoaty mifandraika dia misy manerana ny pejy maro.

Overview

Mampiasa andiana rohy mifandray be dia be izahay ho an'ny pagination anay, ka mahatonga ny rohy ho sarotra adino sy mora azo ampitomboina—rehefa manome faritra be hitifitra. Namboarina miaraka amin'ny singa HTML lisitra ny pejy fanoratana mba ahafahan'ny mpamaky efijery manambara ny isan'ny rohy misy. Mampiasà singa famonosana <nav>mba hamantarana azy io ho toy ny fizarana fitetezana amin'ny fisavana mpamaky sy teknolojia manampy.

Ho fanampin'izany, satria mety manana fizarana fitetezam-paritra mihoatra ny iray ny pejy, dia tsara ny manome famaritana aria-labelmba <nav>hanehoana ny tanjony. Ohatra, raha ampiasaina hivezivezena eo anelanelan'ny andiana valim-pikarohana ny singa pagination, dia mety ho marika mety ny aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Miasa amin'ny kisary

Te hampiasa kisary na marika ho solon'ny lahatsoratra ho an'ny rohy pagination sasany? Aza hadino ny manome fanohanana ny mpamaky efijery mety amin'ny ariatoetra sy ny .sr-onlyfitaovana.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Fanjakana kilemaina sy mavitrika

Ny rohy fanondroana pejy dia azo zahana amin'ny toe-javatra samihafa. Ampiasao .disabledho an'ny rohy toa tsy azo kitihina ary .activehanondro ny pejy ankehitriny.

Raha .disabledmampiasa ny kilasy pointer-events: nonehanandrana hanaisotra ny fiasan'ny rohin'ny <a>s, io fananana CSS io dia tsy mbola manara-penitra ary tsy mirakitra ny fitetezana kitendry. Noho izany, tokony hampidirinao tabindex="-1"amin'ny rohy kilemaina foana ianao ary hampiasa JavaScript manokana mba hanesorana tanteraka ny asany.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Azonao atao ny manova ny vatofantsika mavitrika na kilemaina amin'ny <span>, na manala ny vatofantsika amin'ny trangan'ny zana-tsipìka teo aloha/manaraka, mba hanesorana ny fampiasa kitiho sy hisorohana ny fifantohana amin'ny fitendry raha mitazona ny fomba nokasaina.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Famaritana

Mitady pagination lehibe kokoa na kely kokoa? Ampio .pagination-lgna .pagination-smhabe fanampiny.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

Fanitsiana

Ovay ny fampifanarahana ny singa pagination amin'ny flexbox utility .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>