La classe Container
La classe w3-conteneur est le plus important des classes W3.CSS.
La classe w3-conteneur est utilisé pour tous les types d'éléments de conteneur HTML comme:
<Div>, <header>, <footer>, <article> <section>, <blockquote>, <form>, et plus encore.
Cet en-tête est vert.
Ce pied est rouge.
Cet article est gris clair et le texte est brun.
Containers Fournit l'égalité
La classe w3-conteneur est important pour assurer l' égalité:
- marges communes
- rembourrages communs
- alignements verticaux communs
- alignements horizontaux communs
- polices communes
- Les couleurs communes
Exemple
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Try It Yourself » Pour ajouter une couleur, il suffit d' ajouter une classe de couleur w3-:
Exemple
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Try It Yourself » En-têtes et pieds de page
La classe w3-conteneur peut être utilisé pour le style d' un en- tête:
Titre 1
La classe w3-conteneur peut être utilisé pour le style d' un pied de page:
Exemple
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Try It Yourself » Articles et Sections
La classe w3-conteneur peut être utilisé pour le style <article> et <section> éléments:
Exemple
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<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 »  | De nombreuses pages web utilise éléments <div> au lieu de <article> et <section> éléments. |
|---|
Notes, Panneaux et devis
La classe w3-conteneur peut être utiliser pour afficher toutes sortes de notes:
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 » La classe w3-conteneur peut être utiliser pour afficher tous les types de panneaux:
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 » La classe w3-conteneur peut être utiliser pour afficher toutes sortes de 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 » Aller au chapitre W3.CSS frontières pour en savoir plus sur les notes d' affichage, des panneaux, et des citations.
Combinaisons
Entête
Une voiture est un véhicule à moteur auto-alimenté à roues utilisé pour le transport. La plupart des définitions du terme précisent que les voitures sont conçues pour fonctionner principalement sur les routes. (Wikipédia)
Exemple en utilisant HTML <div> éléments
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div> Try It Yourself » Exemple en utilisant HTML éléments sémantiques
<header class="w3-container w3-red">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-red">
<h5>Footer</h5>
</footer> Try It Yourself » Container Rembourrage
La classew3-conteneur a une 16px par défaut gauche et padding droite, et pas en haut ou padding - bottom:
Exemple
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Try It Yourself » Normalement, vous ne devrez pas changer le remplissage par défaut d'un conteneur, parce que les paragraphes et rubrique fournissent des marges qui vont simuler un rembourrage.
Je rubrique 1
Je suis un paragraphe.
Exemple
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Try It Yourself » Container sectionnement
La classew3-conteneur n'a pas top par défaut ou marge inférieure.
Deux conteneurs afficheront wothout une marge entre eux:
Je rubrique 1
Je suis un paragraphe.
Je rubrique 1
Je suis un paragraphe.
La classew3-section peut être utilisée pour séparer les conteneurs.Il a 16px marges supérieure et inférieure:
Je rubrique 1
Je suis un paragraphe.
Je rubrique 1
Je suis un paragraphe.
Exemple
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Try It Yourself » Hiding (fermeture) Containers
Cacher ou la fermeture d'un conteneur est facile:
Pour fermer ce conteneur, cliquez sur le X dans le coin supérieur droit.
Exemple
<div class="w3-container w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>To close this container, click on the X in the upper right corner.</p>
</div>
Try It Yourself » Containers ouverture
Ouverture des conteneurs fermés est facile:
Exemple
<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<p>London is the capital city of
England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
Try It Yourself »