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.

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 = "#">«</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 = "#">«</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>`

<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.

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 = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</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 = "#">← Older</a></li> <li class = "next"><a href = "#">Newer →</a></li> </ul>`

<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>