Referência de classes CSS.

Aprender DXPR BuilderReferênciaElementos e CSS

O conteúdo do DXPR Builder usa classes de Bootstrap 5 juntamente com algumas classes próprias. Esta referência lista as que é mais provável usar ou visar em CSS.

Adicionar classes personalizadas

Selecione o elemento.
Abra More > Settings.
Na secção General, escolha classes no campo HTML classes. Para escrever qualquer nome de classe, clique em Edit as text e separe as classes com espaços.

Classes de grelha Bootstrap

Classes de contentor

Classe	Descrição
`.container`	Contentor centrado de largura fixa
`.container-fluid`	Contentor de largura total

Classes de fila e coluna

Classe	Descrição
`.row`	Contentor flex para colunas
`.col-{n}`	Coluna com n/12 da fila
`.col-sm-{n}`	Largura de coluna em small (576px+)
`.col-md-{n}`	Largura de coluna em medium (768px+)
`.col-lg-{n}`	Largura de coluna em large (992px+)
`.col-xl-{n}`	Largura de coluna em XL (1200px+)

Utilitários de espaçamento Bootstrap

Margem

Classe	Descrição
`.m-{0-5}`	Margem em todos os lados
`.mt-{0-5}`	Margem superior
`.mb-{0-5}`	Margem inferior
`.ms-{0-5}`	Margem inicial (esquerda em LTR)
`.me-{0-5}`	Margem final (direita em LTR)
`.mx-{0-5}`	Margem esquerda e direita
`.my-{0-5}`	Margem superior e inferior

Preenchimento

Classe	Descrição
`.p-{0-5}`	Preenchimento em todos os lados
`.pt-{0-5}`	Preenchimento superior
`.pb-{0-5}`	Preenchimento inferior
`.ps-{0-5}`	Preenchimento inicial
`.pe-{0-5}`	Preenchimento final
`.px-{0-5}`	Preenchimento esquerdo e direito
`.py-{0-5}`	Preenchimento superior e inferior

Utilitários de texto Bootstrap

Classe	Descrição
`.text-start`	Texto alinhado à esquerda
`.text-center`	Texto alinhado ao centro
`.text-end`	Texto alinhado à direita
`.fw-bold`	Texto em negrito
`.fw-light`	Texto leve
`.fst-italic`	Texto em itálico
`.text-uppercase`	Texto em maiúsculas
`.text-lowercase`	Texto em minúsculas
`.fs-1` a `.fs-6`	Tamanho da letra (1 o maior)

Utilitários de cor Bootstrap

Cores de texto

Classe	Descrição
`.text-primary`	Cor primária do tema
`.text-secondary`	Cor secundária do tema
`.text-success`	Verde (success)
`.text-danger`	Vermelho (danger/error)
`.text-warning`	Amarelo (warning)
`.text-info`	Ciano (information)
`.text-muted`	Texto esbatido cinzento
`.text-white`	Texto branco

Cores de fundo

Classe	Descrição
`.bg-primary`	Fundo primário
`.bg-secondary`	Fundo secundário
`.bg-success`	Fundo verde
`.bg-danger`	Fundo vermelho
`.bg-warning`	Fundo amarelo
`.bg-info`	Fundo ciano
`.bg-light`	Fundo cinzento claro
`.bg-dark`	Fundo escuro

Utilitários de apresentação Bootstrap

Classe	Descrição
`.d-none`	Esconder o elemento
`.d-block`	Apresentação em bloco
`.d-inline`	Apresentação em linha
`.d-sm-none`	Esconder em small+
`.d-md-block`	Mostrar em medium+
`.d-lg-none`	Esconder em large+

Classes do DXPR Builder

Classes de elementos

Classe	Descrição
`.az-element`	Classe base na maioria dos elementos de conteúdo; Button and Image não a têm, por isso vise `.az-<type>` em vez disso
`.az-<type>`	Uma classe por tipo de elemento, como `.az-text`, `.az-image` ou `.az-images-carousel`; Social Links usa `.st-social`
`.az-section`	Elemento Section
`.row`	Elemento Row (Bootstrap); conteúdo de versões mais antigas também pode ter `.az-row`
`.col-*`	Elemento Column (Bootstrap); conteúdo de versões mais antigas também pode ter `.az-column`

Classes de animação

As animações usam a nomenclatura animate.css. Enquanto um elemento anima, tem:

Classe	Descrição
`.animated`	Adicionada enquanto a animação corre
`.infinite`	Adicionada quando Infinite está ligado
Nome da animação, como `.fadeIn`	O efeito Animation in ou Animation out a ser reproduzido

Classes de variantes

Classe	Descrição
`.az-variant-container`	Contentor de teste A/B, juntamente com `.rl-experiment`
`.az-variant-wrapper`	Cada braço de variante
`.az-variant-original`	O braço original (A)
`.az-variant-1`, `.az-variant-2`	Braços B, C e por aí fora
`.az-variant-active`	O braço atualmente mostrado

Usar classes para visibilidade responsiva

Combine utilitários de apresentação Bootstrap para mostrar ou esconder conteúdo em tamanhos de ecrã específicos:

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

Adicione estas classes no campo HTML classes do elemento (na secção General das definições) para controlar a visibilidade responsiva.