BS3 그리드 기본 구조 (전체 너비를 12등분해서 배분)
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
4 |
4 |
4 |
4 |
8 |
6 |
6 |
12 |
Grid (그리드)
1.
화면 너비를 12개로 분할해 레이아웃 구성
2.
그리드 기본 구문
<div class="row">
<div class="col-화면너비-열개수"></div>
.....
</div>
※ row : 행
※ col : 열 (※ Column 약어)
※ 화면너비 : sm, md, lg 중 하나.
※ 열개수 : 1~12 중 하나.
3.
화면너비 표시 클래스 구문은 BS4와 BS3가 다름.
BS3 그리드
화면너비 구분: 4개
.col-xs-열개수 : 768px 미만 화면너비 - 초소형기기 (Extra Small Device : 스마트폰)
.col-sm-열개수 : 768px 이상 화면너비 - 소형기기 (Small Device : 태블릿)
.col-md-열개수 : 992px 이상 화면너비 - 중형기기 (Middle Device : 소형노트북)
.col-lg-열개수 : 1200px 이상 화면너비 - 대형기기 (Large Device : 노트북 및 데스크톱)
예제.
768px 이상 화면너비 경우 가로 3등분. (768px 미만 경우 세로 나열)
<div class="row">
<div class="col-sm-4">홈짱닷컴 Homzzang.com</div>
<div class="col-sm-4">홈짱닷컴 Homzzang.com</div>
<div class="col-sm-4">홈짱닷컴 Homzzang.com</div>
</div>
결과보기
더 자세히 보기 https://homzzang.com/b/bs?sca=grid