--- url: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/development/css-architecture' title: 'Classes dans le balisage enregistré | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:00:43+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Le contenu du builder est du balisage Bootstrap 5 plus un petit jeu de classes az-. Savoir quelles classes figurent sur les pages publiées, et lesquelles n’existent que pendant que l’éditeur tourne, pour savoir ce que le CSS de votre thème peut cibler.' tags: - 'Architectuur en API’s' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:00:43+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Classes dans le balisage enregistré' description: 'Le contenu du builder est du balisage Bootstrap 5 plus un petit jeu de classes az-. Savoir quelles classes figurent sur les pages publiées, et lesquelles n’existent que pendant que l’éditeur tourne, pour savoir ce que le CSS de votre thème peut cibler.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:00:43+0000' dateModified: '2026-10-24T11:00:43+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/fr/hc/documentation/learn-dxpr-builder/development/css-architecture' articleSection: 'Architectuur en API’s' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/development/css-architecture' description: 'Le contenu du builder est du balisage Bootstrap 5 plus un petit jeu de classes az-. Savoir quelles classes figurent sur les pages publiées, et lesquelles n’existent que pendant que l’éditeur tourne, pour savoir ce que le CSS de votre thème peut cibler.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Help Center](/fr/hc)/[Documentation](/fr/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Architectuur en API’s](/hc/documentation/learn-dxpr-builder/extend/architecture) # Classes dans le balisage enregistré. Learn DXPR BuilderExtendArchitectuur en API’s ## In this guide Le contenu du builder est du balisage Bootstrap 5 plus un petit jeu de classes `az-`. Savoir quelles classes figurent sur les pages publiées, et lesquelles n’existent que pendant que l’éditeur tourne, pour savoir ce que le CSS de votre thème peut cibler. ## Classes sur les pages publiées ### Layout | Balisage | Classes | |---|---| | Section | `az-section`, avec `container` ou `container-fluid` dedans | | Row | Bootstrap `row` | | Column | classes Bootstrap `col-*`, une par point d’arrêt | | Content element | Une classe par type d’élément, comme `az-text`, `az-image` ou `az-images-carousel` ; Social Links utilise `st-social`. La plupart portent aussi `az-element` ; Button et Image non | Le contenu enregistré par d’anciennes versions peut encore porter `az-row` et `az-column`. L’éditeur les reconnaît et les omet la prochaine fois que la ligne ou la colonne est enregistrée. ### Modificateurs | Classe | Défini par | |---|---| | `az-row--equal-height` | **Equal-height columns** sur une ligne ; sans elle, la ligne reçoit `align-items-start` | | `az-row--reverse-horizontal` | **Mirror row** sur une ligne | | `az-util-vertical-centering` | **Vertical centering** sur une section ou une colonne | ### Grille Bootstrap Les colonnes utilisent les classes de grille Bootstrap : | Classe | Largeur | |---|---| | `col` | Se partage la ligne à parts égales | | `col-6` | 50 % | | `col-md-4` | 33 % à partir de 768 px | | `col-lg-3` | 25 % à partir de 992 px | ## Écrire du CSS personnalisé - Ciblez les règles propres au builder sur `.az-section` ou sur les classes de type, comme `.az-text` ou `.az-button`. `.az-element` manque Button et Image. - Ne surchargez pas les classes de grille Bootstrap ; l’éditeur définit les largeurs de colonne par elles. - Pour un stylage ponctuel, ajoutez une classe dans le champ **HTML classes** de l’élément et stylisez cette classe. ## Classes réservées à l’éditeur Ces classes n’existent que pendant que l’éditeur tourne, donc les pages publiées ne correspondent jamais à ces classes : | Classe | Où | |---|---| | `dxpr-builder-ui` | Chaque morceau d’interface de l’éditeur : barres de contrôle, menus, dialogues | | `controls` | La barre de contrôle d’un élément | | `dxpr-editor` | Le conteneur de champ dans chaque mode d’affichage sauf Preview | | `az-ctnr` | Le conteneur de champ une fois l’éditeur démarré | | `az-sortable-placeholder` | L’espace réservé de dépôt pendant que vous glissez un élément | Les styles propres de l’éditeur sont dans `dxpr_builder/css/dxpr_builder_backend.css`, construits depuis `dxpr_builder/sass/dxpr_builder_backend.scss`. ## Version de Bootstrap Le builder écrit du balisage Bootstrap 5. Si votre thème ne charge pas Bootstrap 5, réglez **Sideload Bootstrap files** sur **Bootstrap 5** sous **DXPR Studio > DXPR Builder > General Settings**, sous **Bootstrap**. **None (theme provides Bootstrap)** présuppose que votre thème le charge.