Source

Pagination

Dukumeenti iyo tusaalooyin muujinta bogga si ay u muujiyaan taxane taxane ah oo la xidhiidha ayaa ka jira bogag badan.

Dulmar

Waxaanu u isticmaalnaa xidhidhisyo badan oo isku xidhan si aanu u dhigno boggayaga, samaynta isku xidhka adag in la seego oo si fudud loo cabbiri karo—dhammaan annaga oo bixinayna meelo badan oo la garaacay. Pagination waxaa lagu dhisay liiska HTML si ay akhristayaasha shaashadu ugu dhawaaqaan tirada xiriiriyeyaasha la heli karo. Isticmaal walxaha duuban <nav>si aad u aqoonsato inay tahay qayb hagitaan si aad u baadho akhristayaasha iyo tignoolajiyada kale ee caawinta.

Intaa waxa dheer, maadaama ay u badan tahay in bogaggu leeyihiin wax ka badan hal qayb oo ka mid ah qaybta hagidda, waxa lagu talinayaa in la bixiyo sharraxaad aria-labelsi <nav>ay uga tarjumayso ujeeddadeeda. Tusaale ahaan, haddii qaybta pagination-ka loo isticmaalo in lagu dhex maro natiijooyinka raadinta, calaamad ku habboon waxay noqon kartaa 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>

La shaqaynta calaamadaha

Ma waxaad raadineysaa inaad u isticmaasho summada ama calaamadda meesha qoraalka ee xiriirinta boggaga qaarkood? Hubi inaad bixiso taageerada akhristaha shaashadda saxda ah oo leh ariasifooyin iyo .sr-onlyutility.

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

Naafada iyo gobolada firfircoon

Xidhiidhiyayaasha boggaga ayaa lagu beddeli karaa xaalado kala duwan. Isticmaal .disabledxiriiriyeyaasha u muuqda mid aan la gujin karin iyo .activesi aad u muujiso bogga hadda jira.

Iyadoo .disabledfasalka uu isticmaalo pointer-events: noneinuu isku dayo inuu joojiyo shaqada isku xirka ee <a>s, hantida CSS weli lama jaanqaadin oo kuma xisaabtamayso socodka kiiboodhka. Sidan oo kale, waa inaad had iyo jeer tabindex="-1"ku darto xiriiriyeyaasha naafada ah oo aad isticmaashaa JavaScript-ka caadiga ah si aad si buuxda u baabi'iso shaqadooda.

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

Waxaad si ikhtiyaari ah u beddeli kartaa barroosinnada firfircoon ama kuwa naafada ah <span>, ama waxaad ka tagi kartaa barroosinka xaaladda fallaadhihii hore/xiga, si aad meesha uga saarto shaqeynta gujinta oo aad uga hortagto diiradda kiiboodhka iyadoo la ilaalinayo qaababka loogu talagalay.

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

Cabbirka

Ma jeceshahay bogag ka weyn ama ka yar? Ku dar .pagination-lgama .pagination-smcabbiro dheeraad ah.

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

Toosin

Beddel toosinta qaybaha pagination-ka oo leh yutiilitida flexbox .

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