DBILITY

bootstrap grid system 본문

front-end & ui/bootstrap

bootstrap grid system

DBILITY 2019. 5. 22. 13:37
반응형

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
 

bootstrap.html
다운로드

 

ex1.html
다운로드

 

반응형

'front-end & ui > bootstrap' 카테고리의 다른 글

bootstrap 3 col height 100%  (0) 2021.04.22
Comments