Opis klas CSS..

Poznaj DXPR BuilderDokumentacja technicznaElementy i CSS

Treści DXPR Builder używają klas Bootstrap 5 obok kilku własnych klas. Ten opis wymienia te, których najpewniej użyjesz albo które obierzesz w CSS.

Dodawanie własnych klas

  1. Wybierz element.
  2. Otwórz More > Settings.
  3. W sekcji General wybierz klasy w polu HTML classes. Aby wpisać dowolną nazwę klasy, kliknij Edit as text i oddziel klasy spacjami.

Klasy siatki Bootstrap

Klasy kontenerów

Klasa Opis
.container Wyśrodkowany kontener o stałej szerokości
.container-fluid Kontener na całą szerokość

Klasy wierszy i kolumn

Klasa Opis
.row Kontener flex dla kolumn
.col-{n} Kolumna o szerokości n/12 wiersza
.col-sm-{n} Szerokość kolumny na małych ekranach (od 576px)
.col-md-{n} Szerokość kolumny na średnich ekranach (od 768px)
.col-lg-{n} Szerokość kolumny na dużych ekranach (od 992px)
.col-xl-{n} Szerokość kolumny na bardzo dużych ekranach (od 1200px)

Klasy pomocnicze odstępów Bootstrap

Margines

Klasa Opis
.m-{0-5} Margines ze wszystkich stron
.mt-{0-5} Margines górny
.mb-{0-5} Margines dolny
.ms-{0-5} Margines początkowy (po lewej w LTR)
.me-{0-5} Margines końcowy (po prawej w LTR)
.mx-{0-5} Margines po lewej i po prawej
.my-{0-5} Margines górny i dolny

Wypełnienie (padding)

Klasa Opis
.p-{0-5} Wypełnienie ze wszystkich stron
.pt-{0-5} Wypełnienie górne
.pb-{0-5} Wypełnienie dolne
.ps-{0-5} Wypełnienie początkowe
.pe-{0-5} Wypełnienie końcowe
.px-{0-5} Wypełnienie po lewej i po prawej
.py-{0-5} Wypełnienie górne i dolne

Klasy pomocnicze tekstu Bootstrap

Klasa Opis
.text-start Tekst wyrównany do lewej
.text-center Tekst wyśrodkowany
.text-end Tekst wyrównany do prawej
.fw-bold Tekst pogrubiony
.fw-light Tekst o cienkiej grubości
.fst-italic Tekst kursywą
.text-uppercase Tekst wielkimi literami
.text-lowercase Tekst małymi literami
.fs-1 to .fs-6 Rozmiar czcionki (1 największy)

Klasy pomocnicze kolorów Bootstrap

Kolory tekstu

Klasa Opis
.text-primary Podstawowy kolor motywu
.text-secondary Dodatkowy kolor motywu
.text-success Zielony (sukces)
.text-danger Czerwony (niebezpieczeństwo/błąd)
.text-warning Żółty (ostrzeżenie)
.text-info Cyjan (informacja)
.text-muted Szary wyciszony tekst
.text-white Biały tekst

Kolory tła

Klasa Opis
.bg-primary Podstawowe tło
.bg-secondary Dodatkowe tło
.bg-success Zielone tło
.bg-danger Czerwone tło
.bg-warning Żółte tło
.bg-info Cyjanowe tło
.bg-light Jasnoszare tło
.bg-dark Ciemne tło

Klasy pomocnicze wyświetlania Bootstrap

Klasa Opis
.d-none Ukrywa element
.d-block Wyświetlanie blokowe
.d-inline Wyświetlanie liniowe
.d-sm-none Ukrywa na małych ekranach+
.d-md-block Pokazuje na średnich ekranach+
.d-lg-none Ukrywa na dużych ekranach+

Klasy DXPR Builder

Klasy elementów

Klasa Opis
.az-element Podstawowa klasa większości elementów treści; Button i Image jej nie mają, więc celuj w .az-<type>.
.az-<type> Jedna klasa na rodzaj elementu, na przykład .az-text, .az-image albo .az-images-carousel; Social Links używa .st-social
.az-section Element sekcji
.row Element wiersza (Bootstrap); treści ze starszych wersji mogą mieć też .az-row
.col-* Element kolumny (Bootstrap); treści ze starszych wersji mogą mieć też .az-column

Klasy animacji

Animacje używają nazewnictwa animate.css. Gdy element się animuje, ma:

Klasa Opis
.animated Dodawana na czas animacji
.infinite Dodawana, gdy włączone jest Infinite.
Nazwa animacji, na przykład .fadeIn Odtwarzany efekt Animation in albo Animation out.

Klasy wariantów

Klasa Opis
.az-variant-container Kontener testu A/B, razem z .rl-experiment
.az-variant-wrapper Każde ramię wariantu
.az-variant-original Ramię pierwotne (A)
.az-variant-1, .az-variant-2 Ramiona B, C i kolejne
.az-variant-active Aktualnie pokazywane ramię

Używanie klas do widoczności responsywnej

Połącz klasy wyświetlania Bootstrap, aby pokazywać albo ukrywać treść na danych rozmiarach ekranu:

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

Dodaj te klasy w polu HTML classes elementu (w sekcji General ustawień), aby sterować widocznością responsywną.