개요
포장 컨테이너, 강력한 그리드 시스템, 유연한 미디어 개체 및 반응형 유틸리티 클래스를 포함하여 Bootstrap 프로젝트를 배치하기 위한 구성 요소 및 옵션입니다.
컨테이너
컨테이너는 부트스트랩에서 가장 기본적인 레이아웃 요소이며 기본 그리드 시스템을 사용할 때 필요합니다 . 컨테이너는 내용을 포함하고 채우고 (때로는) 내용을 가운데에 맞추는 데 사용됩니다. 컨테이너 를 중첩 할 수 있지만 대부분의 레이아웃에는 중첩 컨테이너가 필요하지 않습니다.
부트스트랩은 세 가지 다른 컨테이너와 함께 제공됩니다.
.container
max-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%이고 , , 로 확장됩니다 .sm
md
lg
xl
<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
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에서 특정 요소를 더 높은 값으로 맨 앞으로 가져와 형제 요소 위에 테두리를 표시합니다.2
3
z-index