Bootstrap 5 그리드 시스템
그리드 시스템
Bootstrap의 그리드 시스템은 flexbox로 구성되어 있으며, 페이지에 최대 12개의 열을 허용합니다。
모든 12개 열을 별도로 사용하지 않으려면 이 열을 조합하여 더 넓은 열을 생성할 수 있습니다：
그리드 시스템은 빠르게 응답하며, 열은 스크린 크기에 따라 자동으로 재정렬됩니다。
총 합이 12에 도달하거나 작을 것을 보장하십시오（모든 12개의 사용 가능한 열을 사용하지 않아도 됩니다）。
그리드 클래스
Bootstrap 5 그리드 시스템은 여섯 가지 클래스를 제공합니다：
.col-(超소형 장치 - 스크린 너비가 576px 미만).col-sm-(소형 장치 - 스크린 너비가 576px 이상).col-md-(중형 장치 - 스크린 너비가 768px 이상).col-lg-(대형 장치 - 스크린 너비가 992px 이상).col-xl-(超大형 장치 - 스크린 너비가 1200px 이상).col-xxl-(特大형 장치 - 스크린 너비가 1400px 이상)
위 클래스를 조합하여 더 동적이고 유연한 레이아웃을 생성할 수 있습니다.
ヒント：각 클래스는 비율적으로 확대되므로 sm과 md에 같은 너비를 설정하려면 sm만 지정하면 됩니다.
Bootstrap 5 그리드의 기본 구조
아래는 Bootstrap 5 그리드의 기본 구조입니다：
<!-- 열 너비를 제어하고, 다양한 장치에서의 표시 방식을 제어 --> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <!-- 또는 Bootstrap가 자동으로 레이아웃을 처리 --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
첫 번째 예제：하나의 행을 생성합니다（<div class = "row">）。그런 다음, 필요한 수의 열을 추가합니다（ .col-*-* 클래스 태그에 주는 것）。첫 번째 별 (*)는 반응성을 나타내며：sm、md、lg、xl 또는 xxl이며, 두 번째 별은 숫자를 나타내며, 각 행의 총 합이 12가 되어야 합니다。
두 번째 예제：각각의 col 숫자를 추가하는 대신, 브라우스토크가 레이아웃을 처리하도록 설정하여 동일한 너비의 열을 만들 수 있습니다：두 개 "col" 요소 = 각 열의 50% 너비이며, 세 개의 열 = 각 열의 33.33% 너비입니다. 네 개의 열 = 25% 너비 등입니다. 또한, "col"을 사용하여 동일한 너비의 열을 만들 수 있습니다：두 개 .col-sm|md|lg|xl|xxl 열에 반응성을 주는 것
그리드 옵션
아래 표는 Bootstrap 5 그리드 시스템이 다양한 화면 크기에서 어떻게 작동하는지 요약합니다：
| 극소형 (<576px) | 미니형 (>=576px) | 소형 (>=768px) | 중형 (>=992px) | 대형 (>=1200px) | 극대형 (>=1400px) | |
|---|---|---|---|---|---|---|
| 클래스 접두어 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 그리드 행동 | 항상 수평 | 디버브팅 시작, 절단점 이상 수평으로 | 디버브팅 시작, 절단점 이상 수평으로 | 디버브팅 시작, 절단점 이상 수평으로 | 디버브팅 시작, 절단점 이상 수평으로 | 디버브팅 시작, 절단점 이상 수평으로 |
| 컨테이너 너비 | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| 적용 가능한 | 스마트폰 세로 모드 | 스마트폰 가로 모드 | 태블릿 | 노트북 | 노트북 및 데스크톱 | 노트북 및 데스크톱 |
| 열의 번호 | 12 | 12 | 12 | 12 | 12 | 12 |
| 거리 밀도 너비 | 1.5rem (열의 양쪽에 .75rem) | 1.5rem (열의 양쪽에 .75rem) | 1.5rem (열의 양쪽에 .75rem) | 1.5rem (열의 양쪽에 .75rem) | 1.5rem (열의 양쪽에 .75rem) | 1.5rem (열의 양쪽에 .75rem) |
| 내포 가능 | 네 | 네 | 네 | 네 | 네 | 네 |
| 오프셋 | 네 | 네 | 네 | 네 | 네 | 네 |
| 열 정렬 | 네 | 네 | 네 | 네 | 네 | 네 |
