중단점

중단점은 부트스트랩의 장치 또는 뷰포트 크기에서 반응형 레이아웃이 작동하는 방식을 결정하는 사용자 지정 가능한 너비입니다.

이 페이지에서

핵심 개념

중단점은 반응형 디자인의 빌딩 블록입니다. 특정 뷰포트 또는 장치 크기에서 레이아웃을 조정할 수 있는 시기를 제어하는 데 사용합니다.
미디어 쿼리를 사용하여 중단점으로 CSS를 설계합니다. 미디어 쿼리는 브라우저 및 운영 체제 매개변수 집합을 기반으로 스타일을 조건부로 적용할 수 있는 CSS의 기능입니다. min-width우리는 미디어 쿼리에서 가장 일반적으로 사용 합니다.
모바일 우선, 반응형 디자인이 목표입니다. Bootstrap의 CSS는 최소한의 스타일을 적용하여 레이아웃이 가장 작은 중단점에서 작동하도록 한 다음 스타일에 레이어를 적용하여 더 큰 장치에 맞게 해당 디자인을 조정하는 것을 목표로 합니다. 이렇게 하면 CSS가 최적화되고 렌더링 시간이 향상되며 방문자에게 훌륭한 경험이 제공됩니다.

사용 가능한 중단점

부트스트랩에는 반응형 빌드를 위해 그리드 계층 이라고도 하는 6개의 기본 중단점이 포함되어 있습니다. 이 중단점은 소스 Sass 파일을 사용하는 경우 사용자 지정할 수 있습니다.

중단점	클래스 중위	치수
X-스몰	없음	<576픽셀
작은	`sm`	≥576픽셀
중간	`md`	≥768픽셀
크기가 큰	`lg`	≥992픽셀
특대	`xl`	≥1200픽셀
특대형	`xxl`	≥1400픽셀

각 중단점은 너비가 12의 배수인 컨테이너를 편안하게 수용하도록 선택되었습니다. 중단점은 또한 일반적인 장치 크기 및 뷰포트 치수의 하위 집합을 나타냅니다. 모든 사용 사례 또는 장치를 구체적으로 대상으로 하지는 않습니다. 대신, 이 제품군은 거의 모든 장치에 구축할 수 있는 강력하고 일관된 기반을 제공합니다.

이러한 중단점은 Sass를 통해 사용자 지정할 수 있습니다. 스타일시트의 Sass 맵에서 찾을 수 있습니다 _variables.scss.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Sass 맵과 변수를 수정하는 방법에 대한 자세한 정보와 예제 는 그리드 문서의 Sass 섹션을 참조하십시오 .

미디어 쿼리

Bootstrap은 모바일 우선으로 개발되었기 때문에 몇 가지 미디어 쿼리 를 사용하여 레이아웃과 인터페이스에 적합한 중단점을 만듭니다. 이러한 중단점은 대부분 최소 뷰포트 너비를 기반으로 하며 뷰포트가 변경됨에 따라 요소를 확장할 수 있습니다.

최소 너비

Bootstrap은 기본적으로 레이아웃, 그리드 시스템 및 구성 요소에 대한 소스 Sass 파일에서 다음 미디어 쿼리 범위(또는 중단점)를 사용합니다.

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

이러한 Sass 믹스인은 Sass 변수에 선언된 값을 사용하여 컴파일된 CSS에서 변환합니다. 예를 들어:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

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

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

최대 너비

우리는 때때로 다른 방향(주어진 화면 크기 이하 )으로 이동하는 미디어 쿼리를 사용합니다.

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

이 믹스인은 선언된 중단점을 가져와서 빼서 값 .02px으로 사용합니다 max-width. 예를 들어:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

왜 .02px를 빼나요? 브라우저는 현재 범위 컨텍스트 쿼리 를 지원하지 않으므로 더 높은 정밀도의 값을 사용하여 분수 너비(예: 높은 dpi 장치의 특정 조건에서 발생할 수 있음)가 있는 접두사 min-및max- 표시 영역 의 제한을 해결합니다 .

단일 중단점

최소 및 최대 중단점 너비를 사용하여 화면 크기의 단일 세그먼트를 대상으로 하는 미디어 쿼리 및 믹스인도 있습니다.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

예를 들어 @include media-breakpoint-only(md) { ... }결과는 다음과 같습니다.

@media (min-width: 768px) and (max-width: 991.98px) { ... }

중단점 사이

마찬가지로 미디어 쿼리는 여러 중단점 너비에 걸쳐 있을 수 있습니다.

@include media-breakpoint-between(md, xl) { ... }

결과:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }