Référence des classes CSS.

Apprendre DXPR BuilderRéférenceÉléments et CSS

Le contenu DXPR Builder utilise les classes Bootstrap 5 ainsi que quelques classes propres. Cette référence répertorie celles que vous utiliserez ou ciblerez en CSS le plus probablement.

Ajouter des classes personnalisées

Sélectionnez l’élément.
Ouvrez Plus > Paramètres.
Dans la section General, choisissez des classes dans le champ HTML classes. Pour saisir n’importe quel nom de classe, cliquez sur Edit as text et séparez les classes par des espaces.

Classes de grille Bootstrap

Classes de conteneur

Class	Description
`.container`	Conteneur centré à largeur fixe
`.container-fluid`	Conteneur pleine largeur

Classes de lignes et de colonnes

Class	Description
`.row`	Conteneur flexible pour colonnes
`.col-{n}`	Colonne couvrant n/12 de la ligne
`.col-sm-{n}`	Largeur de colonne en petit (576px et plus)
`.col-md-{n}`	Largeur de colonne en moyen (768px et plus)
`.col-lg-{n}`	Largeur de colonne en grand (992px et plus)
`.col-xl-{n}`	Largeur de colonne en très grand (1200px et plus)

Utilitaires d’espacement Bootstrap

Marge extérieure

Class	Description
`.m-{0-5}`	Marge extérieure de tous les côtés
`.mt-{0-5}`	Marge extérieure haute
`.mb-{0-5}`	Marge extérieure basse
`.ms-{0-5}`	Marge extérieure de début (gauche en LTR)
`.me-{0-5}`	Marge extérieure de fin (droite en LTR)
`.mx-{0-5}`	Marges extérieures gauche et droite
`.my-{0-5}`	Marges extérieures haute et basse

Marge intérieure

Class	Description
`.p-{0-5}`	Marge intérieure de tous les côtés
`.pt-{0-5}`	Marge intérieure haute
`.pb-{0-5}`	Marge intérieure basse
`.ps-{0-5}`	Marge intérieure de début
`.pe-{0-5}`	Marge intérieure de fin
`.px-{0-5}`	Marges intérieures gauche et droite
`.py-{0-5}`	Marges intérieures haute et basse

Utilitaires de texte Bootstrap

Class	Description
`.text-start`	Texte aligné à gauche
`.text-center`	Texte centré
`.text-end`	Texte aligné à droite
`.fw-bold`	Texte gras
`.fw-light`	Texte de graisse légère
`.fst-italic`	Texte italique
`.text-uppercase`	Texte en majuscules
`.text-lowercase`	Texte en minuscules
`.fs-1` to `.fs-6`	Taille de police (1 la plus grande)

Utilitaires de couleur Bootstrap

Couleurs de texte

Class	Description
`.text-primary`	Couleur primaire du thème
`.text-secondary`	Couleur secondaire du thème
`.text-success`	Vert (succès)
`.text-danger`	Rouge (danger/erreur)
`.text-warning`	Jaune (avertissement)
`.text-info`	Cyan (information)
`.text-muted`	Texte gris atténué
`.text-white`	Texte blanc

Couleurs de fond

Class	Description
`.bg-primary`	Fond primaire
`.bg-secondary`	Fond secondaire
`.bg-success`	Fond vert
`.bg-danger`	Fond rouge
`.bg-warning`	Fond jaune
`.bg-info`	Fond cyan
`.bg-light`	Fond gris clair
`.bg-dark`	Fond foncé

Utilitaires d’affichage Bootstrap

Class	Description
`.d-none`	Masquer l’élément
`.d-block`	Affichage en bloc
`.d-inline`	Affichage en ligne
`.d-sm-none`	Masquer en petit et plus
`.d-md-block`	Afficher en moyen et plus
`.d-lg-none`	Masquer en grand et plus

Classes DXPR Builder

Classes d’éléments

Class	Description
`.az-element`	Classe de base sur la plupart des éléments de contenu ; Button et Image ne la portent pas : ciblez plutôt `.az-<type>`
`.az-<type>`	Une classe par type d’élément, par exemple `.az-text`, `.az-image` ou `.az-images-carousel` ; Social Links utilise `.st-social`
`.az-section`	Élément Section
`.row`	Élément Row (Bootstrap) ; le contenu des anciennes versions peut aussi avoir `.az-row`
`.col-*`	Élément Column (Bootstrap) ; le contenu des anciennes versions peut aussi avoir `.az-column`

Classes d’animation

Les animations utilisent la nomenclature animate.css. Pendant qu’un élément s’anime, il porte :

Class	Description
`.animated`	Ajoutée pendant que l’animation s’exécute
`.infinite`	Ajoutée quand Infinite est activé
Animation name, such as `.fadeIn`	L’effet Animation in ou Animation out en cours

Classes de variantes

Class	Description
`.az-variant-container`	Conteneur de test A/B, avec `.rl-experiment`
`.az-variant-wrapper`	Chaque bras de variante
`.az-variant-original`	Le bras d’origine (A)
`.az-variant-1`, `.az-variant-2`	Les bras B, C, et ainsi de suite
`.az-variant-active`	Le bras affiché actuellement

Utiliser les classes pour la visibilité responsive

Combinez les utilitaires d’affichage Bootstrap pour afficher ou masquer du contenu à des tailles d’écran précises :

<!-- Visible only on mobile -->
<div class="d-block d-md-none">Mobile content</div>

<!-- Visible only on desktop -->
<div class="d-none d-md-block">Desktop content</div>

Ajoutez ces classes dans le champ HTML classes de l’élément (dans la section General des réglages) pour contrôler la visibilité responsive.