Riferimento alle classi CSS.

Impara DXPR BuilderRiferimentoElementi e CSS

I contenuti DXPR Builder usano classi Bootstrap 5 insieme ad alcune classi proprie. Questo riferimento elenca quelle che più probabilmente userai o prenderai di mira nel CSS.

Aggiungere classi personalizzate

Seleziona l’elemento.
Apri More > Settings.
Nella sezione General scegli classi nel campo HTML classes. Per digitare qualsiasi nome di classe, fai clic su Edit as text e separa le classi con spazi.

Classi griglia Bootstrap

Classi contenitore

Classe	Descrizione
`.container`	Contenitore centrato a larghezza fissa
`.container-fluid`	Contenitore a tutta larghezza

Classi di righe e colonne

Classe	Descrizione
`.row`	Contenitore flex per colonne
`.col-{n}`	Colonna da n/12 di riga
`.col-sm-{n}`	Larghezza colonna su small (576px e oltre)
`.col-md-{n}`	Larghezza colonna su medium (768px e oltre)
`.col-lg-{n}`	Larghezza colonna su large (992px e oltre)
`.col-xl-{n}`	Larghezza colonna su XL (1200px e oltre)

Utilità di spaziatura Bootstrap

Margine

Classe	Descrizione
`.m-{0-5}`	Margine su tutti i lati
`.mt-{0-5}`	Margine superiore
`.mb-{0-5}`	Margine inferiore
`.ms-{0-5}`	Margine iniziale (sinistra in LTR)
`.me-{0-5}`	Margine finale (destra in LTR)
`.mx-{0-5}`	Margine sinistro e destro
`.my-{0-5}`	Margine superiore e inferiore

Padding

Classe	Descrizione
`.p-{0-5}`	Padding su tutti i lati
`.pt-{0-5}`	Padding superiore
`.pb-{0-5}`	Padding inferiore
`.ps-{0-5}`	Padding iniziale
`.pe-{0-5}`	Padding finale
`.px-{0-5}`	Padding sinistro e destro
`.py-{0-5}`	Padding superiore e inferiore

Utilità di testo Bootstrap

Classe	Descrizione
`.text-start`	Testo allineato a sinistra
`.text-center`	Testo centrato
`.text-end`	Testo allineato a destra
`.fw-bold`	Testo in grassetto
`.fw-light`	Testo leggero
`.fst-italic`	Testo in corsivo
`.text-uppercase`	Testo maiuscolo
`.text-lowercase`	Testo minuscolo
`.fs-1` a `.fs-6`	Dimensione font (1 la più grande)

Utilità di colore Bootstrap

Colori del testo

Classe	Descrizione
`.text-primary`	Colore primario del tema
`.text-secondary`	Colore secondario del tema
`.text-success`	Verde (successo)
`.text-danger`	Rosso (pericolo/errore)
`.text-warning`	Giallo (avviso)
`.text-info`	Ciano (informazione)
`.text-muted`	Testo grigio attenuato
`.text-white`	Testo bianco

Colori di sfondo

Classe	Descrizione
`.bg-primary`	Sfondo primario
`.bg-secondary`	Sfondo secondario
`.bg-success`	Sfondo verde
`.bg-danger`	Sfondo rosso
`.bg-warning`	Sfondo giallo
`.bg-info`	Sfondo ciano
`.bg-light`	Sfondo grigio chiaro
`.bg-dark`	Sfondo scuro

Utilità di visualizzazione Bootstrap

Classe	Descrizione
`.d-none`	Nascondi l’elemento
`.d-block`	Visualizzazione a blocco
`.d-inline`	Visualizzazione inline
`.d-sm-none`	Nascondi da small in su
`.d-md-block`	Mostra da medium in su
`.d-lg-none`	Nascondi da large in su

Classi DXPR Builder

Classi degli elementi

Classe	Descrizione
`.az-element`	Classe base sulla maggior parte degli elementi di contenuto; Button e Image non ce l’hanno, quindi prendi di mira `.az-<type>` al suo posto
`.az-<type>`	Una classe per tipo di elemento, come `.az-text`, `.az-image` o `.az-images-carousel`; Social Links usa `.st-social`
`.az-section`	Elemento sezione
`.row`	Elemento riga (Bootstrap); i contenuti di versioni precedenti possono avere anche `.az-row`
`.col-*`	Elemento colonna (Bootstrap); i contenuti di versioni precedenti possono avere anche `.az-column`

Classi di animazione

Le animazioni usano la nomenclatura di animate.css. Mentre un elemento si anima ha:

Classe	Descrizione
`.animated`	Aggiunta mentre l’animazione è in corso
`.infinite`	Aggiunta quando Infinite è attivo
Nome dell’animazione, come `.fadeIn`	L’effetto Animation in o Animation out in riproduzione

Classi delle varianti

Classe	Descrizione
`.az-variant-container`	Contenitore del test A/B, insieme a `.rl-experiment`
`.az-variant-wrapper`	Ogni ramo di variante
`.az-variant-original`	Il ramo originale (A)
`.az-variant-1`, `.az-variant-2`	I rami B, C e così via
`.az-variant-active`	Il ramo mostrato al momento

Usare le classi per la visibilità reattiva

Combina le utilità di visualizzazione Bootstrap per mostrare o nascondere contenuti a dimensioni di schermo specifiche:

<!-- 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>

Aggiungi queste classi nel campo HTML classes dell’elemento (nella sezione General delle impostazioni) per controllare la visibilità reattiva.