Source

Pagination

Dukumeentiyada iyo tusaalooyinka 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 taageero akhristaha shaashadda habboon oo leh ariasifooyin.

<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>
      </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>
      </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" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <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" aria-current="page">
      <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 active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </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 active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </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" aria-disabled="true">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" aria-disabled="true">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>