W3.CSS Panelleri
ben bir panelim
ben bir panelim
Ben bir konteynerim.
Ben bir konteynerim.
Panel Sınıfı
w3-panel sınıfı , herhangi bir HTML öğesine 16 piksel üst ve alt kenar boşluğu ve 16 piksel sol ve sağ dolgu ekler.
Örnek
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
Notlar için Paneller
w3-panel sınıfı , notları görüntülemek için mükemmeldir.
Notlar genellikle soluk bir renkle görüntülenir:
Londra, 9 milyonu aşan metropol alanıyla Birleşik Krallık'ın en kalabalık şehridir.
Örnek
<div class="w3-panel w3-pale-green">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
W3.CSS Notları hakkında daha fazla bilgi edinmek için lütfen W3.CSS Notları bölümünü ziyaret edin.
Alıntılar için Paneller
w3-panel sınıfı , alıntıları görüntülemek için mükemmeldir.
Örnek
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
W3.CSS Alıntıları hakkında daha fazla bilgi edinmek için lütfen W3.CSS Alıntıları bölümünü ziyaret edin.
Uyarılar için Paneller
w3-panel sınıfı , uyarıları görüntülemek için mükemmeldir.
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>
W3.CSS Uyarıları hakkında daha fazla bilgi edinmek için lütfen W3.CSS Uyarıları bölümünü ziyaret edin.
Kart Olarak Paneller
Londra, 9 milyonu aşan metropol alanıyla Birleşik Krallık'ın en kalabalık şehridir.
Örnek
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Yuvarlak Paneller
Londra, 9 milyonu aşan metropol alanıyla Birleşik Krallık'ın en kalabalık şehridir.
Örnek
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with
a metropolitan area of over 9 million inhabitants.</p>
</div>
Paneli Gizle (Kapat)
Bir paneli gizlemek kolaydır.
Bu paneli kapatmak için X'e tıklayın.
Bu paneli kapatmak için X'e tıklayın.
Örnek
<div class="w3-panel
w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
Bir Paneli Göster (Aç)
(Gizli) bir paneli göstermek kolaydır:
Örnek
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show
panel</button>
<div id="id01" class="w3-panel w3-green
w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>