BOOTSTRAP 4 – PAGINATION (SAYFALAMA BUTONLARI)

Fauda · 3 Tem 2021

Öncelikle sayfalama butonlarına neden ihtiyaç duyuyoruz biraz ondan bahsedelim. Örneğin bir blog sitesi ve içerisinde yüzlerce yazı olduğunu düşünelim. Tüm bu yazıları anasayfada listelersek sayfa aşağı doğru baya uzayacaktır. Yada bir ETicaret sitesinde ürünlerin listelendiğini düşünün. Yine aynı mantıkla ürünlerin tek sayfada listelenmesi hem tasarım hem de performans açısından doğru bir yöntem değildir. İşte bu yüzden pagination yani sayfalama butonları kullanılır. Bootstrap pagination class’larını kullanarak çok kısa sürede sade ve şık sayfalama butonları yapabiliriz.

Css kodu yazarak da istediğimiz sayfalama butonlarını oluşturabiliriz ama zamandan kazanmak adına kesinlikle Bootstrap framework’ünü kullanmanızı tavsiye ederim. Bu yazımızda da zaten bootstrap class’larını kullanarak nasıl pagination yapabiliriz onu öğreneceğiz.

⇒ Bootstrap pagination oluşturmak için yapmamız gerekenler:

Öncelikle bir <ul> etiketi oluşturup class’ına pagination yazıyoruz.
Oluşturmak istediğimiz herbir buton için <ul> içerisinde bir <li> etiketi oluşturup class’ına page-item yazıyoruz.
Son olarak herbir <li> içerisinde bir <a> etiketi oluşturup class’ına page-link yazıyoruz.

⇒ Şimdi en basit haliyle bir pagination oluşturup uygulamalı olarak görelim. Kodlarımız şu şekilde;

1
2
3
4
5
6
7
8
9

<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Önceki</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</a></li>
</ul>

Görünümü
Gördüğünüz gibi oluşturduğumuz Html etiketlerine birkaç class yazarak hızlı bir şekilde pagination oluşturabiliyoruz.
⇒ Aktif olan butonu belirgin hale getirmek için, ona ait <li> etiketinin class’ına active yazılır. Örneğin 1 numaralı butonu aktif görünümlü hale getirelim. Kodlarımız şu şekilde;

1
2
3
4
5
6
7
8
9

<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Önceki</a></li>
<li class="page-item active"><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</a></li>
</ul>

Görünümü
⇒ <ul> etiketlerine bazı class’ları yazarak butonların boyutunu değiştirebiliriz. Örneğin;

pagination-sm class’ını yazarak butonları küçültebiliriz.
pagination-lg class’ını yazarak butonları büyültebiliriz.

Bunları da örnek üzerinde görelim. Kodlarımız şu şekilde;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">Önceki</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</a></li>
</ul>

<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">Önceki</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</a></li>
</ul>

Görünümü
⇒ Pagination varsayılan olarak sola dayalı bir şekilde oluşur. Bunun yatayda ortalanması veya sağa dayalı olmasını istiyorsanız <ul> etiketlerine bazı class’ları yazarak yapabilirsiniz. Örneğin;

justify-content-end class’ını yazarak sağa dayalı yapabiliriz.
justify-content-center class’ını yazarak yatayda ortalayabiliriz.

Bunları da örnek üzerinde görelim. Kodlarımız şu şekilde;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">Önceki</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</a></li>
</ul>

<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">Önceki</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</a></li>
</ul>

Görünümü
Umarım sizin için faydalı bir yazı olmuştur.
Farklı bir yazımda görüşmek üzere.