여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap - Bootstrap 4 컨테이너
Bootstrap – Bootstrap 4 컨테이너
6개월전 작성
6개월전 수정



Bootstrap 4 컨테이너

컨테이너는 내부 콘텐츠를 채우는 데 사용되며 사용 가능한 두 가지 컨테이너 클래스가 있다.

  1. 클래스 .container는 반응형 고정 너비 컨테이너를 제공한다.
  2. 클래스 는 뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너를.container-fluid 제공한다.
.컨테이너

.container-fluid

 

 

 

 

고정컨테이너

.container 클래스를 사용하여 반응형 고정 너비 컨테이너를 만든다.

너비(max-width)는 화면 크기에 따라 변경된다.


매우 작음


<576px

작음


≥576px

중간


≥768px

대형


≥992px

초대형


≥1200px
최대 너비 100% 540px 720px 960px 1140px
예제
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>
기본 예시
예제 보기

유동컨테이너

.container-fluid 클래스를 사용하여 항상 화면의 전체 너비에 걸쳐 있는 전체 너비 컨테이너를 만든다(width 항상 100%).

예제
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

컨테이너 패딩

기본적으로 컨테이너에는 15px 왼쪽 및 오른쪽 패딩이 있으며 상단 또는 하단 패딩은 없다.
따라서 우리는 더 보기 좋게 만들기 위해 추가 패딩 및 여백과 같은 간격 유틸리티를 자주 사용한다.
예를 들어, .pt-3″16px의 상단 패딩 추가”를 의미한다.

예제
<div class="container pt-3"></div>
기본 예시
예제 보기

컨테이너 테두리 및 색상

테두리 및 색상과 같은 기타 유틸리티도 컨테이너와 함께 사용되는 경우가 많다.

예제
<div class="container p-3 my-3 border"></div>

<div class="container p-3 my-3 bg-dark text-white"></div>

<div class="container p-3 my-3 bg-primary text-white"></div>
기본 예시

나의 첫 번째 부트스트랩 페이지

이 컨테이너에는 테두리와 추가 패딩 및 여백이 있습니다.

나의 첫 번째 부트스트랩 페이지

이 컨테이너에는 어두운 배경색과 흰색 텍스트, 추가 패딩 및 여백이 있습니다.

나의 첫 번째 부트스트랩 페이지

이 컨테이너에는 파란색 배경색과 흰색 텍스트, 추가 패딩 및 여백이 있습니다.

반응형 컨테이너

.container-sm|md|lg|xl 클래스를 사용하여 반응형 컨테이너를 만들 수도 있다.

컨테이너의 는 max-width다양한 화면 크기/뷰포트에 따라 변경된다.

수업
매우 작음


<576px

작음


≥576px

중간


≥768px

대형


≥992px

초대형


≥1200px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
예제
<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>
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그