W3.CSS- Warnungen
Die Klasse w3-panel ist die perfekte Klasse, um alle Arten von Warnungen anzuzeigen:
Achtung!
Rot weist oft auf eine gefährliche oder negative Situation hin.
Warnungen werden oft mit einer kräftigen Farbe angezeigt:
Achtung!
Rot weist oft auf eine gefährliche oder negative Situation hin.
Beispiel
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Warnungen anzeigen
Warnung!
Gelb weist oft auf eine Warnung hin, die möglicherweise beachtet werden muss.
Warnung!
Gelb weist oft auf eine Warnung hin, die möglicherweise beachtet werden muss.
Beispiel
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Erfolge anzeigen
Erfolg!
Grün weist oft auf etwas Erfolgreiches oder Positives hin.
Erfolg!
Grün weist oft auf etwas Erfolgreiches oder Positives hin.
Beispiel
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Informationen anzeigen
Die Info!
Blau zeigt oft eine neutrale informative Änderung oder Aktion an.
Die Info!
Blau zeigt oft eine neutrale informative Änderung oder Aktion an.
Beispiel
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
Verwenden eines Containers
Die w3-Container- Klasse kann auch verwendet werden, um Warnungen anzuzeigen:
Beispiel
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Warnungen in allen Farben
Warnungen werden oft in speziellen Farben angezeigt, aber jede Farbe kann verwendet werden:
Achtung!
Rot weist oft auf eine gefährliche oder negative Situation hin.
Achtung!
Rot weist oft auf eine gefährliche oder negative Situation hin.
Achtung!
Rot weist oft auf eine gefährliche oder negative Situation hin.
Achtung!
Rot weist oft auf eine gefährliche oder negative Situation hin.
Achtung!
Rot weist oft auf eine gefährliche oder negative Situation hin.
Beispiel
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Schließende Warnungen
Um das Warnfenster zu schließen, klicken Sie auf das X in der oberen rechten Ecke:
Achtung!
Rot weist oft auf eine gefährliche oder negative Situation hin.
Um das X zu erstellen, das die Warnung schließt, fügen Sie ein <span>-Element mit der Klasse w3-button und einem onclick - Ereignis hinzu:
Beispiel
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Tipp: Das HTML × Entität ist das bevorzugte Symbol für Schließen-Schaltflächen (und nicht der Buchstabe "X").
Abgerundete Warnungen
Verwenden Sie die w3-Round- Klassen, wenn Sie abgerundete Ecken wünschen:
Erfolg!
Hier wird w3-Runde verwendet.
Erfolg!
Hier wird w3-round-large verwendet.
Erfolg!
Hier wird w3-round-xxlarge verwendet.
Beispiel
<div class="w3-panel w3-green w3-round">
Warnung als Karte
Verwenden Sie eine w3-Kartenklasse, wenn die Warnung als Karte angezeigt werden soll:
Warnung!
Gelb weist oft auf etwas hin, das Aufmerksamkeit erfordert.
Beispiel
<div class="w3-panel w3-yellow w3-card-4">