Panely W3.CSS
Jsem panelák.
Jsem panelák.
Jsem kontejner.
Jsem kontejner.
Třída Panel
Třída w3-panel přidává 16px horní a spodní okraj a 16px levé a pravé odsazení k jakémukoli HTML prvku.
Příklad
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
Panely pro poznámky
Třída w3-panel je ideální pro zobrazování poznámek.
Poznámky se často zobrazují bledou barvou:
Londýn je nejlidnatější město Spojeného království s metropolitní oblastí s více než 9 miliony obyvatel.
Příklad
<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>
Chcete-li se dozvědět více o W3.CSS Notes, navštivte prosím kapitolu W3.CSS Notes .
Panely pro nabídky
Třída w3-panel je ideální pro zobrazování nabídek.
Příklad
<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>
Chcete-li se dozvědět více o W3.CSS Quotes, navštivte prosím kapitolu W3.CSS Quotes .
Panely pro upozornění
Třída w3-panel je ideální pro zobrazování upozornění.
Upozornění se často zobrazují pomocí výrazných barev:
Nebezpečí!
Červená často označuje nebezpečnou nebo negativní situaci.
Příklad
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
Chcete-li se dozvědět více o W3.CSS Alerts, navštivte prosím kapitolu W3.CSS Alerts .
Panely jako karty
Londýn je nejlidnatější město Spojeného království s metropolitní oblastí s více než 9 miliony obyvatel.
Příklad
<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>
Zaoblené panely
Londýn je nejlidnatější město Spojeného království s metropolitní oblastí s více než 9 miliony obyvatel.
Příklad
<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>
Skrýt (Zavřít) panel
Skrytí panelu je snadné.
Klepnutím na X tento panel zavřete.
Klepnutím na X tento panel zavřete.
Příklad
<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>
Zobrazit (otevřít) panel
Zobrazení (skrytého) panelu je snadné:
Příklad
<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>