W3.CSS Uyarıları
w3-panel sınıfı , her tür uyarıyı görüntülemek için mükemmel bir sınıftır:
Tehlike!
Kırmızı genellikle tehlikeli veya olumsuz bir durumu gösterir.
Uyarılar genellikle güçlü bir renk kullanılarak görüntülenir:
Tehlike!
Kırmızı genellikle tehlikeli veya olumsuz bir durumu gösterir.
Örnek
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Uyarıları Görüntüle
Uyarı!
Sarı, genellikle dikkat edilmesi gerekebilecek bir uyarıyı belirtir.
Uyarı!
Sarı, genellikle dikkat edilmesi gerekebilecek bir uyarıyı belirtir.
Örnek
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Başarıları Görüntüle
Başarı!
Yeşil genellikle başarılı veya olumlu bir şeyi gösterir.
Başarı!
Yeşil genellikle başarılı veya olumlu bir şeyi gösterir.
Örnek
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Görüntüleme Bilgileri
Bilgi!
Mavi genellikle tarafsız bir bilgi değişikliği veya eylemi gösterir.
Bilgi!
Mavi genellikle tarafsız bir bilgi değişikliği veya eylemi gösterir.
Örnek
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
Kapsayıcı Kullanmak
w3-container sınıfı , uyarıları görüntülemek için de kullanılabilir:
Örnek
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Tüm Renklerde Uyarılar
Uyarılar genellikle özel renklerde görüntülenir, ancak herhangi bir renk kullanılabilir:
Tehlike!
Kırmızı genellikle tehlikeli veya olumsuz bir durumu gösterir.
Tehlike!
Kırmızı genellikle tehlikeli veya olumsuz bir durumu gösterir.
Tehlike!
Kırmızı genellikle tehlikeli veya olumsuz bir durumu gösterir.
Tehlike!
Kırmızı genellikle tehlikeli veya olumsuz bir durumu gösterir.
Tehlike!
Kırmızı genellikle tehlikeli veya olumsuz bir durumu gösterir.
Örnek
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Kapanış Uyarıları
Uyarı kutusunu kapatmak için sağ üst köşedeki X'e tıklayın:
Tehlike!
Kırmızı genellikle tehlikeli veya olumsuz bir durumu gösterir.
Uyarıyı kapatan X'i oluşturmak için, w3-button sınıfına sahip bir <span> öğesi ve bir onclick olayı ekleyin:
Örnek
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
İpucu: HTML × varlık, kapatma düğmeleri için tercih edilen simgedir ("X" harfi yerine).
Yuvarlak Uyarılar
Yuvarlatılmış köşeler istiyorsanız , w3-round sınıflarını kullanın :
Başarı!
Burada w3-yuvarlak kullanılır.
Başarı!
Burada w3-yuvarlak-büyük kullanılır.
Başarı!
Burada w3-round-xxlarge kullanılır.
Örnek
<div class="w3-panel w3-green w3-round">
Kart Olarak Uyarı
Uyarının bir kart olarak görüntülenmesini istiyorsanız, bir w3-card sınıfı kullanın:
Uyarı!
Sarı genellikle dikkat edilmesi gereken bir şeyi gösterir.
Örnek
<div class="w3-panel w3-yellow w3-card-4">