Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus possimus voluptates veritatis officiis quibusdam sapiente accusantium deleniti voluptate quo? Iste voluptate quasi distinctio officia iusto, aliquid eos.
Pied de page
jdb-containerLa classe jdb-container ajoute une marge intérieure (padding) de 16px à gauche et à droite de n'importe quel élément (à l'exception de img, video, iframe, canvas), et aucune marge extérieure.
La classe jdb-container est la classe adéquate pour tout élément conteneur comme le div, article, section, header, footer, form, etc.
La classe jdb-container fournit l'égalité pour tous les éléments conteneurs HTML :
Pour utiliser un conteneur, il suffit d'ajouter la classe jdb-container à l'élément en question :
<div class="jdb-container"> <p>jdb-container est une classe très importante dans JdB.CSS.</p> </div>
Pour ajouter une couleur d'arrière-plan à un élément, il suffit d'ajouter la classe jdb-color comme dans l'exemple ci-après.
<div class="jdb-container jdb-green"> <p>jdb-container est une classe très importante dans JdB.CSS.</p> </div>
La classe jdb-container peut aussi être utilisée pour styliser les en-têtes.
<div class="jdb-container jdb-blue"> <h1>En-tête</h1> </div>
<header class="jdb-container jdb-blue"> <h1>En-tête</h1> </header>
Il n'y a aucune différence dans la façon dont JdB.CSS traite les éléments div et header ou un autre élément sémantique.
La classe jdb-container peut aussi être utilisée pour styliser les pieds de pages.
Les informations du pied de page seront placées ici.
<footer class="jdb-container jdb-teal"> <h3>Pied de page</h3> <p>Les informations du pied de page seront placées ici.</p> </footer>
De nombreuses pages Web utilisent des éléments div au lieu des éléments sémantiques header, footer, article et section.
Normalement, vous n'aurez pas besoin de changer les marges intérieures du conteneur, car les paragraphes et les titres possèdent déjà des marges extérieures qui complèteront les marges intérieures du conteneur pour former un conteneur bien espacé.