---
url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/programowanie/architektura-css'
title: 'Architektura CSS | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:38:26+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  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ć.
tags:
  - 'Architecture and APIs'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T11:38:26+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Architektura CSS'
      description: |-
        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ć.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T11:38:26+0000'
      dateModified: '2026-10-24T11:38:26+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/programowanie/architektura-css'
      articleSection: 'Architektura i API'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/programowanie/architektura-css'
      description: |-
        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ć.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 'Strona Główna'
            item: 'https://dxpr.com/pl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pl
---
[Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Rozszerzenia](/pl/hc/documentation/learn-dxpr-builder/extend) /[Architektura i API](/pl/hc/documentation/learn-dxpr-builder/extend/architecture) # Architektura CSS.

 Poznaj DXPR BuilderRozszerzeniaArchitektura i API

   ## W tym przewodniku

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-section` albo do klas typów, takich jak `.az-text` albo `.az-button`. `.az-element` pomija 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.