그리드 시스템

강력한 모바일 우선 플렉스박스 그리드를 사용하여 12개의 열 시스템, 5개의 기본 반응형 계층, Sass 변수 및 믹스인, 수십 개의 사전 정의된 클래스 덕분에 모든 모양과 크기의 레이아웃을 구축할 수 있습니다.

작동 방식

Bootstrap의 그리드 시스템은 일련의 컨테이너, 행 및 열을 사용하여 콘텐츠를 레이아웃하고 정렬합니다. flexbox 로 제작되었으며 완벽하게 반응합니다. 다음은 그리드가 어떻게 결합되는지에 대한 예이며 심층적인 설명입니다.

flexbox를 처음 사용하거나 익숙하지 않습니까? 배경, 용어, 지침 및 코드 조각에 대한 이 CSS Tricks flexbox 가이드를 읽으십시오 .

세 개의 열 중 하나

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

위의 예에서는 사전 정의된 그리드 클래스를 사용하여 소형, 중형, 대형 및 초대형 장치에 동일한 너비의 열 3개를 생성합니다. 이러한 열은 부모가 있는 페이지의 중앙에 .container있습니다.

분해하면 작동 방식은 다음과 같습니다.

컨테이너는 사이트 콘텐츠를 중앙에 놓고 수평으로 채우는 수단을 제공합니다. .container반응형 픽셀 너비 또는 모든 표시 영역 및 장치 크기에 사용 .container-fluid합니다 .width: 100%
행은 열의 래퍼입니다. 각 열에는 padding그 사이의 공간을 제어하기 위한 수평(거터라고 함)이 있습니다. 그런 padding다음 음수 여백이 있는 행에 대해 상쇄됩니다. 이렇게 하면 열의 모든 콘텐츠가 시각적으로 왼쪽 아래에 정렬됩니다.
그리드 레이아웃에서 콘텐츠는 열 내에 배치되어야 하며 열만 행의 직계 자식일 수 있습니다.
flexbox 덕분에 지정되지 않은 그리드 열 width은 자동으로 동일한 너비의 열로 레이아웃됩니다. 예를 들어 will 의 4개 인스턴스 .col-sm는 각각 자동으로 작은 중단점에서 25% 이상 너비가 됩니다. 더 많은 예를 보려면 자동 레이아웃 열 섹션을 참조하세요 .
열 클래스는 행당 가능한 12개 중에서 사용하려는 열의 수를 나타냅니다. 따라서 3개의 동일한 너비 열이 필요하면 사용할 수 있습니다 .col-4.
열 width은 백분율로 설정되므로 항상 유동적이며 상위 요소를 기준으로 크기가 조정됩니다.
padding열에는 개별 열 사이의 거터를 만들기 위해 가로 가 있지만 에 있는 margin행과 padding열 에서 제거할 수 있습니다 ..no-gutters.row
그리드를 반응형으로 만들기 위해 각 반응형 중단점 마다 하나씩 5개의 그리드 중단점이 있습니다 . 모든 중단점(초소형), 소형, 중형, 대형 및 초대형입니다.
그리드 중단점은 최소 너비 미디어 쿼리를 기반으로 합니다. 즉, 하나의 중단점과 그 위에 있는 모든 중단점 에 적용됩니다(예: .col-sm-4소형, 중형, 대형 및 초대형 장치에 적용되지만 첫 번째 xs중단점에는 적용되지 않음).
보다 의미 있는 마크업을 위해 미리 정의된 그리드 클래스(예: .col-4) 또는 Sass 믹스 인을 사용할 수 있습니다.

일부 HTML 요소를 플렉스 컨테이너로 사용할 수 없는 것과 같은 flexbox 와 관련된 제한 사항과 버그에 유의하십시오 .

그리드 옵션

Bootstrap은 대부분의 크기를 정의하는 데 ems 또는 s를 사용하지만 s는 그리드 중단점 및 컨테이너 너비에 사용됩니다. 이는 뷰포트 너비가 픽셀 단위이고 글꼴 크기 에 따라 변경되지 않기 때문 입니다.rempx

