Classes frontalières
Les classes W3.CSS frontalières peuvent être utilisés sur tous les éléments HTML.
Je frontières de tous les côtés.
J'ai une bordure inférieure rouge
J'ai bords arrondis.
Exemple
<div class="w3-border">
<p>I have borders on all sides.</p>
</div>
<div class="w3-border-bottom w3-border-red">
<p>I have
a red bottom border.</p>
</div>
<div class="w3-border
w3-round-xlarge">
<p>I have rounded borders.</p>
</div>
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>I have a blue leftbar.</p>
</div>
Try It Yourself » Affichage des notes
Les notes sont souvent affichées avec une couleur pâle et une barre de couleur:
Exemple
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> Try It Yourself » Affichage des panneaux
Les panneaux peuvent être affichés dans un million de différentes façons:
Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.
Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.
Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.
Exemple
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div> Try It Yourself » Affichage Quotes
La classe w3-conteneur peut être utiliser pour afficher des citations.
Exemple
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it
as simple as possible, but not simpler."</i></p>
<p>Albert
Einstein</p>
</div> Try It Yourself » Si vous utilisez HTML <blockquote>, rappelez-vous que le HTML va ajouter une marge gauche supplémentaire:
"Faire aussi simple que possible, mais pasplussimple."
Albert Einstein
Exemple
<blockquote class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make
it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote> Try It Yourself » Hoverable Borders
Les classes de couleur w3-hover-border- changer la couleur de la bordure sur la souris sur:
frontière hoverable Rouge
frontière pourpre qui vire au bleu sur le vol stationnaire
Exemple
<div class="w3-container w3-border w3-hover-border-red">
<p>Red
hoverable border</p>
</div> Try It Yourself »