Bootstrap 기본 정리

기본 구성원

1. 컨테이네
2. 행
3. 열

기본 규칙

1. 행(<\div class="row">)은 꼭 컨테이너(<\div class="container">) 안에 넣기
2. 열(<\div class="col">)은 꼭 행(<\div class="row">) 안에 넣기
   오직 열만 행의 직속 자식이 될 수 있음
3. 콘텐츠(우리가 그리드에 넣고 싶은 내용)는 꼭 열(<\div class="col">) 안에 넣기(\은 필요 없음)

기본 사용법

부트스트랩 그리드는 한 줄에 기본적으로 12칸의 열이 있다고 생각하면 됨
만약 3등분을 하고 싶다면 <\div class="col-4">을 쓰면 됨(\필요 없음)

• 12칸이 넘는 열이 들어간다면, 새로운 줄로 넘어감
• 중첩 : 열을 여러 열로 나누는 것
  -> 중첩을 하기 위해서는 열(<\div class="col-6">) 안에 새로운 행(<\div class="row">)을 써야 함

부트스트랩이 정해둔 구간들

Extra Small (< 576px): 모바일
Small (≥ 576px): 모바일
Medium (≥ 768px): 타블릿
Large (≥ 992px): 데스크탑
Extra Large (≥ 1200px): 와이드 데스크탑

컨테이너

기본적으로 가운데 정렬
그리드의 행들을 감싸주는 역할
종류
1. <\div class="container">: 구간별로 그리드에 고정된 width를 설정
2.<\div class="container-fluid">: 그리드는 항상 width: 100%;
<\div class="container">
.container {
width: 100%; / extra small /
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

/ small /
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}

/ medium /
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}

/ large /
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}

/ extra large /
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}

<\div class="container-fluid">

항상 그리드가 100%의 가로 길이를 가지길 윈할 때
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

열

반응형 구간별로 (총 12칸 중) 열이 차지하는 칸 개수도 다르게 할 수 있음

1. 구간별로 모두 설정되어 있는 경우
   <\div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">

Extra Small (< 576px): 12칸을 모두 차지
Small (≥ 576px): 6칸 차지
Medium (≥ 768px): 4칸 차지
Large (≥ 992px): 3칸 차지
Extra Large (≥ 1200px): 2칸 차지

2. 특정 구간만 설정되어 있는 경우
   그 구간부터 새로운 설정이 있는 상위 구간까지는 같은 칸 수
   <\div class="col-12 col-lg-3">
   Extra Small (< 576px): 12칸을 모두 차지
   Small (≥ 576px): 12칸을 모두 차지
   Medium (≥ 768px): 12칸을 모두 차지
   Large (≥ 992px): 3칸 차지
   Extra Large (≥ 1200px): 3칸 차지

<\div class="col-6">
Extra Small (< 576px): 6칸 차지
Small (≥ 576px): 6칸 차지
Medium (≥ 768px): 6칸 차지
Large (≥ 992px): 6칸 차지
Extra Large (≥ 1200px): 6칸 차지