BS5 sahifalash (pagination)
Oddiy sahifalash (pagination)
Agar saytingizda sahifalar ko‘p bo‘lsa, har bir sahifaga qandaydir sahifalash (pagination) qo‘shishni xohlashingiz mumkin.
Oddiy sahifalash yaratish uchun <ul> elementiga .pagination klassini qo‘shing. So‘ngra har bir <li> elementiga .page-item klassini, <li> ichidagi har bir havolaga esa .page-link klassini qo‘shing:
Misol
<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>
O‘zingiz sinab ko‘ring »
Faol holat
.active klassi joriy sahifani "ajratib ko‘rsatish" uchun ishlatiladi:
Misol
<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 active"><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>
O‘zingiz sinab ko‘ring »
Nofaol holat
.disabled klassi bosib bo‘lmaydigan havolalar uchun ishlatiladi:
Misol
<ul class="pagination">
<li class="page-item disabled"><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>
O‘zingiz sinab ko‘ring »
Sahifalash o‘lchami
Sahifalash bloklarini kattaroq yoki kichikroq o‘lchamda ham qilish mumkin:
Kattaroq bloklar uchun .pagination-lg klassini, kichikroq bloklar uchun esa .pagination-sm klassini qo‘shing:
Misol
<ul class="pagination pagination-lg">
<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>
<ul class="pagination pagination-sm">
<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>
O‘zingiz sinab ko‘ring »
Sahifalashni tekislash
Sahifalashning tekislanishini o‘zgartirish uchun yordamchi klasslardan foydalaning:
Misol
<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
O‘zingiz sinab ko‘ring »
Breadcrumbs (navigatsiya yo‘li)
Sahifalashning yana bir ko‘rinishi — breadcrumbs (navigatsiya yo‘li):
.breadcrumb va .breadcrumb-item klasslari joriy sahifaning navigatsiya iyerarxiyasidagi o‘rnini ko‘rsatadi:
Misol
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!