편리한 표를 사용하여 부트스트랩 그리드 시스템의 여러 측면이 여러 장치에서 어떻게 작동하는지 확인하십시오.

	초소형 <576px	작은 ≥576px	중간 ≥768px	큰 ≥992px	초대형 ≥1200px
최대 컨테이너 너비	없음(자동)	540픽셀	720픽셀	960픽셀	1140픽셀
클래스 접두사	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
열 수	12
거터 폭	30px(열의 양쪽에 15px)
중첩 가능	예
열 순서	예

자동 레이아웃 열

와 같이 명시적으로 번호가 매겨진 클래스 없이 쉽게 열 크기를 조정하기 위해 중단점별 열 클래스를 활용합니다 .col-sm-6.

동일한 너비

예를 들어, 다음은 모든 장치와 뷰포트에 적용되는 두 가지 그리드 레이아웃 xs입니다 xl. 필요한 각 중단점에 대해 단위 없는 클래스를 원하는 수만큼 추가하면 모든 열의 너비가 동일합니다.

1/2

2/2

1/3

2/3

3/3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

동일한 너비의 여러 줄

열을 나누려는 위치를 새 줄로 삽입하여 여러 줄에 걸쳐 있는 동일한 너비의 열을 만듭니다 .w-100. 반응형 디스플레이 유틸리티.w-100 와 혼합하여 휴식 시간을 반응형으로 만드십시오 .

명시 적 flex-basis또는 border. _ 이전 브라우저 버전에 대한 해결 방법이 있지만 대상 브라우저가 버그가 있는 버전에 속하지 않는 경우에는 필요하지 않습니다.

안부

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

하나의 열 너비 설정

flexbox 그리드 열에 대한 자동 레이아웃은 또한 한 열의 너비를 설정하고 형제 열이 주위에서 자동으로 크기를 조정하도록 할 수 있음을 의미합니다. 미리 정의된 그리드 클래스(아래 표시된 대로), 그리드 믹스인 또는 인라인 너비를 사용할 수 있습니다. 다른 열은 중앙 열의 너비에 관계없이 크기가 조정됩니다.

1/3

3/2(넓음)

3/3

1/3

3/2(넓음)

3/3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

가변 너비 콘텐츠

클래스를 사용 col-{breakpoint}-auto하여 콘텐츠의 자연스러운 너비에 따라 열의 크기를 조정합니다.

1/3

가변 너비 콘텐츠

3/3

1/3

가변 너비 콘텐츠

3/3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

반응형 수업

Bootstrap의 그리드에는 복잡한 반응형 레이아웃을 구축하기 위한 5개 계층의 사전 정의된 클래스가 포함되어 있습니다. 초소형, 소형, 중형, 대형 또는 초대형 장치에서 열의 크기를 원하는 대로 사용자 정의하십시오.

모든 중단점

가장 작은 장치에서 가장 큰 장치까지 동일한 그리드의 경우 .col및 .col-*클래스를 사용합니다. 특정 크기의 열이 필요한 경우 번호가 지정된 클래스를 지정하십시오. 그렇지 않으면 에 충실하십시오 .col.

안부

열-8

4열

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

수평으로 쌓임

단일 .col-sm-*클래스 세트를 사용하여 스택에서 시작하여 작은 중단점( )에서 수평이 되는 기본 그리드 시스템을 만들 수 있습니다 sm.

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

믹스 앤 매치

열이 일부 그리드 계층에 쌓이는 것을 원하지 않습니까? 필요에 따라 각 계층에 대해 서로 다른 클래스를 조합하여 사용합니다. 모든 작동 방식에 대한 더 나은 아이디어는 아래 예를 참조하십시오.

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-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-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

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

거터

거터는 중단점별 패딩 및 음수 여백 유틸리티 클래스에 의해 응답적으로 조정할 수 있습니다. 주어진 행의 거터를 변경하려면 음수 여백 유틸리티를 s .row에서 일치하는 패딩 유틸리티를 쌍으로 연결하십시오 .col. 다시 일치 하는 패딩 유틸리티를 사용하여 원치 않는 오버플로를 방지하기 위해 .container또는 부모도 조정해야 할 수 있습니다..container-fluid

