부트스트랩은 기기나 뷰포트 크기가 증가함에 따라 12열이 적절하게 확대되는 반응형, 모바일 우선 유동 그리드 시스템입니다.
그리드 시스템은 당신의 콘텐츠를 보관할 행과 열 시리즈를 통해 페이지 레이아웃들 만드는데 사용되어집니다.
행(row)은 반드시 적절한 정렬과 패딩을 위해서.container (fixed-width)나.container-fluid (full-width)안에 위치해야 합니다.- 열들의 수평그룹을 만드는데 행(row)을 이용하세요.
- 콘텐츠는 열안에 위치해야 합니다. 그리고 열들만이 행의 바로 아래에 올 수 있습니다.
- 열은
padding으로 사이 간격을 만듭니다. 패딩은 행 내에서 첫열과 마지막열을 위해 .row 내에 음수 마진으로 offset 되어 있습니다. - 음수 마진은 아래의 예제들이 내어쓰기가 되어 있는 이유입니다. 그것은 그리드 열 내의 콘텐츠는 비그리드 콘텐츠와 정렬되기 위함입니다.
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:.container또는.container-fluid안에.row로 행을 만듭니다..col-*-*:.row안에.col-*-*로 열을 만듭니다
그리드 시스템에서 주요 분기점을 만들기 위해 다음의 미디어 쿼리들을 사용합니다.
/* 매우 작은 기기들 (모바일폰, 768px 보다 작은) */
/* 부트스트랩에서 이것은 기본이므로 미디어쿼리가 없습니다. */
/* 작은 기기들 (태블릿, 768px 이상) */
@media (min-width: @screen-sm-min) { ... }
/* 중간 기기들 (데스크탑, 992px 이상) */
@media (min-width: @screen-md-min) { ... }
/* 큰 기기들 (큰 데스크탑, 1200px 이상) */
@media (min-width: @screen-lg-min) { ... }
| 매우 작은 기기 모바일폰 (<768px) | 작은 기기 태블릿 (≥768px) | 중간 기기 데스크탑 (≥992px) | 큰 기기 데스크탑 (≥1200px) | |
|---|---|---|---|---|
| 그리드 적용 | 항상 | 분기점보다 크면 적용 | ||
| 콘테이너 너비 | 없음 (auto) | 750px | 970px | 1170px |
| 클래스 접두사 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 컬럼 수 | 12 | |||
| 컬럼 너비 | Auto | ~62px | ~81px | ~97px |
| 사이 너비 | 30px (컬럼의 양쪽에 15px 씩) | |||
| 중첩 | 예 | |||
| 오프셋 | 예 | |||
| 컬럼 순서정하기 | 예 | |||
기기들에 CSS 를 좁게 적용하기 위해 미디어쿼리에 max-width 를 포함하여 부연합니다.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
| 매우 작은 기기들 모바일폰 (<768px) | 작은 기기들 태블릿 (≥768px) | 중간 기기들 데스크탑 (≥992px) | 큰 기기들 데스크탑 (≥1200px) | |
|---|---|---|---|---|
.visible-xs |
보임 | 숨겨짐 | 숨겨짐 | 숨겨짐 |
.visible-sm |
숨겨짐 | 보임 | 숨겨짐 | 숨겨짐 |
.visible-md |
숨겨짐 | 숨겨짐 | 보임 | 숨겨짐 |
.visible-lg |
숨겨짐 | 숨겨짐 | 숨겨짐 | 보임 |
.hidden-xs |
숨겨짐 | 보임 | 보임 | 보임 |
.hidden-sm |
보임 | 숨겨짐 | 보임 | 보임 |
.hidden-md |
보임 | 보임 | 숨겨짐 | 보임 |
.hidden-lg |
보임 | 보임 | 보임 | 숨겨짐 |
그리드 클래스인 .col-md-* 싱글 세트를 사용하여, 당신은 데스크탑(중간) 기기에서 수평으로 되기전까지, 모바일 기기와 태블릿 기기(매우 작음에서 작음까지)에서 쌓이기 시작하는 기본 그리드 시스템을 만들 수 있다. .row 안에 그리드 컬럼을 놓으세요.
See the Pen bootstrap grid1 by kero (@hklim82) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>- 반응형 컬럼 초기화
사용가능한 4등급의 그리드들과 특정 분기점에서, 컬럼들이 하나가 다른 컬럼보다 긴 경우 명확하게 클리어 되지 않을 수 있다. 그걸 고치기 위해서는,.clearfix와 우리의 반응형 유틸리티 클래스들의 조합을 사용하면 됩니다. col-* -offset-*
.col-md-offset-* 클래스를 사용하여 컬럼을 우측으로 옮기세요. 이 클래스들은 * 컬럼만큼 한 컬럼의 좌측마진을 증가하게 합니다. 예를 들어, .col-md-offset-4 는 .col-md-4 을 4컬럼만큼 이동시킵니다.- 컬럼 중첩하기
기본그리드로 콘텐츠를 중첩하려면, 존재하는 .col-md-* 컬럼 내에 새로운 .row 와 .col-md-* 컬럼 세트를 추가하세요. 중첩된 행은 합쳐서 12 가 되는 하나의 컬럼 세트가 됩니다. col-push와 col-pull
.col-md-push-* 와.col-md-pull-* 수식클래스들로 그리드 컬럼들의 순서를 쉽게 변경할수 있습니다.
See the Pen bootstrap grid2 by kero (@hklim82) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>