반응형
Container vs Fluid Container
사이트 레핑하는 방법이 두가지로 나뉜다.
Container와 Fluid Container이다.
Container : 반응형 고정 너비 container를 제공한다.
Fluid Container : viewport의 전체 너비에 걸쳐있는 전체 너비 container를 제공한다.
Container 예시코드 및 실행화면
<!DOCTYPE html>
<html lang="en" ?>
<head>
<title>Bootstrap 5 example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>The First Bootstrap Page</h1>
<p>This part is inside a .container class. </p>
<p>the container class provides a responsive fixed width container.</p>
<p>Resize the browser window to see that the container width will change at different breakpoints</p>
</div>
</body>
</html>
Fluid Container 예시코드 및 실행화면
<!DOCTYPE html>
<html lang="en" ?>
<head>
<title>Bootstrap 5 example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>The First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>
반응형
'웹프로그래밍 > bootstrap5' 카테고리의 다른 글
| [bootstrap 5] 부트스트랩 그리드(Grid) & 실습 연습 (0) | 2023.09.16 |
|---|---|
| [bootstrap 5] Bootstrap 5 시작하기 (0) | 2023.09.14 |
댓글