bootstrap 반응형 기본 이론

1. 부트 스트랩은 기본적으로 한 줄을 12칸으로 본다.

그리드라고하는데 container로 한번 감싸고

row를 지정한 뒤 한줄이 생기면

그 안을 다시 12칸으로 나누는 것이다.

​

2.반응형으로 만들기 위해서는 클래스를 이용하면 된다.

<div class="row"> //한 줄로 지정(12칸) <div class="col-lg-3 col-md-6"><div> <div class="col-lg-3 col-md-6"><div> <div class="col-lg-3 col-md-6"><div> <div class="col-lg-3 col-md-6"><div> </div>

다음과 같이 있을때 코드를 해석하면

한줄은 12로 지정한다고 했음으로

한줄에 3*4=12 로 3칸을 차지하는

col이 4개가 들어가 있는 것이다.

​

​

col 은 colspan을 의미해서 12칸중 한칸을 의미하고

lg는 large, md는 medium, sm은 small을 의미한다.

​

여기서 이들의 기준은

lg>= 992px

md>= 768px

sm>=576px

으로 화면의 가로 픽셀을 기준으로 한다.

화면이 992px 보다 클때는 lg의 형태로 존재하고,

​

화면이 768px 이상일때는 md로 존재하는 것이다.

​

이 설명에 따라 코드를 다시보면

<div class="col-lg-3 col-md-6"><div>

화면의 가로 넓이가 992px 보다 넓으면

div 하나가 12개의 칸중 3칸을 차지 하겠다.

또한 화면이 992px 보다는 작고 ,

768px 이상일때는 6칸을 차지 하겠다.

라는 뜻이다.

​

​

따라서 화면이 전체 크기 일때는

한줄에 4개의 div가 화면상에 나타나겠지만

992px 보다 작아지면

한줄에 두개의 div가 나오고

나머지 두개의 div는 아래로 내려가게 되는것이다.

​

​