Source

Pagination

Cov ntaub ntawv thiab cov piv txwv rau kev qhia pagination los qhia txog cov ntsiab lus cuam tshuam muaj nyob thoob plaws ntau nplooj ntawv.

Txheej txheem cej luam

Peb siv qhov thaiv loj ntawm kev sib txuas rau peb cov pagination, ua cov kev sib txuas nyuaj kom tsis nco qab thiab yooj yim scalable-tag nrho thaum muab cov cheeb tsam loj. Pagination yog tsim nrog cov npe HTML cov ntsiab lus kom cov neeg nyeem ntawv tuaj yeem tshaj tawm cov xov tooj ntawm cov ntawv txuas. Siv cov txheej txheem qhwv <nav>los txheeb xyuas nws ua ntu kev taw qhia los tshuaj xyuas cov neeg nyeem thiab lwm yam cuab yeej pabcuam.

Tsis tas li ntawd, raws li cov nplooj ntawv yuav muaj ntau tshaj li ib qho kev taw qhia, nws raug nquahu kom muab cov lus piav qhia aria-labelrau qhov <nav>xav txog nws lub hom phiaj. Piv txwv li, yog hais tias cov pagination tivthaiv yog siv los mus rau ntawm ib pawg ntawm kev tshawb nrhiav, ib daim ntawv lo tsim nyog yuav yog 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>

Ua haujlwm nrog cov cim

Nrhiav siv lub cim lossis cim rau hauv qhov chaw ntawm cov ntawv nyeem rau qee qhov kev sib txuas ntawm pagination? Nco ntsoov muab kev txhawb nqa kev nyeem ntawv zoo nrog cov ariacwj pwm thiab cov .sr-onlykhoom siv.

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

Disabled thiab active xeev

Pagination txuas yog customizable rau cov xwm txheej sib txawv. Siv .disabledrau cov kev sib txuas uas tshwm sim un-clickable thiab .activeqhia rau nplooj ntawv tam sim no.

Thaum cov .disabledchav kawm siv pointer-events: nonelos sim lov tes taw qhov txuas kev ua haujlwm ntawm <a>s, cov cuab yeej CSS tseem tsis tau ua qauv thiab tsis suav rau cov keyboard navigation. Yog li ntawd, koj yuav tsum ib txwm ntxiv tabindex="-1"rau cov neeg xiam oob khab txuas thiab siv kev cai JavaScript kom ua tiav lawv cov haujlwm.

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

Koj tuaj yeem xaiv hloov pauv cov khoom siv lossis cov neeg xiam oob khab rau <span>, lossis tshem lub thauj tog rau nkoj nyob rau hauv rooj plaub ntawm cov xub ua ntej / tom ntej, kom tshem tawm cov nyem ua haujlwm thiab tiv thaiv cov keyboard tsom thaum khaws cov hom phiaj.

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

Qhov loj me

Xav kom loj dua lossis me dua pagination? Ntxiv .pagination-lglossis .pagination-smrau qhov ntau thiab tsawg.

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

Kev sib tw

Hloov cov kev sib raug zoo ntawm pagination Cheebtsam nrog flexbox 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>