그리드 시스템 (Grid System)
- 기본적으로 12칼럼으로 나누어 기능을 제공
- 이를 테이블 형식대로 row 클래스와 col-* 클랙스들로 자유롭게 구성이 가능
- 이렇게 구성한 페이지들은 Bootstrap이 알아서 크기에 따라 반응형으로 동작하도록 만듦
- Bootstrap은 아래의 규칙대로 그리드 시스템을 구축하라고 권고
규칙
1. row 클래스는 container나 container-fluid 안에 있어야 정상적인 배열이나 패팅을 지원
<div class="container">
<div class="row">
~
</div>
</div>- row 클래스는 가로로 그룹 지을 칼럼들의 집합
- 내용은 col-* 클래스 안에 있어야 하며, row의 직속 자녀 요소로 배치
- 칼럼은 총 12칼럼이 있는 것으로 정의, 각 배치할 %에 따라서 클래스를 결정하면됨
ex) 같은 넓이의 3개의 칼럼을 쓰고자 하면 3개의 col-xs-4 칼럼을 쓰면됨
<div class="container">
<div class="row">
<div class="col-4">column1</div>
<div class="col-4">column2</div>
<div class="col-4">column3</div>
</div>
</div>- 12칼럼이 넘어가면 새로운 줄로 칼럼이 배치
container, row, column
<div class="container">
<div class="row">
<div class="col-4">column1</div>
<div class="col-4">column2</div>
<div class="col-4">column3</div>
</div>
</div>container
: container 가 감싸고 있는 contents를 가운데 정렬해줌
- 반응형으로 width를 지정하고 싶은 경우 => .container
- width를 화면의 100%로 지정하고 싶은 경우 => .container-fluid
row
: column을 감싸줌
column
: row에 들어가는 각각의 content
- 옵션을 지정하지 않으면 블록 요소처럼 한 줄씩 차지
- 옵션 지정 방법 : 1개의 row를 가로로 12칸 나눴을 때 몇 칸을 차지할 것인지 숫자로 지정 (ex) col-4)
그리드 옵션 (Grid Options)
col은 화면의 크기에 따라 가로 사이즈가 달라지도록 옵션을 추가할 수 있음
| Extra small <576px | Small >=576px | Medium >=768px | Large >=992px | Extra large >=1200px | |
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| # of columns | 12 | - | - | - | - |
- .col-size-n 이라는 옵션은
화면의 크기가 size 이상일 경우 col이 row의 n칸을 차지하고,
그보다 작을 때는 column의 가로 사이즈가 화면 전체가 된다는 의미
ex) .col-sm-4 라는 옵션의 뜻은 화면의 크기가 576px 이상일 땐 row의 4칸을 차지하고 그 이하일 경우는 화면 전체의 가로 사이즈를 가진다는 것입니다.
Extra small : .col-xs-*
: 항상 가로로 배치 (for smartphone)
Small : .col-sm-*
: 768px 이하에서 세로로 표시 시작 (for tablets)
Medium : .col-md-*
: 992px 이하에서 세로로 표시 시작 (for laptops)
Large : .col-lg-*
: 1200px 이하에서 세로로 표시 시작 (for laptops / desktops)
p(´∇｀)q