Bootstrap 그리드.

DXPR Builder 배우기페이지 만들기요소 스타일 지정디자인 가이드

추가하는 모든 행은 Bootstrap 그리드(열이 공유하는 12개의 동일한 트랙)에 배치됩니다. 1/3 + 2/3 같은 레이아웃은 한 열에 4개 트랙, 다른 열에 8개 트랙을 줍니다. 합이 맞는 너비를 계획하고, 작은 화면용으로 행에 두 번째 레이아웃을 지정하려면 이 페이지를 사용하세요. 행 추가 자체는 Adding a Row 문서를 참고하세요.

동영상에서는 4열 행에 태블릿용 두 번째 레이아웃을 지정한 뒤 창을 좁힙니다.

분수가 트랙이 되는 방식

분수 트랙 일반적인 용도
1/1 12 전체 너비 열 하나
1/2 6 동일한 열 둘
1/3 4 동일한 열 셋, 또는 2/3 옆의 사이드바
2/3 8 1/3 사이드바 옆의 주요 콘텐츠
1/4 3 동일한 열 넷, 또는 3/4 옆의 사이드바
3/4 9 1/4 사이드바 옆의 주요 콘텐츠
1/6 2 작은 열 여섯. 예: 로고 행
5/12 and 7/12 5 and 7 너비가 거의 같은 두 열

행의 트랙 합은 12입니다. 합이 더 크면 넘치는 열이 새 줄로 넘어갑니다. 트랙이 정수로 나오는 분수를 사용하세요. 절반, 3분의 1, 4분의 1, 6분의 1, 12분의 1이 해당됩니다. 1/5 같은 분수에는 맞는 Bootstrap 클래스가 없습니다.

열 안의 행은 해당 열을 자체 12개 트랙으로 나눕니다. 자세한 내용은 Nesting 문서를 참고하세요.

태블릿용으로 행에 다른 레이아웃 지정

새 행에 고르는 레이아웃은 Medium devices (≥ 768px)부터 적용됩니다. 해당 너비 아래에서는 열이 쌓입니다. 다음 단계는 데스크톱에 4열을 유지하고 태블릿에 한 줄에 둘씩 표시합니다.

  1. 행을 가리키고 컨트롤 바에서 그리드 아이콘을 클릭하세요. 레이아웃 대화상자가 Medium devices (≥ 768px) 패널로 열립니다.
  2. 네 열이 동일한 타일을 고르세요.
  3. 이제 Add screen size(을)를 클릭하세요. 레이아웃 복사본과 함께 두 번째 패널이 열립니다.
  4. 새 패널의 화면 크기 목록에서 Small devices (≥ 576px)(을)를 고르세요.
  5. 이제 Custom Layout(을)를 클릭하고 1/2 + 1/2 + 1/2 + 1/2(을)를 입력한 뒤 Save(을)를 클릭하세요.
  6. 이제 Save(을)를 툴바에서 클릭하세요.

절반 넷은 네 열을 모두 유지하고 한 줄에 둘씩 배치합니다. 두 열 타일은 대신 행을 두 열로 줄입니다.

위에는 Medium devices, Small devices (576px and up)가 열리고 Custom Layout (1/2 + 1/2 + 1/2 + 1/2) 버튼이 표시된 Row layout 대화상자. 옆에는 Plan, Design, Build, Grow 네 열

표시되는 내용

넓은 화면에서는 행에 네 열이 나란히 표시됩니다. 브라우저 창을 768픽셀보다 좁게 만들면 한 줄에 둘씩 넘어갑니다. 576픽셀 아래에서는 모든 열이 전체 너비를 차지합니다.

화면 크기

레이아웃 대화상자의 각 패널은 한 화면 크기의 열을 설정합니다. 레이아웃은 자체 패널이 있는 다음 크기까지 더 큰 화면에도 적용됩니다.

패널 적용 시작
Extra small (< 576px) 가장 작은 휴대전화부터
Small devices (≥ 576px) 576픽셀
Medium devices (≥ 768px) 768픽셀. 새 행의 첫 패널
Large devices (≥ 992px) 992픽셀
Extra large (≥ 1200px) 1200픽셀
Extra extra large (≥ 1400px) 1400픽셀

Remove screen size(은)는 패널과 레이아웃을 삭제합니다. Custom Layout(은)는 1/4 + 1/2 + 1/4 같은 분수 목록을 받습니다. 패널의 레이아웃이 타일 중 하나가 아니면 대화상자에 Custom Layout(이)가 표시되고 Custom Layout (1/2 + 1/2 + 1/2 + 1/2) 같은 레이아웃 이름이 표시됩니다. 클릭하면 사용자 지정 레이아웃 상자에서 해당 레이아웃을 편집합니다.

사이트의 Bootstrap

그리드에는 페이지의 Bootstrap 5가 필요합니다. 사이트 관리자가 다음에서 출처를 고릅니다: DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings)의 Bootstrap 아래. Sideload Bootstrap files 항목은 빌더가 직접 불러오는 Bootstrap 5 또는 None (theme provides Bootstrap)(을)를 제공합니다.

레이아웃이 표시되지 않는 경우

  • 모든 화면 크기에서 열이 쌓입니다. Bootstrap이 불러와지지 않았습니다. 설정이 None (theme provides Bootstrap)(이)고 테마도 불러오지 않습니다. Bootstrap 5(을)를 Sideload Bootstrap files 아래에서 고르세요. 위치: /admin/dxpr_studio/dxpr_builder/settings.
  • 데스크톱 레이아웃에서 열이 사라졌습니다. 다른 화면 크기에 열이 더 적은 타일을 골라 빌더가 동일한 너비의 레이아웃을 맞게 줄였습니다. Undo and redo 문서대로 변경을 실행 취소하고 열마다 분수 하나씩 Custom Layout(을)를 사용하세요.
  • 마지막 열이 새 줄로 떨어집니다. 분수 합이 12개 트랙 한 줄을 넘습니다. 1/4 + 3/4 같은 합이 1이 되게 하세요.
  • 사용자 지정 열에 너비가 명확하지 않습니다. 1/5 같은 분수에는 Bootstrap 클래스가 없습니다. 절반, 3분의 1, 4분의 1, 6분의 1, 12분의 1을 사용하세요.

다음 단계

  • Adding a Row: 행을 추가하고 열 프리셋을 고릅니다.
  • Responsive design: 휴대전화, 태블릿, 데스크톱에 요소를 표시하거나 숨깁니다.
  • Nesting: 열 안에 행을 넣어 더 세밀한 레이아웃을 만듭니다.