bootstrap grid system

div에 css를 통해 가로길이를 정해주는 기능으로 정해준 길이만큼 공간 점유

가로 한줄을 12등분하여 비율로 정해 배치할 수 있다.

 

기본 코드형태는 다음과 같다.

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

col-칸수 형태는 bootstrap4에서만 지원한다.

 

bootstrap3에선 col-scale-숫자 형태로 12등분 중 몇칸을 점유할지 설정한다.

scale은 extra small,small, middle, large, extra large순이다.

• col-sm-숫자 : 576px이하면 세로로 배치 
• col-md-숫자 : 768px이하면 세로로 배치
• col-lg-숫자 : 992px이하면 세로로 배치
• col-xl-숫자 : 1200px이하면 세로로 배치

쉽게 사용하도록 도움이 되는 사이트는 아래와 같다.

Shoelace - Visual Bootstrap 3 Grid Builder

http://shoelace.io/

 

bootstrap.html

다운로드

 

ex1.html

다운로드