bootstrap - grid 사용방법

bootstrap - grid

---

부트스트랩 grid는 row와 col을 이용해서 테이블을 생성 하는 것이다.

html의 <tr> <td> 태그와 같다고 생각하면 된다.

 

container와 마찬가지로 sm, lg, 등의 클래스를 주면 반응형으로 사용 가능하다.

 

row클래스는 html의 <tr>과 같이 한 줄을 의미하고

col클래스는 html의 <td>와 같이 한 칸을 의미한다.

 

기본적으로 한 row는 최대 12개의 col을 가질 수 있다.

 

그냥 class="col"로 한 줄을 만들어도 되지만

class="col-12"로 해도 한줄이 된다.

 

3칸으로 나누고 싶으면 class="col-4"로 세 번 사용하면 된다.

 

이걸 이용해서 하나하나 반응형으로 만들기는 꽤나 손이 많은 작업이기 때문에

 

아래 사이트에서 원하는대로 그리면 코드로 만들어주기 때문에 편하게 사용할 수 있다.

 

데스크탑, 태블릿, 모바일을 다 그려주면 반응형으로 만들어진다.

 

아주 좋은 사이트이다.

 

http://shoelace.io/

Shoelace - Visual Bootstrap 3 Grid Builder

 

여기서 기본적인 레이아웃을 잡고 그다음 마진이나 패딩 등 다른 클래스를 추가해주는 방식으로 하면 될 것 같다.