W3.CSS Panele

Ek is 'n paneel.

Ek is 'n paneel.

Ek is 'n houer.

Ek is 'n houer.


Die Paneelklas

Die w3-paneelklas voeg 'n 16px boonste en onderste marge en 'n 16px linker- en regtervulling by enige HTML-element.

Voorbeeld

<div class="w3-panel w3-red">
  <p>I am a panel.</p>
</div> 

Panele vir notas

Die w3-paneelklas is perfek om notas te vertoon.

Notas word dikwels met 'n ligte kleur vertoon:

Londen is die mees bevolkte stad in die Verenigde Koninkryk, met 'n metropolitaanse gebied van meer as 9 miljoen inwoners.

Voorbeeld

<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>

Om meer te wete te kom oor W3.CSS Notes, besoek asseblief die W3.CSS Notes hoofstuk.



Panele vir kwotasies

Die w3-paneelklas is perfek om aanhalings te vertoon.

"Maak dit so eenvoudig as moontlik, maar nie eenvoudiger nie."

Voorbeeld

<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> 

Om meer te wete te kom oor W3.CSS Quotes, besoek asseblief die W3.CSS Quotes hoofstuk.


Panele vir waarskuwings

Die w3-paneelklas is perfek om waarskuwings te vertoon.

Waarskuwings word dikwels met 'n sterk kleur vertoon:

Gevaar!

Rooi dui dikwels op 'n gevaarlike of negatiewe situasie.

Voorbeeld

<div class="w3-panel w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div>

Om meer te wete te kom oor W3.CSS Alerts, besoek asseblief die W3.CSS Alerts hoofstuk.


Panele as kaarte

Londen is die mees bevolkte stad in die Verenigde Koninkryk, met 'n metropolitaanse gebied van meer as 9 miljoen inwoners.

Voorbeeld

<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>

Geronde panele

Londen is die mees bevolkte stad in die Verenigde Koninkryk, met 'n metropolitaanse gebied van meer as 9 miljoen inwoners.

Voorbeeld

<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>

Versteek (maak toe) 'n paneel

Om 'n paneel weg te steek is maklik.

×

Klik op die X om hierdie paneel toe te maak.

Klik op die X om hierdie paneel toe te maak.

Voorbeeld

<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>

Wys (maak oop) 'n paneel

Om ('n versteekte) paneel te wys is maklik:

Voorbeeld

<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>