lg다음은 큰( ) 중단점 이상 에서 부트스트랩 그리드를 사용자 지정하는 예입니다 . .col로 패딩을 늘리고 부모에서 로 이에 .px-lg-5대응 한 다음 로 래퍼 를 조정했습니다 ..mx-lg-n5.row.container.px-lg-5

사용자 정의 열 패딩

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

행 열

반응형 .row-cols-*클래스를 사용하여 콘텐츠 및 레이아웃을 가장 잘 렌더링하는 열 수를 빠르게 설정합니다. .col-*일반 클래스는 개별 열에 적용되는 반면 (예: .col-md-4), 행 열 클래스는 부모 .row에 바로 가기로 설정됩니다.

이러한 행 열 클래스를 사용하여 기본 그리드 레이아웃을 빠르게 생성하거나 카드 레이아웃을 제어할 수 있습니다.

열

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

열

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

열

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

열

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

열

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

함께 제공되는 Sass mixin을 사용할 수도 있습니다 row-cols().

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

조정

flexbox 정렬 유틸리티를 사용하여 세로 및 가로로 열을 정렬합니다. Internet Explorer 10-11은 플렉스 컨테이너가 아래와 같이 있는 경우 플렉스 항목의 수직 정렬을 지원하지 않습니다 . min-height 자세한 내용은 Flexbugs #3을 참조하십시오.

수직 정렬

세 개의 열 중 하나

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

세 개의 열 중 하나

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

수평 정렬

두 열 중 하나

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

거터 없음

사전 정의된 그리드 클래스에서 열 사이의 거터는 를 사용하여 제거할 수 있습니다 .no-gutters. 이것은 모든 직계 자식 열에서 margin음수 및 .row가로 를 제거합니다.padding

다음은 이러한 스타일을 만들기 위한 소스 코드입니다. 열 재정의는 첫 번째 자식 열로만 범위가 지정되고 속성 선택기 를 통해 대상이 지정됩니다 . 이렇게 하면 보다 구체적인 선택기가 생성되지만 간격 유틸리티 를 사용하여 열 패딩을 추가로 사용자 지정할 수 있습니다 .

엣지 투 엣지 디자인이 필요하십니까? 부모를 삭제 .container하거나 .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

실제로는 다음과 같습니다. 미리 정의된 다른 모든 그리드 클래스(열 너비, 반응 계층, 재정렬 등 포함)와 함께 계속 사용할 수 있습니다.

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

열 줄 바꿈

단일 행에 12개 이상의 열이 있는 경우 추가 열의 각 그룹은 하나의 단위로 새 줄로 줄바꿈됩니다.

.col-9

.col-4
9 + 4 = 13 > 12이므로 이 4열 너비 div는 하나의 연속 단위로 새 줄에 래핑됩니다.

.col-6
후속 열은 새 줄을 따라 계속됩니다.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-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-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

열 나누기

flexbox에서 열을 새 줄로 나누려면 약간의 해킹이 필요합니다. 열을 새 줄로 묶고 width: 100%싶은 곳에 요소를 추가하세요. 일반적으로 이것은 여러 .rows로 수행되지만 모든 구현 방법이 이를 설명할 수 있는 것은 아닙니다.

.col-6 .col-sm-3

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

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

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

반응형 디스플레이 유틸리티 를 사용하여 특정 중단점에 이 중단을 적용할 수도 있습니다 .

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

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

재정렬

주문 클래스

콘텐츠의 시각적 순서.order- 를 제어하기 위해 클래스를 사용 합니다. 이러한 클래스는 반응하므로 중단점(예: )으로 설정할 수 있습니다. 5개 그리드 계층 모두 에 대한 지원이 포함됩니다 .order.order-1.order-md-2112

DOM의 첫 번째, 적용된 순서 없음

DOM에서 두 번째, 더 큰 순서로

DOM의 세 번째, 1의 순서

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

