Bootstrap Container, Grid

✔ BS Container

- container, container-fluid 2가지 종류가 있다

.container {
    /* 반응형으로 동작, 고정폭을 가진다. 
    width, margin 설정을 통해 container 와 browser window 사이 여백을 조정 */
    width: 1200px;
}

.container-fluid {
    /* viewport 전체 폭을 모두 차지하는 container box */
}

 

 

✔ BS Grid

- 화면을 분할해 원하는 레이아웃을 잡기 위해 정의된 것으로, 1개의 row 를 12개 column 으로 분할할 수 있고, 각각을 조합할 수 있다

- 화면 크기별로 5개 옵션을 제공하므로, 화면 크기에 따라 column 의 개수 조합을 다르게 설정할 수 있다

.col- (extra small devices: 화면크기 < 576px)
.col-sm- (small devices: 화면크기 ≥ 576px)
.col-md- (medium devices: 화면크기 ≥ 768px)
.col-lg- (large devices: 화면크기 ≥ 992px)
.col-xl- (xlarge devices: 화면크기 ≥ 1200px)

- 각 화면크기 기준이 min-width 역할을 하므로, 기준 크기보다 작아지면 col-숫자 배치를 무시하고 세로로 정렬된다

- 참고 블로그타고 들어가서 jsfiddle 에서 연습해보면 바로 이해가 갈 것이다

<div class="container mt-5">
<div class="row">
  <div class="col-sm-6">.col-sm-3</div>
  <div class="col-sm-6">.col-sm-3</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-3</div>
  <div class="col-md-6">.col-md-3</div>
</div>
<div class="row">
  <div class="col-lg-6">.col-lg-3</div>
  <div class="col-lg-6">.col-lg-3</div>
</div>
<div class="row">
  <div class="col-xl-6">.col-xl-3</div>
  <div class="col-xl-6">.col-xl-3</div>
</div>
</div>

.col-sm-6, .col-md-6, .col-lg-6, .col-xl-6  {
  background-color: #ffec99;
  border: 1px solid #495057;
}

 

 

참고

https://dinfree.com/lecture/frontend/122_css_6.html

http://maczniak.github.io/bootstrap/scaffolding.html

https://itleader.tistory.com/190

.