목차
- BS5 Grid 기본 구조 (너비 12등분 후 배분)
- BS5 Grid 분기점
- BS5 Grid 예제
※ BS5에 '초초대형 기기 분기점' 새로 생긴 것 외엔 BS4와 동일.
BS5 Grid 기본 구조 (너비 12등분 후 배분)
| 1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
| 4 |
4 |
4 |
| 4 |
8 |
| 6 |
6 |
| 12 |
PS1. 반응형이며, 열은 화면크기 따라 자동 재정렬 됨.
PS2. 사용 가능한 열 12개를 모두 사용할 필요는 없음.
BS5 Grid 분기점
1.
화면너비 구분: 6개
- .col : 576px 미만 - 초소형 기기 (extra small device)
- .col-sm-○ : 576px 이상 - 소형 기기 (small device)
- .col-md-○ : 768px 이상 - 중형 기기 (middle divice)
- .col-lg-○ : 992px 이상 - 대형 기기 (large device)
- .col-xl-○ : 1200px 이상 - 초대형 기기 (xlarge device)
- .col-xxl-○ : 1400px 이상 - 초초대형 기기 (xxlarge device) (BS5부터 생김.)
2.
각 클래스는 결합해서 보다 역동적이고 유연한 레이아웃 가능.
3.
sm과 md에 대해 동일 너비 설정하려면 sm만 지정하면 됨. (∵ BS는 모바일 우선 접근 정책에 따라, 적은 기기 지정하면 큰 기기는 자동 적용됨.)
BS5 Grid 예제
[예제1] - 모든 화면너비에서 가로 동일 3등분 나열.
(단, 화면 너비가 너무 작으면 밑으로 하나씩 밀림)
<div class="row">
<div class="col">홈짱닷컴 Homzzang.com</div>
<div class="col">홈짱닷컴 Homzzang.com</div>
<div class="col">홈짱닷컴 Homzzang.com</div>
</div>
결과보기
[예제2] - 576px 이상 화면에서 가로 4등분 나열.
※ 576px 미만 경우 세로 1열로 쌓임.
★ 보다 큰 화면 정의가 별도로 없으면, 해당 화면 너비 이상엔 전부 적용.
<div class="row">
<div class="col-sm-3">홈짱닷컴 Homzzang.com</div>
<div class="col-sm-3">홈짱닷컴 Homzzang.com</div>
<div class="col-sm-3">홈짱닷컴 Homzzang.com</div>
<div class="col-sm-3">홈짱닷컴 Homzzang.com</div>
</div>
결과보기
[예제3] - 576px 이상 화면에서 가로 2등분 나열.
※ 576px 미만 경우 세로 1열로 쌓임.
★ 보다 큰 화면 정의가 별도로 없으면, 해당 화면 너비 이상엔 전부 적용.
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
결과보기
