[BootStrap] 2탄. 부트스트랩 그리드 시스템

Bootstrap Grids System

부트스트랩의 그리드 시스템은 페이지에 열 두개의 컬럼이 존재하는걸로 따르고 있어요.

만약 12개의 컬럼을 전부 사용하지 않고 커스텀으로 사용하려면 그룹으로 묶어서 사용하는 것도 가능해요!

부트스트랩의 그리드 시스템은 스크린의 크기에 따라 자동적으로 재 배치 되며, 반응형으로 움직여요

그리드 클래스

부트스트랩의 그리드 시스템 클래스는 4가지가 있어요 : 

• xs (스마트폰용)
• sm(태블릿용)
• md (데스크탑용)
• lg (큰 데스크탑용)

부트스트랩 그리드시스템의 기본적인 구조

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

첫 번째로 한 개의 열을 만듭니다. (<div class="row">) 그다음, 원하는 만큼 행의 숫자를 넣습니다.(.col-*-*) 여기서 중요한 점은 각 행의 숫자가 항상 12를 넘지 말아야 합니다.

예제를 몇개 보도록 하죠.

동일한 세 개의 행

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

코드를 적용 한 후 페이지의 가로 (폭)의 크기를 최대로 늘렸다가 최소로 줄였다를 해보세요.

그럼 스마트폰에서 적용했을 때 와 일반 모니터로 했을 때 다르게 나오는걸 볼 수 있습니다.

1. 폭이 최대(데스크탑)일 때

2. 폭이 최소(스마트폰)일 때

코드를 해석해 보면 클래스 지정자의 col-sm-4 란 뜻은 하나의 행이 전체 12의 크기 중 4의 크기를 가진다. 즉, 1/3의 크기를 갖도록 하는 것입니다.

서로 크기가 다른 두개의 행

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

자 여기서는 4,8이 입력되었습니다. 즉, 폭 12의 크기중 하나는 4만큼 하나는 8만큼 의 폭을 가지는 두 개의 행을 입력 한 것입니다.

1. 폭이 최대(데스크탑)일 때

2. 폭이 최소(스마트폰)일 때

출처 :

1. w3schools.com

http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp