W3.CSS- panelen
Ik ben een paneel.
Ik ben een paneel.
Ik ben een container.
Ik ben een container.
De paneelklasse
De klasse w3-panel voegt een boven- en ondermarge van 16px en een linker- en rechteropvulling van 16px toe aan elk HTML-element.
Voorbeeld
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
Panelen voor notities
De klasse w3-panel is perfect voor het weergeven van notities.
Notities worden vaak weergegeven met een bleke kleur:
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 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>
Ga voor meer informatie over W3.CSS Notes naar het hoofdstuk W3.CSS Notes .
Panelen voor offertes
De klasse w3-panel is perfect voor het weergeven van aanhalingstekens.
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>
Ga naar het hoofdstuk W3.CSS Quotes voor meer informatie over W3.CSS Quotes .
Panelen voor waarschuwingen
De klasse w3-panel is perfect voor het weergeven van waarschuwingen.
Waarschuwingen worden vaak weergegeven met een sterke kleur:
Gevaar!
Rood duidt vaak op een gevaarlijke of negatieve situatie.
Voorbeeld
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
Ga voor meer informatie over W3.CSS-waarschuwingen naar het hoofdstuk W3.CSS-waarschuwingen .
Panelen als kaarten
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 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>
Afgeronde panelen
Londen is de dichtstbevolkte stad van het Verenigd Koninkrijk, met een grootstedelijk gebied van meer dan 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>
Een paneel verbergen (sluiten)
Een paneel verbergen is eenvoudig.
Klik op de X om dit paneel te sluiten.
Klik op de X om dit paneel te sluiten.
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>
Een paneel weergeven (openen)
Het tonen van (een verborgen) paneel is eenvoudig:
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>