CSS-architectuur.
Builderinhoud is Bootstrap 5-markup plus een kleine set az-
klassen. Als je weet welke klassen op gepubliceerde pagina's voorkomen, en welke
alleen bestaan terwijl de editor draait, weet je waarop de CSS van je thema zich
kan richten.
Klassen op gepubliceerde pagina's
Lay-out
| Markup | Klassen |
|---|---|
| Sectie | az-section, met container of container-fluid erin |
| Rij | Bootstrap row |
| Kolom | Bootstrap col-*-klassen, één per breakpoint |
| Inhoudselement | Eén klasse per elementtype, zoals az-text, az-image of az-images-carousel; Social Links gebruikt st-social. De meeste dragen ook az-element; Button en Image niet |
Inhoud die met oudere versies is opgeslagen kan nog az-row en
az-column bevatten. De editor herkent ze en laat ze weg zodra
de rij of kolom opnieuw wordt opgeslagen.
Modifiers
| Klasse | Ingesteld door |
|---|---|
az-row--equal-height |
Equal-height columns op een rij; zonder deze krijgt de rij align-items-start |
az-row--reverse-horizontal |
Mirror row op een rij |
az-util-vertical-centering |
Vertical centering op een sectie of kolom |
Bootstrap-grid
Kolommen gebruiken de gridklassen van Bootstrap:
| Klasse | Breedte |
|---|---|
col |
Deelt de rij in gelijke delen |
col-6 |
50% |
col-md-4 |
33% vanaf 768 px |
col-lg-3 |
25% vanaf 992 px |
Aangepaste CSS schrijven
- Richt builderspecifieke regels op
.az-sectionof op de typeklassen, zoals.az-textof.az-button..az-elementdekt Button en Image niet af. - Overschrijf de gridklassen van Bootstrap niet; de editor stelt er kolombreedtes mee in.
- Voeg voor eenmalige styling een klasse toe in het veld HTML classes van het element en geef die klasse stijl.
Klassen alleen voor de editor
Deze klassen bestaan alleen terwijl de editor draait, dus gepubliceerde pagina's matchen er nooit mee:
| Klasse | Waar |
|---|---|
dxpr-builder-ui |
Elk stukje editorinterface: besturingsbalken, menu's, dialogen |
controls |
De besturingsbalk van een element |
dxpr-editor |
De veldcontainer in elke weergavemodus behalve Preview |
az-ctnr |
De veldcontainer zodra de editor is gestart |
az-sortable-placeholder |
De drop-placeholder terwijl je een element sleept |
De eigen stijlen van de editor staan in dxpr_builder/css/dxpr_builder_backend.css,
gebouwd uit dxpr_builder/sass/dxpr_builder_backend.scss.
Bootstrap-versie
De builder schrijft Bootstrap 5-markup. Als je thema geen Bootstrap 5 laadt, zet je Sideload Bootstrap files op Bootstrap 5 bij DXPR Studio > DXPR Builder > General Settings, onder Bootstrap. None (theme provides Bootstrap) gaat ervan uit dat je thema het laadt.