• Q&A
  • 회원가입
  • 로그인

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

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

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012