Bootstrap - Sayfalandırma

Bu bölümde, Bootstrap'in desteklediği sayfalandırma özelliği anlatılmaktadır. Sayfalandırma, sıralanmamış bir liste, diğer birçok arayüz öğesi gibi Bootstrap tarafından yönetilir.

Sayfalandırma

Aşağıdaki tablo, Bootstrap'in sayfalandırmayı işlemek için sağladığı sınıfları listeler.

Sınıf Açıklama Basit kod
.pagination Sayfanıza sayfalandırmak için bu sınıfı ekleyin.
<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>
.disabled, .active Bağlantıları kullanarak özelleştirebilirsiniz .disabled tıklanamayan bağlantılar için ve .active mevcut sayfayı belirtmek için.
<ul class = "pagination">
   <li class = "disabled"><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>
   .......
</ul>
.pagination-lg, .pagination-sm Farklı boyutta öğeler elde etmek için bu sınıfları kullanın.
<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

Varsayılan Sayfalandırma

Aşağıdaki örnek, sınıfın kullanımını gösterir .pagination yukarıdaki tabloda tartışılmıştır -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

Eyaletler

Aşağıdaki örnek, sınıfın kullanımını gösterir .disabled, .active yukarıdaki tabloda tartışılmıştır -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1</a></li>
   <li class = "disabled"><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

Boyutlandırma

Aşağıdaki örnek, boyutlandırma için sınıfların kullanımını gösterir, .pagination-* yukarıdaki tabloda tartışılmıştır -

<ul class = "pagination pagination-lg">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination pagination-sm">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

Çağrı cihazı

Metnin ötesine geçen basit sayfalandırma bağlantıları oluşturmanız gerekirse, çağrı cihazı oldukça iyi çalışabilir. Sayfalandırma bağlantıları gibi, sayfalayıcı da sırasız bir listedir. Varsayılan olarak bağlantılar ortalanmıştır. Aşağıdaki tablo Bootstrap'in çağrı cihazı için sağladığı sınıfları listeler.

Sınıf Açıklama Basit kod
.çağrı cihazı Çağrı cihazı bağlantılarını almak için bu sınıfı ekleyin.
<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>
.Önceki Sonraki Sınıfı kullan .previous sola hizalayın ve .next bağlantıları sağa hizalamak için.
<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>
.disabled Sessiz bir görünüm elde etmek için bu sınıfı ekleyin.
<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Varsayılan Çağrı Cihazı

Aşağıdaki örnek, sınıfın kullanımını gösterir .pager yukarıdaki tabloda tartışılmıştır -

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

Hizalanmış Bağlantılar

Aşağıdaki örnek, hizalama için sınıfların kullanımını gösterir, .previous, .next yukarıdaki tabloda tartışılmıştır -

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Eyaletler

Aşağıdaki örnek, sınıfın kullanımını gösterir .disabled yukarıdaki tabloda tartışılmıştır -

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>