이윰

그리드 시스템

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

이윰빌더 테마는 반응형 디자인 프레임워크인 Bootstrap 3.x 버전을 채택하여 제작되었습니다.
부트스트랩은 기기나 뷰포트 크기가 증가함에 따라 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