Bootstrap 4 Sayfalandırma
Temel Sayfalandırma
Çok sayıda sayfası olan bir web siteniz varsa, her sayfaya bir çeşit sayfa numarası eklemek isteyebilirsiniz.
Temel bir sayfalandırma oluşturmak için .paginationsınıfı bir <ul>öğeye ekleyin. Ardından .page-item, her <li>öğeye ve .page-linkiçindeki her bağlantıya bir sınıf ekleyin <li>:
Örnek
<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>
Aktif Durum
Sınıf .active, geçerli sayfayı "vurgulamak" için kullanılır:
Örnek
<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>
Engelli Devlet
Sınıf .disabled, tıklanamayan bağlantılar için kullanılır:
Örnek
<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>
Sayfalandırma Boyutlandırma
Sayfalandırma blokları ayrıca daha büyük veya daha küçük bir boyuta göre boyutlandırılabilir:
.pagination-lgDaha büyük bloklar veya .pagination-smdaha küçük bloklar için sınıf ekleyin :
Örnek
<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>
Sayfalandırma Hizalama
Sayfalandırmanın hizalamasını değiştirmek için yardımcı program sınıflarını kullanın:
Örnek
<!-- 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>
İpucu: BS4 Utilities Bölümümüzde Bootstrap 4 Utility/Helper sınıfları hakkında daha fazla bilgi edinin .
Galeta unu
Sayfalandırmanın başka bir biçimi de kırıntılardır:
ve sınıfları .breadcrumb, .breadcrumb-item
geçerli sayfanın bir gezinme hiyerarşisi içindeki konumunu belirtir:
Örnek
<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>