W3.CSS Paginations
sayfalar dolu bir web siteniz varsa, her sayfaya pagination çeşit katmak isteyebilirsiniz:
Temel sayfalandırmayı
Bir üzere w3 sayfalama sınıfını ekleyin temel sayfalama oluşturmak için <ul> elemanı:
Örnek
<ul class="w3-pagination">
<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>
</ul> Kendin dene " Sayfalara ayırma Oklar
sayfalandırma okları eklemek için bir simge kitaplığından HTML öğelerini veya simgeleri kullanın:
Örnek
<ul class="w3-pagination">
<li><a href="#">«</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="#">»</a></li>
</ul> Kendin dene " Aktif / Akım Bağlantı
Kullanıcının hangi sayfa belirtmek için w3- renk sınıflarından birini kullanın:
Örnek
<ul class="w3-pagination">
<li><a href="#">«</a></li>
<li><a
class="w3-green" 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="#">»</a></li>
</ul> Kendin dene " Vurgusu Rengi
Eğer sayfa bağlantıları üzerinde fareyi hareket Varsayılan olarak, onlar gri bir arka plan rengi olsun. Vurgulu rengini değiştirmek için w3-hover- renk sınıfları herhangi birini kullanın:
Örnek
<ul class="w3-pagination">
<li><a href="#"
class="w3-hover-purple">«</a></li>
<li><a href="#"
class="w3-hover-green">1</a></li>
<li><a href="#"
class="w3-hover-red">2</a></li>
<li><a href="#"
class="w3-hover-blue">3</a></li>
<li><a href="#"
class="w3-hover-black">4</a></li>
<li><a href="#"
class="w3-hover-orange">»</a></li>
</ul> Kendin dene " Sayfalandırma Boyutlandırma
W3-minik,-w3 küçük w3-büyük, w3-xlarge, w3-XXLarge veya boyutuna sayfalandırma için w3-xxxlarge kullanın:
Bordürlü sayfalandırmayı
Sınırlara sahip pagination oluşturmak için w3 ötesi sınıfını ekleyin:
Yuvarlak Sınırlar
Yuvarlak sınırları için w3-sınırına yakın w3-yuvarlak sınıfını ekleyin:
ortalanmış Sayfalandırma
Bir sarın, sayfa numaralarını ortalamak için <div> class = "w3-merkez" ile eleman etrafında <ul> :
Diğer Sayfalama Örnekler
Önceki / önceki Örnek
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
Previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul> Kendin dene " Menu Örneği
<ul class="w3-pagination w3-border">
<li><a href="#"
class="w3-light-grey">Home</a></li>
<li><a href="#">Link
1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link
3</a></li>
</ul> Kendin dene "