[Bootstrap] Grid 시스템
Bootstrap 그리드 System
https://poiemaweb.com/bootstrap-grid-system
|
bootstrap 3 |
|
|
|
|
기기해상도 |
container 넓이 |
|
xs |
|
|
|
sm |
768 |
750 |
|
md |
992 |
970 |
|
lg |
1200 |
1170 |
|
Bootstrap 4 |
|
|
|
|
min |
max |
|
xs |
|
575 |
|
sm |
576 |
767 |
|
md |
768 |
991 |
|
lg |
992 |
1199 |
|
xl |
1200 |
|
* 그리드는 container 안에 있어야 한다
* 칼럼(세로줄)은 모두 12칸
- 예
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">xs-8</div>
<div class="col-xs-4">xs-4</div>
</div>
</div>
* 클래스 2개 이상 지정
- 예
<div class="container-fluid">
<p>Viewport width가 992px 이상이면 2열, 미만이면 1열로 정렬된다</p>
<div class="row">
<!--
viewport width가 992px(medium device) 이상이면
.col-md-8 class가 적용되어 width는 8/12(66.66666667%)
viewport width가 992px(medium device) 미만이면
.col-xs-12 class가 적용되어 width는 12/12(100%)
-->
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<!--
viewport width가 992px(medium device) 이상이면
.col-md-4 class가 적용되어 width는 4/12(33.33333333%)
viewport width가 992px(medium device) 미만이면
.col-xs-12 class가 적용되어 width는 12/12(100%)
-->
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
</div>
//========
* offset
- 예) 4칸 오른쪽으로 이동
<div class="col-md-2 col-md-offset-4">
//========
* push , pull
- 예)
- 오른쪽으로 3칸 이동
<div class="col-xs-9 col-xs-push-3">.col-xs-9 .col-xs-push-3</div>
- 왼쪽으로 9칸 이동
<div class="col-xs-3 col-xs-pull-9">.col-xs-3 .col-xs-pull-9</div>