Architektura CSS.
Treści kreatora to znaczniki Bootstrap 5 plus mały zestaw klas az-.
Wiedza, które klasy pojawiają się na opublikowanych stronach, a które
istnieją tylko, gdy działa edytor, mówi, co twój CSS motywu może
celować.
Klasy na opublikowanych stronach
Układ
| Znacznik | Klasy |
|---|---|
| Sekcja | az-section, z container albo container-fluid wewnątrz |
| Wiersz | Bootstrapowy row |
| Kolumna | Bootstrapowe klasy col-*, po jednej na punkt przerwania |
| Element treści | Jedna klasa na typ elementu, na przykład az-text, az-image albo az-images-carousel; Social Links używa st-social. Większość niesie też az-element; Button i Image nie |
Treści zapisane przez starsze wersje mogą nadal nieść az-row i
az-column. Edytor je rozpoznaje i pomija przy kolejnym
zapisie wiersza albo kolumny.
Modyfikatory
| Klasa | Ustawiana przez |
|---|---|
az-row--equal-height |
Equal-height columns w wierszu; bez niego wiersz dostaje align-items-start |
az-row--reverse-horizontal |
Mirror row w wierszu |
az-util-vertical-centering |
Vertical centering w sekcji albo kolumnie |
Siatka Bootstrapa
Kolumny używają klas siatki Bootstrapa:
| Klasa | Szerokość |
|---|---|
col |
Dzieli wiersz po równo |
col-6 |
50% |
col-md-4 |
33% od 768 px |
col-lg-3 |
25% od 992 px |
Pisanie własnego CSS
- Ogranicz reguły specyficzne dla kreatora do
.az-sectionalbo do klas typów, takich jak.az-textalbo.az-button..az-elementpomija Button i Image. - Nie nadpisuj klas siatki Bootstrapa; edytor ustawia przez nie szerokości kolumn.
- Do jednorazowej stylizacji dodaj klasę w polu HTML classes elementu i ostyluj tę klasę.
Klasy tylko edytora
Te klasy istnieją tylko, gdy działa edytor, więc opublikowane strony nigdy do nich nie pasują:
| Klasa | Gdzie |
|---|---|
dxpr-builder-ui |
Każdy kawałek interfejsu edytora: paski narzędzi, menu, okna |
controls |
Pasek narzędzi elementu |
dxpr-editor |
Kontener pola w każdym trybie widoku poza Preview |
az-ctnr |
Kontener pola po starcie edytora |
az-sortable-placeholder |
Symbol zastępczy upuszczania podczas przeciągania elementu |
Własne style edytora znajdują się w dxpr_builder/css/dxpr_builder_backend.css,
budowanym z dxpr_builder/sass/dxpr_builder_backend.scss.
Wersja Bootstrapa
Kreator zapisuje znaczniki Bootstrap 5. Jeśli twój motyw nie wczytuje Bootstrap 5, ustaw Sideload Bootstrap files na Bootstrap 5 w DXPR Studio > DXPR Builder > General Settings, w Bootstrap. None (theme provides Bootstrap) zakłada, że twój motyw go wczytuje.