Bootstrap 5 컨테이너

Bootstrap 5 컨테이너

전장에서 배웠듯 Bootstrap는 사이트 내용을 감싸는 요소를 포함해야 합니다.

우리는 컨테이너에 내용을 채우고 두 가지 컨테이너 클래스를 사용합니다:

  • .container 클래스는 반응형 고정 너비 컨테이너를 제공합니다
  • .container-fluid 클래스는 전체 뷰포트 너비를 가진 전체 너비 컨테이너를 제공합니다

고정 컨테이너

사용 .container 클래스는 반응형 고정 너비 컨테이너를 만듭니다.

주의하십시오, 그 너비(max-width는 다양한 스크린 크기에서 변화합니다:

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

아래의 예제를 열고 브라우저 창 크기를 조정하여 컨테이너 너비가 다양한 절점에서 어떻게 변하는지 확인해 보세요:

예제

<div class="container">
  <h1>제 1장 Bootstrap 페이지</h1>
  <p>이는 일부 텍스트입니다.</p>
</div>

직접 시도해 보세요

XXL 절점(≥1400px)은 Bootstrap 5에서 새로 추가되었으며, Bootstrap 4에서 가장 큰 절점은 Extra large(≥1200px)입니다.

유체 컨테이너

사용 .container-fluid 클래스는 전체 스크린 너비를 가진 전체 너비 컨테이너를 만듭니다. 이는width 항상 100%）：

예제

<div class="container-fluid">
  <h1>제 1장 Bootstrap 페이지</h1>
  <p>이는 일부 텍스트입니다.</p>
</div>

직접 시도해 보세요

컨테이너 여백

기본적으로, 컨테이너는 왼쪽과 오른쪽 여백(왼쪽과 오른쪽 내백)이 있으며, 위쪽과 아래쪽 여백(위쪽과 아래쪽 내백)은 없습니다. 따라서 우리는 자주 spacing 도구와 같은 추가적인 여백과 마argins를 제공하는(utilities)를 포함합니다. 예를 들어,.pt-5 의 의미는 "빠른 추가"입니다.위填充：

예제

<div class="container pt-5"></div>

직접 시도해 보세요

컨테이너 경계선과 색상

밴드와 색상과 같은 다른 도구도 자주 컨테이너와 함께 사용됩니다：

예제

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

직접 시도해 보세요

색상과 경계선 도구에 대해 더 많이 배울 수 있습니다.

반응형 컨테이너

또한 사용할 수 있습니다 .container-sm|md|lg|xl 클래스를 사용하여 컨테이너가 언제 응답해야 하는지 결정합니다.

컨테이너의 max-width 다양한 스크린 크기/뷰포트에서 변할 것입니다：

클래스 Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

예제

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

직접 시도해 보세요