Source

개요

포장 컨테이너, 강력한 그리드 시스템, 유연한 미디어 개체 및 반응형 유틸리티 클래스를 포함하여 Bootstrap 프로젝트를 배치하기 위한 구성 요소 및 옵션입니다.

컨테이너

컨테이너는 부트스트랩에서 가장 기본적인 레이아웃 요소이며 기본 그리드 시스템을 사용할 때 필요합니다 . 컨테이너는 내용을 포함하고 채우고 (때로는) 내용을 가운데에 맞추는 데 사용됩니다. 컨테이너 를 중첩 할 수 있지만 대부분의 레이아웃에는 중첩 컨테이너가 필요하지 않습니다.

부트스트랩은 세 가지 다른 컨테이너와 함께 제공됩니다.

  • .containermax-width, 각 응답 중단점에서 a를 설정합니다.
  • .container-fluid, 이는 width: 100%모든 중단점에 있습니다.
  • .container-{breakpoint}, width: 100%지정된 중단점까지

아래 표는 각 컨테이너가 max-width원본 .container과 .container-fluid각 중단점에서 어떻게 비교되는지 보여줍니다.

그것들을 실제로 보고 그리드 예제 에서 비교하십시오 .

초소형
<576px 		작은
≥576px 		중간
≥768px 		큰
≥992px 		초대형
≥1200px
.container 100% 540픽셀 720픽셀 960픽셀 1140픽셀
.container-sm 100% 540픽셀 720픽셀 960픽셀 1140픽셀
.container-md 100% 100% 720픽셀 960픽셀 1140픽셀
.container-lg 100% 100% 100% 960픽셀 1140픽셀
.container-xl 100% 100% 100% 100% 1140픽셀
.container-fluid 100% 100% 100% 100% 100%

올인원

기본 .container클래스는 반응형 고정 너비 컨테이너로, max-width각 중단점에서 변경 사항을 의미합니다.

<div class="container">
  <!-- Content here -->
</div>

체액

.container-fluid뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너에 사용 합니다.

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

반응형

반응형 컨테이너는 Bootstrap v4.4의 새로운 기능입니다. 지정된 중단점에 도달할 때까지 너비가 100%인 클래스를 지정할 수 있습니다. 그 후에 max-width는 더 높은 각 중단점에 대해 s를 적용합니다. 예를 들어, 중단점에 도달 .container-sm할 때까지 시작하려면 너비가 100%이고 , , 로 확장됩니다 .smmdlgxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

반응형 중단점

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

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

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

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

소스 CSS를 Sass로 작성하기 때문에 모든 미디어 쿼리는 Sass 믹스인을 통해 사용할 수 있습니다.

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

// 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;
  }
}

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

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

브라우저는 현재 범위 컨텍스트 쿼리 를 지원하지 않기 때문에 이러한 비교에 더 높은 정밀도를 가진 값을 사용하여 분수 너비(예: 높은 dpi 장치의 특정 조건에서 발생할 수 있음)가 있는 접두사 min-및max- 뷰포트 의 제한 사항을 해결합니다. .

다시 한 번, 이러한 미디어 쿼리는 Sass 믹스인을 통해서도 사용할 수 있습니다.

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

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

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

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

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

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

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

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

이러한 미디어 쿼리는 Sass 믹스인을 통해서도 사용할 수 있습니다.

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

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

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

동일한 화면 크기 범위를 대상으로 하는 Sass mixin은 다음과 같습니다.

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

Z-인덱스

여러 부트스트랩 구성 요소 z-index는 콘텐츠를 정렬하는 세 번째 축을 제공하여 레이아웃을 제어하는 ​​데 도움이 되는 CSS 속성을 활용합니다. 탐색, 도구 설명 및 팝오버, 모달 등을 적절하게 계층화하도록 설계된 부트스트랩의 기본 z-인덱스 스케일을 사용합니다.

이러한 더 높은 값은 충돌을 이상적으로 피할 수 있을 만큼 충분히 높고 구체적인 임의의 숫자에서 시작합니다. 툴팁, 팝오버, 탐색 모음, 드롭다운, 모달 등 계층화된 구성 요소 전반에 걸쳐 이러한 표준 세트가 필요하므로 동작에서 합리적으로 일관성을 유지할 수 있습니다. 100+ 또는 + 를 사용하지 않을 이유가 없습니다 500.

우리는 이러한 개별 값의 사용자 지정을 권장하지 않습니다. 하나를 변경하면 모두 변경해야 할 수 있습니다.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

구성 요소(예: 입력 그룹의 버튼 및 입력) 내에서 겹치는 테두리를 처리하기 위해 , 의 낮은 한 자리 z-index값을 사용 하고 기본 1, 호버 및 활성 상태에 대해 사용합니다. hover/focus/active에서 특정 요소를 더 높은 값으로 맨 앞으로 가져와 형제 요소 위에 테두리를 표시합니다.23z-index