BS3 그리드 구조 (전체 너비 12등분해 배분)
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
4 |
4 |
4 |
4 |
8 |
6 |
6 |
12 |
BS3 그리드 옵션
|
Extra Small < 768px |
Small >= 768px |
Medium >= 992px |
Large >= 1200px |
---|
Class 접두어 |
.col-xs-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
최적화 기기 |
모바일 |
태블릿 |
소형노트북 |
노트북/PC |
Grid 작동 |
항상 수평 |
분기점 미만 수직 분기점 이상 수평 |
분기점 미만 수직 분기점 이상 수평 |
분기점 미만 수직 분기점 이상 수평 |
Container width |
None (auto) |
750px |
970px |
1170px |
Column 개수 |
12 |
12 |
12 |
12 |
Column 너비 |
Auto |
~ 62px |
~ 81px |
~ 97px |
Gutter 너비 |
30px (양쪽 15px) |
30px (양쪽 15px) |
30px (양쪽 15px) |
30px (양쪽 15px) |
Nestable |
Yes |
Yes |
Yes |
Yes |
Offsets |
Yes |
Yes |
Yes |
Yes |
Column 순서지정 |
Yes |
Yes |
Yes |
Yes |
※ Gutter width : Column간 간격
※ Nestable : 중첩구조 가능 여부
※ Offset : .row 클래스에 음수 margin 줘서 양쪽 끝 column padding 상쇄 여부
※ Column 순서지정 : 순서 변경 가능 여부
BS3 그리드 클래스
xs : 휴대전화: < 768 px 화면
sm : 태블릿: >= 768 px 화면
md : 소형 노트북: >= 992 px 화면
lg : 노트북・데스크톱: >= 1200 px 화면
PS.
1. 위 클래스 결합해 보다 역동적이고 유연한 레이아웃 제작 가능.
2. 클래스는 확장 적용되므로, xs・sm 동일 너비 설정하려면 xs만 지정.
BS3 그리드 시스템 규칙
※ 일부 BS 그리드 시스템 규칙
1.
row (행)은 적절한 정렬 및 padding을 위해 .
.container(고정 너비) 또는 .container-fluid(전체 너비) 클래스 선택자 내에 있어야 함.
2.
.row (행) 사용해 column (열)의 수평 그룹 만듦.
3.
콘텐츠 내용은 column (열) 내에 배치되어야하며,
column (열)만이 row (행)의 바로 하위 항목이 될 수 있음.
4.
미리 정의 된 .row 와 .col-sm-4 같은 클래스는 그리드 레이아웃을 쉽게 만드는데 적합.
5.
column (열)은 padding을 통해 gutter (컬럼간 간격)을 만듦.
이 때, 처음과 마지막 열의 행에서 음수 margin (= 역마진)을 통해 좌우 양끝의 padding 여백을 제거.
6.
그리드 column (열)은 12개 열을 분할 지정해 만듦.
예를 들어, 태블릿 화면에서 3개의 동일한 너비 열은 .col-sm-4 클래스를 이용.
7.
열 너비는 백분율로 표시되므로 항상 부모 너비에 의해 상대적 유동적으로 변함.
BS3 그리드 기본 구조
<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>
PS.
BS4 그리드 : https://homzzang.com/b/bs4?sca=grid