Bootstrap 4 Sayfalama (Pagınatıon)

Bootstrap 4 Sayfalama(Pagination)

Sayfalama yapmak için listeleme etiketlerinden(ul ve li) etiketlerinden yararlanılır.
ul elemanına pagination class özelliği, içteki li elemanlarına page-item ve linkler için de page-link özellikleri verilmelidir.
Örnek : <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Önceki Sayfa</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="#">Sonraki Sayfa</a></li> </ul>

Pasif ve Aktif Durumları

Sayfalama işlemlerinde zaman zaman bazı sayfa butonlarının pasif olması gerekebilir.(İlk sayfada iken önceki sayfa düğmesinin pasif olması gibi) Bu tip durumlarda pasif olan nesneye(li elemanına) disabled class özelliği vermek yeterlidir.
Bulunduğumuz sayfayı(aktif olan sayfa) sayfalama içerisinde göstermek için de istenilen sayfaya(li elemanına) active özelliği verilmelidir.

Hizalama ve Büyüklük

Pagination elemanlarımızın sayfa içerisindeki konumlarındanı belirlemek için ul elemanına aşağıdaki özelliklerden birinin verilmesi gerekir.
Pagination'ın sayfanın solunda olması için => justify-content-start
Pagination'ın sayfanın ortasında olması için => justify-content-center
Pagination'ın sayfanın sağında olması için => justify-content-end

Pagination nesnesine 2 farklı büyüklük değeri verilerek nesne boyutlarını değiştirmek mümkündür. Bunun için ul nesnesine .pagination-lg veya .pagination-sm değerleri eklenmelidir.

Bootstrap4 Adres(Breadcrumb)

Bootstrap4'te içinde bulunulan adresler için breadcrumb adı verilen yapılar bulunmaktadır. Aynı sayfalama özellikleri gibi adresler için de ul ve li elemanları kullanılır. Aralarındaki fark ul elemanlarına breadcrumb ve li elemanlarına breadcrumb-item classs değerleri verilmesidir.
Örnek:<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Fotoğraflar</a></li> <li class="breadcrumb-item"><a href="#">Yaz Fotoğrafları</a></li> <li class="breadcrumb-item"><a href="#">Eskişehir</a></li> <li class="breadcrumb-item active">Odun Pazarı</li> </ul>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın