[basic] BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)

목차

1. Grid 원리 (= 전체 너비를 12등분해서 배분)
2. Grid 정의
3. Grid 화면너비 구분 코드

 

Grid 원리 (= 전체 너비를 12등분해서 배분)

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

Grid 정의

화면 너비를 12개로 분할해 레이아웃 구성.

 

---

 

1. 그리드 기본 구문

<div class="row">

  <div class="col-화면너비-열개수"></div> 

   .....

</div>

PS. 코드 의미

• row : 행
• col : 열 (※ Column 약어)
• 화면너비 : sm, md, lg 중 하나.
• 열개수 : 1~12 중 하나. 

2. 화면너비 표시 클래스 구문은 BS4와 BS3가 다름.

 

Grid 화면너비 구분 코드

※ 화면너비 구분: 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