부트스트랩 반응형 레이아웃

• 부트스트랩 중단점

• 중단점은 미디어 쿼리의 min-width역할을 한다.
• 각 중단점 별로 컨테이너 및 열 크기 및 동작을 제어할 수 있다.

 

 

예)

PC에서는 4열 , 태블릿에서는 2열 ,모바일 1열 되도록 반응형 레이아웃을 짠다면?

 

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-3">안녕</div>
    <div class="col-md-6 col-lg-3">안녕</div>
    <div class="col-md-6 col-lg-3">안녕</div>
    <div class="col-md-6 col-lg-3">안녕</div>
  </div>
</div>

- 반응형 레이아웃이 들어갈 container를 만들어준다.

row는 하위 요소들을 12칸으로 쪼개질수 있도록 한다.

 

- 부트스트랩으로 반응형 디자인 만들 때는 모바일 (작은 화면) 부터 만들면 쉽다.

내부 div 박스에 아무런 class 넣지않으면 어떤 사이즈에서나 1열로 보여진다.

 

- 내부 div 박스에 미디어 쿼리를 대신하는 조건식을 넣어준다.

col-md-6     :  md  (768px 이상) 에서는 12칸 중 6칸 차지하게 해라 => 태블릿 화면에서는 2열이 된다.

col-lg-3        :  lg (992px 이상) 에서는 12칸 중 3칸 차지하게 해라 => pc에서는 4열이 된다.

 

 

 

 

[출처] 부트스트랩

https://getbootstrap.com/docs/5.2/layout/grid/