목차
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>
결과보기
