Panneaux W3.CSS
Je suis un panneau.
Je suis un panneau.
Je suis un conteneur.
Je suis un conteneur.
La classe de panneaux
La classe w3-panel ajoute une marge supérieure et inférieure de 16 pixels et un rembourrage gauche et droit de 16 pixels à tout élément HTML.
Exemple
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
Panneaux pour les notes
La classe w3-panel est parfaite pour afficher des notes.
Les notes sont souvent affichées avec une couleur pâle :
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Exemple
<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>
Pour en savoir plus sur W3.CSS Notes, veuillez consulter le chapitre W3.CSS Notes .
Panneaux pour devis
La classe w3-panel est parfaite pour afficher des devis.
Exemple
<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>
Pour en savoir plus sur W3.CSS Quotes, veuillez consulter le chapitre W3.CSS Quotes .
Panneaux d'alertes
La classe w3-panel est parfaite pour afficher des alertes.
Les alertes sont souvent affichées en utilisant une couleur forte :
Danger!
Le rouge indique souvent une situation dangereuse ou négative.
Exemple
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
Pour en savoir plus sur les alertes W3.CSS, veuillez consulter le chapitre Alertes W3.CSS .
Panneaux sous forme de cartes
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Exemple
<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>
Panneaux arrondis
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Exemple
<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>
Masquer (fermer) un panneau
Cacher un panneau est facile.
Cliquez sur le X pour fermer ce panneau.
Cliquez sur le X pour fermer ce panneau.
Exemple
<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>
Afficher (ouvrir) un panneau
Afficher un panneau (masqué) est simple :
Exemple
<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>