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

BS3 그리드 구조 (전체 너비 12등분해 배분)

BS3 그리드 옵션

※ 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