Bootstrap Grid system

Bootstrap Grid system

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

미디어 쿼리들

우리는 우리의 그리드 시스템에서 주요 분기점을 만들기 위해 다음의 미디어 쿼리들을 사용합니다.

우리는 가끔 기기들에 CSS 를 좁게 적용하기 위해 미디어쿼리에 max-width 를 포함하여 부연합니다.

그리드 옵션들

다양한 기기들을 넘나드는 부트스트랩 그리드 시스템을 간단한 테이블로 살펴보세요.

매우 작은 기기 모바일폰 (<768px) 작은 기기 태블릿 (≥768px) 중간 기기 데스크탑 (≥992px) 큰 기기 데스크탑 (≥1200px)
그리드 적용 항상 분기점보다 크면 적용
container 클래스 최대너비 None (auto) 750px 970px 1170px
클래스 접두사 .col-xs- .col-sm- .col-md- .col-lg-
컬럼 수 12
컬럼 최대 너비 Auto 60px 78px 95px
사이 너비 30px (컬럼의 양쪽에 15px 씩)
중첩
오프셋 없음
컬럼 순서 없음

예제: 쌓이는 것에서 수평으로

.col-md-* 그리드 클래스 세트 하나만 사용하는 것으로, 당신은 모바일과 태블릿 기기(매우 작은부터 작은)에서는 쌓이다가 데스크탑에서는 수평적으로 되는 간단한 그리드 시스템을 만들수 있다.

.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-sm-6 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4

반응형 컬럼 초기화

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

반응형 분기점에서 컬럼을 클리어하는 것과 더불어, 당신은 오프셋을 초기화 할 필요가 있습니다. 오프셋은 (두번째로)작은 그리드 등급에서부터 사용가능하므로, 이러한 초기화는 중간이나 큰 그리드 등급에서만 사용할 수 있습니다.

좀더 빠른 모바일 친화 개발을 위해, 미디어 쿼리로 구분하는 기기로 콘텐츠를 보이고 숨기는데 이 유틸리티 클래스를 사용하세요. 또한 프린트할 때의 콘텐츠도 선택할 수 있습니다.

같은 사이트의 완전히 다른 버전을 만드는 것을 피하기 위해 제한적으로 이것들을 사용하는 것을 시도해 보세요. 대신, 각 기기의 표현을 보완하기 위해 사용하세요. 반응형 유틸리티는 현재 블록과 테이블 토글링을 위해 사용 가능합니다. 인라인과 테이블 요소의 사용은 현재 지원되지 않습니다.

가능한 클래스들

뷰포트 분기점을 넘어 콘텐츠를 토글링하기 위한 가능한 클래스들을 혼자 아니면 조합으로 사용하세요.

매우 작은 기기들 모바일폰 (<768px) 작은 기기들 태블릿 (≥768px) 중간 기기들 데스크탑 (≥992px) 큰 기기들 데스크탑 (≥1200px)
.visible-xs 보임
.visible-sm 보임
.visible-md 보임
.visible-lg 보임
.hidden-xs 보임 보임 보임
.hidden-sm 보임 보임 보임
.hidden-md 보임 보임 보임
.hidden-lg 보임 보임 보임

프린트 클래스

보통 반응형 클래스들과 비슷하게, 프린트를 위해 토글링할 클래스에 이것들을 사용하세요.

클래스 브라우저 프린트
.visible-print 보임
.hidden-print 보임

테스트 케이스

반응형 유틸리티 클래스를 테스트하려면 당신의 브라우저 크기를 조절하거나 다른 기기에서 이 주소를 불러오세요.

...에서 보이는

녹색 체크표시는 요소가 당신의 현재 뷰포트에서 보이는 것 임을 가르킵니다.

✔ 매우 작은 기기에서 보임
✔ 작은 기기에서 보임
중간 기기 ✔ 중간 기기에서 보임
✔ 큰 기기에서 보임
✔ 매우 작은 기기와 작은 기기에서 보임
✔ 중간 기기와 큰 기기에서 보임
✔ 작은 기기와 중간 기기에서 보임
✔ 작은 기기와 큰 기기에서 보임
✔ 매우 작은 기기와 큰 기기에서 보임
✔ 작은 기기와 중간 기기에서 보임

...에서 가려진

여기, 녹색 체크는 당신의 현재 뷰포트에서 요소가 가려지고 있음을 가르킵니다.

매우 작은 기기
작은 기기
중간 기기 ✔ 중간 기기에서 숨겨짐
큰 기기
매우 작은 기기와 작은 기기
중간 기기와 큰 기기
매우 작은 기기와 중간 기기
작은 기기와 큰 기기
매우 작은 기기와 큰 기기
작은 기기와 중간 기기


출처 Bootstrap