Yardımcı Sınıflar
W3.CSS çoğu dolgu, kenar, boyut ve konum temin yardımcı sınıflar üzerine kuruludur.
Dolgu Sınıflar
w3-padding- size sınıfları herhangi bir HTML öğesine dolgu ekler:
w3-padding-jumbo sınıf 32px üst ekler ve alt ve 64px sol ve sağ.
w3-padding-XXLarge sınıfı 24px üst ekler ve alt ve 48px sol ve sağ.
w3-padding-xlarge sınıfı 16px üst ekler ve alt ve 32px sol ve sağ.
w3-padding-büyük sınıf 12px üst ekler ve alt ve 24px sol ve sağ.
w3-padding-orta sınıf 8px üst ve alt ve 16px sol ve sağ ekler.
w3-padding-küçük sınıf 4 piksel üst ve alt sol 8px ve sağ ekler.
w3-padding-minik sınıf 2px üst ve alt sol 4px ve sağ ekler.
Örnek
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
Kendin dene " w3-padding-hor- number sınıfları yatay ekler (top and bottom) herhangi bir HTML elemanına dolgu:
w3-padding-hor-4 sınıfı 4 piksel üst ve alt dolgu ekler.
w3-padding-hor-8 sınıf 8px üst ve alt dolgu ekler.
w3-padding-hor-16 sınıfı 16px üst ve alt dolgu ekler.
w3-padding-hor-32 sınıfı 32px üst ve alt dolgu ekler.
w3-padding-hor-64 sınıfı 64px üst ve alt dolgu ekler.
Örnek
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
Kendin dene " w3-padding-ver- number sınıfları herhangi bir HTML öğesine dikey (sol ve sağ) dolgu ekler:
w3-padding-ver-4 sınıfı 4 piksel sol ve sağ doldurma ekler.
w3-padding-ver-8 sınıf 8px sol ve sağ doldurma ekler.
w3-padding-ver-16 sınıfı 16x sol ve sağ doldurma ekler.
w3-padding-ver-32 sınıfı 32px sol ve sağ doldurma ekler.
w3-padding-hor-48 sınıfı 64px sol ve sağ doldurma ekler.
Örnek
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
Kendin dene " Marj Sınıflar
w3-margin sınıfları bir öğeye marjlarını ekleyin:
w3 marjlı sınıfı bir elementin tüm taraflara 16px marjı ekler.
w3 marjlı dipli sınıfı, bir elemanın bir 16px alt kenar ekler.
w3-margin-left sınıf bir elemana marjı sol 16px ekler.
w3-margin-right sınıf bir öğeye bir 16px sağ kenar boşluğu ekler.
w3-margin-üst sınıf bir öğeye bir 16px üst kenar boşluğu ekler.
Sınıfları Haşıl
W3- boyut sınıfı, bir elemanın yazı tipi boyutunu değiştirir:
Ben küçücük ediyorum (using w3-tiny)
Ben küçük değilim (using w3-small)
Ben orta değilim. Varsayılan.
Ben büyük kulüpler (using w3-large)
Ben xlarge değilim (using w3-xlarge)
Örnek
<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm
large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using
w3-xlarge)</p> Kendin dene " Sen bölümde sınıfları boyutlandırma hakkında daha fazla bilgi bulabilirsiniz W3.CSS Tipografi .
Sınıfları Yuvarlama
W3-kişilik gidiş boyut sınıfı bir elemana sınırları yuvarlak ekler:
Örnek
<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
Kendin dene " Çember Sınıf
Merkezi Sınıfı
W3-merkezi sınıfı bir eleman merkezleri
Örnek
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> Kendin dene " Sınıfları Yüzer
W3-sola sınıf sola bir eleman, w3 sağ sınıf sağa bir öğe yüzer yüzer:
Örnek
<div class="w3-container w3-light-grey">
<div class="w3-left
w3-red">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div> Kendin dene " Göster / Gizle Sınıflar
W3-saklambaç küçük | orta | büyük sınıf belirli bir ekran boyutuna unsurunu gizler.
Not: nasıl çalıştığını anlamak için tarayıcı penceresini yeniden boyutlandırma:
Örnek
<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden
on large screens (laptop/desktop)</p> Kendin dene "