Grid System

이윰빌더에서 사용하는 시즌3 Grid System의 ShortCodes 입니다.

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며 클릭하면 소스코드를 볼 수 있습니다.

부트스트랩은 기기나 뷰포트 크기가 증가함에 따라 12 열이 적절하게 확대되는 반응형, 모바일 우선 유동 그리드 시스템입니다. 그것은 쉬운 레이아웃을 위해 미리 정해진 클래스들 뿐만 아니라 더 강력하고 시멘틱한 레이아웃을 생성하기 위한 믹스인을 포함하고 있습니다.

그리드 옵션
매우 작은 기기 작은 기기 중간 기기 큰 기기
Phones (<768px) Tablets (≥768px) Desktops (≥992px) Desktops (≥1200px)
그리드 적용 항상 분기점보다 크면 적용
콘테이너 너비 없음 (auto) 750px 970px 1170px
클래스 접두사 .col-xs- .col-sm- .col-md- .col-lg-
컬럼 수 12
컬럼 너비 Auto ~62px ~81px ~97px
사이 너비 30px (컬럼의 양쪽에 15px 씩)
중첩
오프셋
컬럼 순서정하기
쌓이다가 수평으로

그리드 클래스인 .col-md-* 싱글 세트를 사용하여, 당신은 데스크탑(중간) 기기에서 수평으로 되기전까지, 모바일 기기와 태블릿 기기(매우 작음에서 작음까지)에서 쌓이기 시작하는 기본 그리드 시스템을 만들 수 있습니다. .row 안에 그리드 컬럼을 놓으세요.

그리드 예제

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
모바일과 데스크탑

보다 작은 기기들에서 당신의 컬럼들이 간단하게 쌓이는 것을 원하세요? 당신의 컬럼에 .col-xs-* .col-md-* 를 추가하여 매우 작은 기기와 중간 기기 그리드 클래스들을 사용하세요. 그것이 어떻게 작동되는지 아래의 예제를 보세요.

그리드 예제

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
모바일, 태블릿, 데스크탑

이전 예제를 태블릿 .col-sm-* 클래스들과 함께 좀더 역동적이고 힘찬 레이아웃들로 만들어보세요.

그리드 예제

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
열 감싸기

만약 한행에 12열보다 많이 배치된다면, 남은 열은, 하나의 유닛처럼 새로운 라인에 감싸지게 됩니다

그리드 예제

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
반응형 컬럼 초기화

사용가능한 4등급의 그리드들과 특정 분기점에서, 컬럼들이 하나가 다른 컬럼보다 긴 경우 명확하게 클리어 되지 않을 수 있다. 그걸 고치기 위해서는, .clearfix 와 우리의 responsive utility classes 의 조합을 사용하면 됩니다.

그리드 예제

.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
컬럼 오프셋하기

.col-md-offset-* 클래스를 사용하여 컬럼을 우측으로 옮기세요. 이 클래스들은 * 컬럼만큼 한 컬럼의 좌측마진을 증가하게 합니다. 예를 들어, .col-md-offset-4.col-md-4 을 4컬럼만큼 이동시킵니다.

그리드 예제

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
컬럼 중첩하기

기본그리드로 당신의 콘텐츠를 중첩하려면, 존재하는 .col-md-* 컬럼 내에 새로운 .row.col-md-* 컬럼 세트를 추가하세요. 중첩된 행은 합쳐서 12 가 되는 하나의 컬럼 세트를 포함해야 합니다.

그리드 예제

Level 1: .col-sm-12
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
컬럼 순서정하기

.col-md-push-*.col-md-pull-* 수식클래스들로 우리의 그리드 컬럼들의 순서를 쉽게 변경하세요.

그리드 예제

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9