CSS 아키텍처.
빌더 콘텐츠는 Bootstrap 5 마크업에 작은 az-
클래스 집합을 더한 것입니다. 게시된 페이지에 나타나는 클래스와
편집기 실행 중에만 존재하는 클래스를 알면 테마 CSS가
겨냥할 대상을 알 수 있습니다.
게시된 페이지의 클래스
레이아웃
| 마크업 | 클래스 |
|---|---|
| Section | az-section. 안에 container 또는 container-fluid. |
| Row | Bootstrap row |
| Column | Bootstrap col-* 클래스. 중단점마다 하나. |
| Content element | 요소 유형마다 하나. 예: az-text, az-image, az-images-carousel. Social Links는 st-social(을)를 씀. 대부분 az-element도 가짐. Button과 Image는 제외. |
이전 버전이 저장한 콘텐츠에는 az-row와
az-column(이)가 남아 있을 수 있습니다. 편집기가 이를 인식하고 다음에 행이나 칸을 저장할 때
제외합니다.
수정자
| 클래스 | 설정 주체 |
|---|---|
az-row--equal-height |
Equal-height columns(행). 없으면 행에 지정: align-items-start |
az-row--reverse-horizontal |
Mirror row(행) |
az-util-vertical-centering |
Vertical centering(섹션이나 칸) |
Bootstrap 그리드
칸은 Bootstrap의 그리드 클래스를 씁니다:
| 클래스 | 너비 |
|---|---|
col |
행을 균등 분할 |
col-6 |
50% |
col-md-4 |
768px부터 33% |
col-lg-3 |
992px부터 25% |
사용자 정의 CSS 작성
- 빌더 전용 규칙은 다음으로 범위를 한정하세요:
.az-section또는 유형 클래스(예:.az-text,.az-button)..az-element에는 Button과 Image가 없습니다. - Bootstrap의 그리드 클래스를 재정의하지 마세요. 편집기가 이를 통해 칸 너비를 정합니다.
- 일회성 스타일은 요소의 HTML classes 필드에 클래스를 추가하고 해당 클래스를 스타일링하세요.
편집기 전용 클래스
이 클래스들은 편집기 실행 중에만 존재하므로 게시된 페이지와는 절대 일치하지 않습니다:
| 클래스 | 위치 |
|---|---|
dxpr-builder-ui |
편집기 인터페이스의 모든 조각. 제어 막대, 메뉴, 대화 상자. |
controls |
요소의 제어 막대 |
dxpr-editor |
Preview를 제외한 모든 보기 모드의 필드 컨테이너 |
az-ctnr |
편집기가 시작된 후의 필드 컨테이너 |
az-sortable-placeholder |
요소를 끄는 동안의 놓기 자리 표시자 |
편집기 자체 스타일은 다음에 있습니다: dxpr_builder/css/dxpr_builder_backend.css.
다음에서 빌드됨: dxpr_builder/sass/dxpr_builder_backend.scss.
Bootstrap 버전
빌더는 Bootstrap 5 마크업을 씁니다. 테마가 Bootstrap 5를 불러오지 않으면 Sideload Bootstrap files를 Bootstrap 5(으)로 설정하세요. 위치: DXPR Studio > DXPR Builder > General Settings의 Bootstrap 아래. None (theme provides Bootstrap)(은)는 테마가 불러온다고 가정합니다.