Source

Pagination

Zvinyorwa uye mienzaniso yekuratidza pagination kuratidza nhevedzano yezvinyorwa zvinoenderana iripo pamapeji akawanda.

Overview

Isu tinoshandisa bhuroka hombe yezvibatanidza zvakabatanidzwa kune yedu pagination, zvichiita kuti zvinongedzo zviome kupotsa uye nyore scalable — zvese tichipa nzvimbo dzakakura dzakarova. Pagination inovakwa nerondedzero HTML zvinhu kuitira kuti vaverengi vescreen vazivise huwandu hweanowanikwa malink. Shandisa chinhu chekuputira <nav>kuti uzviratidze sechikamu chekufambisa kune vanoverenga skrini uye humwe hunyanzvi hwekubatsira.

Pamusoro pezvo, sezvo mapeji angangove aine chikamu chimwe chete chekufamba chakadaro, zvinokurudzirwa kupa tsananguro aria-labelyekuti <nav>iratidze chinangwa chayo. Semuyenzaniso, kana chikamu chepejination chikashandiswa kufamba pakati peseti yezviwanikwa zvekutsvaga, zita rakakodzera rinogona kunge riri 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>

Kushanda nemifananidzo

Kutsvaga kushandisa icon kana chiratidzo panzvimbo yemavara kune mamwe mapeji link? Ita shuwa yekupa yakakodzera screen reader rutsigiro arianehunhu uye .sr-onlyzvekushandisa.

<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>

Yakaremara uye inoshanda nyika

Pagination zvinongedzo zvinogoneka kune akasiyana mamiriro. Shandisai .disabledmalink anoita seasingabatike uye .activekuratidza peji iripo.

Nepo .disabledkirasi inoshandisa pointer-events: nonekuyedza kudzima iyo link mashandiro e <a>s, iyo CSS pfuma haisati yamira uye haiverengere keyboard navigation. Saka nekudaro, iwe unofanirwa kugara uchiwedzera tabindex="-1"pane akaremara zvinongedzo uye shandisa tsika JavaScript kudzima zvizere kushanda kwavo.

<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>

Unogona kuchinjanisa maanchor anoshanda kana akaremara zve <span>, kana kusiya anchor kana iri prev/inotevera miseve, kubvisa kuita kwekudzvanya uye kudzivirira kutarisisa kwekhibhodi uchichengeta zvitaera zvakada.

<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>

Kukura

Fancy pagination yakakura kana diki? Wedzera .pagination-lgkana .pagination-smkuwedzera saizi.

<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>

Alignment

Shandura kurongeka kwezvikamu zvepeji neflexbox utilities .

<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>