[Bootstrap] 그리드 시스템

Bootstrap 그리드 시스템

Bootstrap 이 가장 많이 사용되는 이유이자 반응형 웹페이지를 만들기 위해 가장 많이 사용하는 기능이며

가장 핵심적인 기능 중 하나다.

 

Bootstrap에서는 기본적으로 12칼럼으로 나누어서 기능을 제공하고 있다.

<div class="container">
  <div class="row">
    <div class="col-lg-2 pink">col lg 2</div>
    <div class="col-lg-8 pink">col lg 8</div>
    <div class="col-lg-2 pink">col lg 2</div>
  </div>
</div>

위 코드는 하나의 row를 2/ 8/ 2 로 나눈 것이다. ( col-*-숫자 에서 숫자부분을 보면 알 수 있다 )

즉, 전체를 12로 했을 때 이 column의 비율을 몇으로 할지를 정하는 것이다.

전체 12를 초과하게 되면 자연스럽게 row가 바뀌면서 뒤로 밀려나게 된다.

 

Bootstrap 권고사항

•  row 클래스는 container나 container-fluid 안에 있어야 정상적인 배열이나 패팅을 지원해준다.
• row 클래스는 가로로 그룹 지을 칼럼들의 집합이다.
• 내용은 col-* 클래스 안에 있어야 하며, row의 직속 자녀 요소로 배치해야 한다.
• 칼럼은 총 12칼럼이 있는 것으로 정의하여 각 배치할 %에 따라서 클래스를 결정하면 된다. 예를 들어, 같은 넓이의 3개의 칼럼을 쓰고자 한다면 3개의 .col-xs-4 칼럼을 쓰면 된다.
• 12칼럼이 넘어가면 새로운 줄로 칼럼이 배치된다

Column 의 Class 종류 ( col-*-숫자 에서 * 부분 )

.col-xs-*	항상 가로로 배치 ( for SmartPhone )
.col-sm-*	768px 이하에서 세로로 표시 시작 ( for Tablets )
.col-md-*	992px 이하에서 세로로 표시 시작 ( for Laptops )
.col-lg-*	1200px 이하에서 세로로 표시 시작 ( for Desktops )

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