twitter-bootstrap-3
그리드 시스템

미디어 쿼리

Less 파일에서 다음과 같은 미디어 쿼리를 사용하여 그리드 시스템에 키 중단 점을 만듭니다.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

가끔 이러한 미디어 쿼리를 확장하여 최대 너비를 포함시켜 CSS를 더 좁은 장치 집합으로 제한합니다.

@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) { ... }

그리드 옵션

부트 스트랩 그리드 시스템이란?

부트 스트랩 그리드 시스템은 반응이 빠른 웹 사이트 레이아웃을 빠르고 쉽게 만들 수있는 방법을 제공합니다.

Bootstrap 3에는 휴대 전화, 태블릿, 랩톱 및 데스크톱 등과 같은 다양한 유형의 장치에 대한 그리드 레이아웃을 신속하게 작성하기위한 미리 정의 된 그리드 클래스가 포함되어 있습니다.

예를 들어, .col-xs- * 클래스를 사용하여 휴대 전화와 같은 소형 장치의 그리드 열을 만들 수 있습니다. 마찬가지로 태블릿과 같은 작은 화면 장치의 .col-sm- * 클래스, .col-md- * 클래스 데스크톱과 같은 중간 크기 장치 및 대형 데스크톱 화면 용 .col-lg- *에 적합합니다.

다음 표는 새 그리드 시스템의 주요 기능 중 일부를 요약 한 것입니다

가로로 쌓아 올린 상태

하나의 .col-md-* 그리드 클래스 세트를 사용하여 데스크탑 (중형) 장치에서 수평이되기 전에 모바일 장치 및 태블릿 장치 (초소형 범위에서 작은 범위)에 쌓인 기본 그리드 시스템을 만들 수 있습니다. 임의의 .row 그리드 열을 .row .

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

유체 용기

가장 바깥 쪽 .container 를 .container-fluid 로 변경하면 고정 폭 그리드 레이아웃을 전체 너비 레이아웃으로 바꿀 수 있습니다.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

모바일 및 데스크톱

열을 작은 장치에 간단히 쌓는 것을 원하지 않습니까? .col-xs-* .col-md-* 를 열에 추가하여 추가 소형 ​​및 중형 장치 그리드 클래스를 사용하십시오. 아래의 예제를 통해 모든 기능을 이해할 수 있습니다.

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

모바일, 태블릿, 데스크톱

태블릿 .col-sm-* 클래스를 사용하여 더욱 강력하고 강력한 레이아웃을 만들어 이전 예제를 빌드하십시오.

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

열 배치

하나의 행에 12 개 이상의 열이 있으면 하나의 단위로 각 열의 추가 열이 새 행으로 묶입니다.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

반응 형 컬럼 재설정

네 가지 계층의 그리드를 사용할 수있게되면 특정 중단 점에서 열이 다른 열보다 클 때 열이 분명하게 명확하지 않은 문제가 발생할 수 있습니다. 이를 수정하려면 .clearfix 와 반응 형 유틸리티 클래스의 조합을 사용하십시오.

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

응답 중단 점에서의 열 제거 외에도 오프셋, 푸시 또는 풀을 다시 설정해야 할 수 있습니다. 그리드 예제에서 실제로 이것을보십시오.

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

오프셋 열

.col-md-offset-* 클래스를 사용하여 열을 오른쪽으로 이동하십시오. 이러한 클래스는 열의 왼쪽 여백을 * 열만큼 늘립니다. 예를 들어, .col-md-offset-4 는 4 열 위로 .col-md-4 를 이동합니다.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0 클래스로 하위 그리드 계층의 오프셋을 재정의 할 수도 있습니다.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

열 중첩

콘텐츠를 기본 격자로 중첩 시키려면 기존 .col-sm-* 열에 새로운 .row 및 .col-sm-* .row .col-sm-* 열 집합을 추가하십시오. 중첩 된 행에는 최대 12 개 이하의 열을 포함해야합니다 (12 개의 사용 가능한 열을 모두 사용할 필요는 없습니다).

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

열 순서 지정

.col-md-push-* 및 .col-md-pull-* 수정 자 클래스를 사용하여 빌트인 그리드 열의 순서를 쉽게 바꿀 수 있습니다.

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

믹스 및 변수 감소

빠른 레이아웃을 위해 사전 구축 된 그리드 클래스 외에도, 부트 스트랩에는 간단한 변수 레이아웃과 믹스 인이 포함되어있어 자신의 단순하고 의미있는 레이아웃을 신속하게 생성합니다.

변수

변수는 열의 수, 거터 폭 및 부동 열을 시작하는 미디어 쿼리 포인트를 결정합니다. 우리는 위에 나열된 미리 정의 된 그리드 클래스를 생성하고 아래에 나열된 사용자 정의 믹스킨을 생성합니다.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

믹스 인

믹스 인은 그리드 변수와 함께 사용되어 개별 그리드 열에 대한 의미 론적 CSS를 생성합니다.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}