예제가 있는 부트스트랩의 컨테이너(3)

이름에서 알 수 있듯이 컨테이너는 무언가를 보관하거나 바인딩하는 데 사용되는 것과 마찬가지로 부트스트랩의 컨테이너는 뷰포트를 통해 콘텐츠를 저장하거나 바인딩하는 데 사용됩니다. 컨테이너는 뷰포트의 4면 모두에서 여백을 제공하여 콘텐츠에 패딩을 추가하고 필요에 따라 변경할 수도 있습니다. 컨테이너는 서로 중첩될 수도 있습니다.

이제 각 클래스에 대해 자세히 알아보겠습니다.

컨테이너

부트스트랩에서 .container 클래스는 뷰포트에서 너비가 고정된 반응형 컨테이너를 생성합니다. 뷰포트의 크기에 따라 컨테이너의 최대 너비를 설정합니다.

아래는 뷰포트의 크기에 따른 .container 클래스의 최대 너비를 설명하는 차트입니다.

	초소형	작게	중간	크게	매우 큼
최대 너비	100%	540px	720px	960픽셀	1140픽셀

예시

예를 들어 더 잘 이해하겠습니다.

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container bg-dark text-white" style>
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

출력

이 코드의 출력은 다음과 같습니다.

예제가 있는 부트스트랩의 컨테이너(3)

용기 유체

부트스트랩에서 .container-fluid 클래스는 뷰포트에서 고정 너비가 100%인 반응형 컨테이너를 만듭니다. 뷰포트의 크기에 관계없이 컨테이너의 최대 너비를 100%로 설정합니다.

아래는 .container-fluid 클래스의 최대 너비를 설명하는 차트입니다.

	초소형	작게	중간	크게	매우 큼
최대 너비	100%	100%	100%	100%	100%

예시

이해를 돕기 위해 예를 들어보겠습니다.

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container-fluid bg-dark text-white">
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

출력

이 코드의 출력은 다음과 같습니다.

예제가 있는 부트스트랩의 컨테이너(3)