그리드 시스템이란?
- 부트스트랩을 사용할때 웹페이지에서 콘텐츠들을
화면 크기에 따라 달리지게 하는 반응형 레이아웃을 만들수 있게 해주는 것입니다 - 그리드시스템은 컨테이너 안에서만 작동하므로 페이지 상에 최소 한개 이상 컨테이너가 있어야 작동 합니다.
- 부트스트랩의 모든 행에는 분배될 공간이 12유닛씩 있습니다.
정말 12 유닛씩 있는지 확인 해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<body>
<div class="container">
<h1 class="display-3 text-center text-primary">the grid systtem</h1>
<div class="row">
<div class="col-3 bg-success text-center"> 3 </div>
<div class="col-3 bg-success text-center"> 3 </div>
<div class="col-6 bg-danger text-center"> 6 </div>
<div class="col-6 bg-danger text-center"> 6 </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
</body>
</html>
Grid options
- 웹 상에 적절한 중단점을 적용해서 small, medium 이하의 중단점을 활용하기 위해 사용합니다.
예시) medium 중단점이 끝나고 나면 6 유닛을 차지한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<body>
<div class="container">
<h1 class="display-3 text-center text-primary">the grid systtem</h1>
<div class="row">
<div class="col-md-6 bg-danger text-center">Lorem ipsum dolor, sit amet consecte
tur adipisicing elit. Eius omnis saepe, soluta adipisci ab aut at
ut illo, esse officia laborum fugiat ipsam eaque voluptatem aspernatur?
Asperiores repellendus earum vitae. </div>
<div class="col-md-6 bg-info text-center"> Lorem ipsum dolor, sit amet consecte
tur adipisicing elit. Eius omnis saepe, soluta adipisci ab aut at
ut illo, esse officia laborum fugiat ipsam eaque voluptatem aspernatur?
Asperiores repellendus earum vitae. </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
</body>
</html>
참고 사이트:https://getbootstrap.com/docs/4.5/layout/grid/
Grid system
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
getbootstrap.com
'WEB > Bootstrap' 카테고리의 다른 글
| Form-controls (0) | 2023.01.17 |
|---|---|
| 부트스트랩 사용방법 (0) | 2023.01.11 |