와 ( )를 각각 적용하여 요소 를 변경하는 반응형 .order-first및 .order-last클래스 도 있습니다. 이러한 클래스는 필요에 따라 번호가 매겨진 클래스와 혼합될 수도 있습니다 .orderorder: -1order: 13order: $columns + 1.order-*

DOM에서 첫 번째, 마지막에 주문

DOM에서 두 번째, 순서가 지정되지 않음

DOM에서 세 번째, 먼저 주문됨

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

열 오프셋

.offset-반응형 그리드 클래스와 여백 유틸리티 의 두 가지 방법으로 그리드 열을 오프셋할 수 있습니다 . 그리드 클래스는 열과 일치하도록 크기가 조정되는 반면 여백은 오프셋 너비가 가변적인 빠른 레이아웃에 더 유용합니다.

오프셋 클래스

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

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

응답 중단점에서 열 지우기 외에도 오프셋을 재설정해야 할 수 있습니다. 그리드 예제 에서 실제로 이것을 참조하십시오 .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-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 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

마진 유틸리티

v4에서 flexbox로 이동하면서 마진 유틸리티를 사용 .mr-auto하여 형제 열을 서로 멀리 떨어뜨릴 수 있습니다.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

중첩

기본 그리드를 사용하여 콘텐츠를 중첩하려면 기존 열 내에 새로운 열 .row집합을 추가합니다 . 중첩된 행에는 최대 12개 이하의 열을 추가하는 열 집합이 포함되어야 합니다(사용 가능한 열 12개를 모두 사용할 필요는 없음)..col-sm-*.col-sm-*

레벨 1: .col-sm-9

레벨 2: .col-8 .col-sm-6

레벨 2: .col-4 .col-sm-6

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

Sass 믹스인

Bootstrap의 소스 Sass 파일을 사용할 때 Sass 변수와 믹스인을 사용하여 사용자 정의, 의미 체계 및 반응형 페이지 레이아웃을 생성할 수 있는 옵션이 있습니다. 사전 정의된 그리드 클래스는 이러한 동일한 변수와 믹스인을 사용하여 빠른 반응형 레이아웃을 위해 즉시 사용할 수 있는 전체 클래스 제품군을 제공합니다.

변수

변수와 맵은 열 수, 여백 너비 및 부동 열을 시작할 미디어 쿼리 지점을 결정합니다. 우리는 이것을 사용하여 위에 설명된 미리 정의된 그리드 클래스와 아래 나열된 사용자 지정 믹스인을 생성합니다.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

믹신

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

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

사용 예

변수를 사용자 정의 값으로 수정하거나 기본값과 함께 믹스인을 사용할 수 있습니다. 다음은 기본 설정을 사용하여 간격이 있는 2열 레이아웃을 만드는 예입니다.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

주요 내용

보조 콘텐츠

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

그리드 사용자 정의

내장된 그리드 Sass 변수와 맵을 사용하여 사전 정의된 그리드 클래스를 완전히 사용자 정의할 수 있습니다. 계층 수, 미디어 쿼리 크기 및 컨테이너 너비를 변경한 다음 다시 컴파일합니다.

기둥 및 거터

그리드 열의 수는 Sass 변수를 통해 수정할 수 있습니다. 열 거터의 너비를 설정하는 $grid-columns동안 각 개별 열의 너비(백분율)를 생성하는 데 사용됩니다 .$grid-gutter-width

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

그리드 계층

열 자체를 넘어 그리드 계층의 수를 사용자 정의할 수도 있습니다. 4개의 그리드 계층만 원하는 경우 및 다음과 같이 업데이트 $grid-breakpoints합니다 $container-max-widths.

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass 변수 또는 맵을 변경할 때 변경 사항을 저장하고 다시 컴파일해야 합니다. 그렇게 하면 열 너비, 오프셋 및 순서에 대한 사전 정의된 그리드 클래스의 새로운 세트가 출력됩니다. 반응형 가시성 유틸리티도 사용자 지정 중단점을 사용하도록 업데이트됩니다. 그리드 값을 px( rem, em, 또는 가 %아님) 설정해야 합니다.