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

[grid] BS3 - Grid (그리드) - 반응형 레이아웃 ★★★

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

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

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