Bootstrap - Grid System

#1 그리드 시스템

부트스트랩을 쓰는 주된 이유이자 반응형 웹페이지를 위한 기능. 

테이블의 형식으로 row 클래스와 col- 클래스들로 구성. 이러한 페이지들을 부트스트랩이 알아서 크기에 따라 반응형으로 동작.

이는 가로 세로 크기를 나누어 사용하는 것과 유사.

- 12 칼럼이 안되게 하면 오른쪽에 공백이 생긴다

- container 안에 들어간다 - container 는 고정길이/ container-fluid는 100% width

- 반드시 row 아래에 col

.col-xs-*	항상 가로로 배치
.col-sm-*	768px 이하에서 세로로 표시 시작
.col-md-*	992 이하에서 세로로 표시 시작
.col-lg-*	1200이하에서 세로로 표시 시작

<div class="container-fluid" > 

<div class="row">

 <div class="col-xs-3">.col-xs-3</div> 

<div class="col-xs-3">.col-xs-3</div> 

<div class="col-xs-3">.col-xs-3</div> 

<div class="col-xs-3">.col-xs-3</div>

 </div> 

<div class="row"> 

<div class="col-sm-3">.col-sm-3</div>

 <div class="col-sm-3">.col-sm-3</div> 

<div class="col-sm-3">.col-sm-3</div>

 <div class="col-sm-3">.col-sm-3</div>

 </div> 

<div class="row"> 

<div class="col-md-3">.col-md-3</div>

 <div class="col-md-3">.col-md-3</div>

 <div class="col-md-3">.col-md-3</div> 

<div class="col-md-3">.col-md-3</div>

 </div> 

<div class="row">

 <div class="col-lg-3">.col-lg-3</div>

 <div class="col-lg-3">.col-lg-3</div> 

<div class="col-lg-3">.col-lg-3</div>

 <div class="col-lg-3">.col-lg-3</div>

 </div>

 </div>

#2 그리드 시스템 응용

1. visible

- 어떤 특정 크기에서 안보이게 보이게 해주고싶을때

- 클 때 보여지고 싶으면 visible-lg

<div class="container jumbotron"> 

<div class="row"> 

<div class="col-md-3 col-sm-4">.col-md-3 .col-sm-4</div>

 <div class="col-md-3 col-sm-4">.col-md-3 .col-sm-4</div>

 <div class="col-md-3 col-sm-4">.col-md-3 .col-sm-4</div> 

<div class="col-md-3 visible-md">.col-md-3 .visible-md</div>  // 작을때 보여지게

</div>

 </div>

2. clearfix

- 화면 줄어들때 어긋나는 부분을 없애기 위해서

<div class="container jumbotron">
            <div class="row">
                <div class="col-md-3 col-sm-6">.col-md-3
.col-sm-6
larger div</div>
                <div class="col-md-3 col-sm-6">.col-md-3
.col-sm-6</div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
                <div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
            </div>
        </div>

3. offset

- 칼럼 왼쪽에 공백을 두고 싶을때 

        <div class="container">
            <div class="row">
                <div class="col-sm-5 col-sm-offset-1">.col-sm-5 .col-sm-offset-1</div>
                <div class="col-sm-5 col-sm-offset-1">.col-sm-5 .col-sm-offset-1</div>
            </div>
        </div>

3. pull, push

- 화면 크기에 따라 순서를 바꿔주고 싶을때

아래는 화면이 md 크기 이상일 때와 sm이하인 경우에 칼럼의 순서를 바꿔주고자 하는 경우의 예이다.

        <div class="container jumbotron">
            <div class="row">
                <div class="col-sm-9 col-md-push-3">.col-sm-9 .col-md-push-3</div>
                <div class="col-sm-3 col-md-pull-9">.col-sm-3 .col-md-pull-9</div>
            </div>
        </div>

출처: https://unikys.tistory.com/371 [All-round programmer]