부트스트랩 그리드 시스템
부트스트랩 그리드 시스템
부트스트랩의 그리드 시스템은 페이지 전체에 최대 12개의 열을 허용합니다.
12개의 열을 모두 개별적으로 사용하지 않으려면 열을 그룹화하여 더 넓은 열을 만들 수 있습니다.
| 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 |
| 스팬 4 | 스팬 4 | 스팬 4 | |||||||||
| 스팬 4 | 스팬 8 | ||||||||||
| 스팬 6 | 스팬 6 | ||||||||||
| 스팬 12 | |||||||||||
부트스트랩의 그리드 시스템은 반응형이며 화면 크기에 따라 열이 재배열됩니다. 큰 화면에서는 콘텐츠가 3열로 구성되어 더 잘 보일 수 있지만 작은 화면에서는 콘텐츠 항목이 쌓이면 더 좋습니다. 서로 위에.
팁: 그리드 열은 행에 대해 최대 12개까지 추가해야 합니다. 그 이상으로 열은 뷰포트에 관계없이 스택됩니다.
그리드 클래스
부트스트랩 그리드 시스템에는 4가지 클래스가 있습니다.
xs(휴대폰용 - 너비가 768px 미만인 화면)sm(태블릿의 경우 - 너비가 768px 이상인 화면)md(소형 노트북의 경우 - 너비가 992px 이상인 화면)lg(노트북 및 데스크탑의 경우 - 너비가 1200px 이상인 화면)
위의 클래스를 결합하여 보다 동적이고 유연한 레이아웃을 만들 수 있습니다.
팁: 각 클래스가 확장되므로 xs 및 sm에 대해 동일한 너비를 설정하려면 xs만 지정하면 됩니다.
그리드 시스템 규칙
일부 부트스트랩 그리드 시스템 규칙:
- 적절한 정렬 및 패딩을 위해 행은
.container(고정 너비) 또는 (전체 너비) 내에 배치되어야 합니다..container-fluid - 행을 사용하여 가로 열 그룹 만들기
- 콘텐츠는 열 내에 배치되어야 하며 열만 행의 직계 자식일 수 있습니다.
.row와 같은 미리 정의된 클래스.col-sm-4는 그리드 레이아웃을 빠르게 만드는 데 사용할 수 있습니다.- 열은 패딩을 통해 여백(열 콘텐츠 사이의 간격)을 만듭니다. 해당 패딩은 음수 여백을 통해 첫 번째 및 마지막 열의 행에서 오프셋됩니다.
.rows - 그리드 열은 확장하려는 12개의 사용 가능한 열 수를 지정하여 생성됩니다. 예를 들어 3개의 동일한 열은 3개의
.col-sm-4 - 열 너비는 백분율로 표시되므로 항상 유동적이며 상위 요소를 기준으로 크기가 조정됩니다.
부트스트랩 그리드의 기본 구조
다음은 부트스트랩 그리드의 기본 구조입니다.
<div class="container">
<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>
<div class="row">
...
</div>
</div>
따라서 원하는 레이아웃을 생성하려면 컨테이너( <div
class="container">)를 생성합니다. 다음으로 행( <div
class="row">)을 생성합니다. 그런 다음 원하는 수의 열(적절한
.col-*-*클래스가 있는 태그)을 추가합니다. 의 숫자 .col-*-*는 항상 각 행에 대해 최대 12까지 추가되어야 합니다.
그리드 옵션
다음 표에는 부트스트랩 그리드 시스템이 여러 장치에서 작동하는 방식이 요약되어 있습니다.
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
예
다음 장에서는 다양한 장치에 대한 그리드 시스템의 예를 보여줍니다.