Chaque contenu (page de base, news, landing page... mais aussi blocs et paragraphes) possède un champs "Classe(s) CSS" qui sert à modifier certains paramètres d'affichage comme la couleur de fond ou les marges de l'élément considéré.
Classes importantes
Deux types de mise en page coexistent, le gabarit type "Pages de base" et le gabarit de type "Landing page".
Le type de gabarit "Page de base" possède une colonne à gauche et les blocs ajoutés sont contraints à une largeur maximale, la classe appliquées est container
.
Le gabarit "Landing page" permet aux blocs d'occuper toute la largeur du navigateur, la classe appliquées est container-fluid
.
Vous pouvez ajouter ces classes dans le champs "Classe(s) CSS" pour contraindre un bloc à une largeur de "Page de base" en ajoutant la classe container
.
Voir les exemples sur la page de démo avancée.
Classes pour gérer les marges (intérieures et extérieures)
Les marges intérieures (padding) et extérieures (margin) peuvent recevoir 6 valeurs, de 0, aucune à 5, espace important.
Les classes existantes sont nommées selon le shema suivant :
{property}{sides}-{size}
property est p pour padding ou m pour margin
sides
,t
pour top,b
pour bottom,l
pour left etr
pour right,y
pour les marges verticales etx
pour les marges horizontalessize
de 0 à 5
Par exemple pour appliquer une marge verticale importante à un bloc paragraphe ajouter la classe my-4
au champs Classe(s) CSS
Mélanger plusieurs classes ouvre d'importantes possibilités graphiques
Ici, une imbrication de 3 éléments. Le premier possède les classes shadow bg-info p-2
,
- le second, enfant du premier, les classes p-3 bg-light
- et enfin, l'élément contenant le texte et enfant du second possède les classes p-3 bg-light text-info display-4
div class="shadow bg-info p-2" | |__ div class="p-3 bg-light" | |__ div class="p-3 bg-light text-info display-4"
Classes de couleur de fond ou de texte
Les couleurs de la chartes étant déterminée, il est essentiel d'utiliser ces classes pour appliquer une couleur sur un fond (bg-{couleur}
) ou un text (text-{couleur}
)
Les couleurs disponibles en classes sont :
text-primary
Exemple de texte dans un LI de classepb-3
text-secondary
Exemple de texte dans un LI de classepb-3
text-success
Exemple de texte dans un LI de classepb-3
text-danger
Exemple de texte dans un LI de classepb-3
text-warning
Exemple de texte dans un LI de classepb-3
text-info
Exemple de texte dans un LI de classepb-3
text-light
Exemple de texte dans un LI de classepb-3 bg-dark
text-dark
Exemple de texte dans un LI de classepb-3
text-white
Exemple de texte dans un LI de classepb-3 bg-dark
Classes de bordure et d'ombrage et arrondi
Sur le même principe, les classes border affichent une bordure que l'on peut coloriser grâce aux classes de couleurs ci-dessus. Il est également possible de n'afficher une bordure que sur un ou deux voire trois côtés.
Classes : border
ou plus spécifiquement border-top
, border-bottom
, border-left
, border-right
border border-danger p-5 m-5
Pour ajouter une ombre portée, il faut lui appliquer la classe shadow
border border-primary bg-light shadow p-5 m-5
Affichage / masquage de contenu
Texte de déclenchement possédant la classe "trigger-div"
Texte ou élement à masquer possédant la classe "content-div"