W3.CSS Sayfalandırma
Temel Sayfalandırma
Çok sayfalı bir web siteniz varsa, bir tür sayfalandırma kullanmak isteyebilirsiniz.
Temel bir sayfalandırma oluşturmak için , bir çubukta ( w3-bar ) düğmeleri ( w3-button ) kullanın .
Örnek
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#"
class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
Düğmeler arasındaki boşluğu kaldırmak için bir w3-bar-item sınıfı ekleyin:
Örnek
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Sayfalandırma Okları
Sayfalandırma okları eklemek için bir simge kitaplığındaki HTML varlıklarını veya simgelerini kullanın:
Örnek
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Aktif/Mevcut Bağlantı
Kullanıcının hangi sayfada olduğunu belirtmek için w3- renk sınıflarından birini kullanın :
Örnek
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
vurgulu renk
Varsayılan olarak, fareyi sayfalandırma bağlantılarının üzerine getirdiğinizde gri bir arka plan rengi alırlar. Fareyle üzerine gelme rengini değiştirmek için w3- hover- color sınıflarından herhangi birini kullanın :
Örnek
<div class="w3-bar">
<a href="#"
class="w3-button w3-hover-purple">«</a>
<a
href="#" class="w3-button w3-hover-green">1</a>
<a href="#"
class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button
w3-hover-blue">3</a>
<a href="#"
class="w3-button w3-hover-black">4</a>
<a href="#"
class="w3-button w3-hover-orange">»</a>
</div>
Sayfalandırma Boyutlandırma
Sayfalandırmayı boyutlandırmak için w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge veya w3-xxxlarge kullanın:
Örnek
<div class="w3-bar
w3-xlarge">
Merkezli Sayfalandırma
Sayfalandırmayı ortalamak için "w3-bar" öğesini bir "w3-center" öğesinin içine koyun:
Örnek
<div class="w3-center">
<div class="w3-bar">
<a href="#"
class="w3-bar-item w3-button">«</a>
<a href="#"
class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#"
class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
</div>
Kenarlı Sayfalandırma
Kenarlıklı bir sayfalandırma oluşturmak için w3-border sınıfını ekleyin :
Örnek
<div class="w3-bar
w3-border">
Yuvarlak Kenarlıklar
Yuvarlak kenarlıklar için w3-border'ın yanına w3-round sınıfını ekleyin :
Örnek
<div class="w3-bar
w3-border w3-round">
Diğer Sayfalandırma Örnekleri
w3-bar sınıfı, sonraki/önceki düğmeleri oluşturmak için de kullanılabilir:
Sonraki/önceki Örnek
<div class="w3-bar w3-border w3-round">
<a href="#"
class="w3-button">❮ Previous</a>
<a href="#" class="w3-button
w3-right">Next ❯</a>
</div>
Satır İçi Menü Örneği
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>