부트스트랩 그리드
부트스트랩 그리드 시스템
부트스트랩의 그리드 시스템은 페이지 전체에 최대 12개의 열을 허용합니다.
12개 열을 모두 개별적으로 사용하지 않으려면 열을 그룹화하여 더 넓은 열을 만들 수 있습니다.
| 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 |
| 스팬 4 | 스팬 4 | 스팬 4 | |||||||||
| 스팬 4 | 스팬 8 | ||||||||||
| 스팬 6 | 스팬 6 | ||||||||||
| 스팬 12 | |||||||||||
부트스트랩의 그리드 시스템은 반응형이며 열은 화면 크기에 따라 자동으로 재정렬됩니다.
그리드 클래스
부트스트랩 그리드 시스템에는 4가지 클래스가 있습니다.
xs(휴대폰의 경우 - 너비가 768px 미만인 화면)sm(태블릿의 경우 - 너비가 768px 이상인 화면)md(소형 노트북의 경우 - 너비가 992px 이상인 화면)lg(노트북 및 데스크탑의 경우 - 너비가 1200px 이상인 화면)
위의 클래스를 결합하여 보다 동적이고 유연한 레이아웃을 만들 수 있습니다.
부트스트랩 그리드의 기본 구조
다음은 부트스트랩 그리드의 기본 구조입니다.
<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
class="row">)을 생성합니다. 그런 다음 원하는 수의 열(적절한
.col-*-*클래스가 있는 태그)을 추가합니다. 의 숫자 .col-*-*는 항상 각 행에 대해 최대 12까지 추가되어야 합니다.
아래에서 기본 부트스트랩 그리드 레이아웃의 몇 가지 예를 수집했습니다.
3개의 동일한 열
.col-sm-4
.col-sm-4
.col-sm-4
다음 예는 태블릿에서 시작하여 대형 데스크탑으로 확장되는 3개의 동일한 너비 열을 얻는 방법을 보여줍니다. 휴대전화 나 너비가 768px 미만인 화면 에서는 열이 자동으로 누적됩니다.
예시
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
두 개의 같지 않은 열
.col-sm-4
.col-sm-8
다음 예는 태블릿에서 시작하여 대형 데스크탑으로 확장되는 두 개의 다양한 너비 열을 가져오는 방법을 보여줍니다.
예시
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
팁: 이 튜토리얼의 뒷부분에서 부트스트랩 그리드에 대해 자세히 알아볼 것입니다.