• Q&A
  • 회원가입
  • 로그인

[basic] BS4 - Grid (BS그리드)

79  
목차
  1. BS4 Grid 기본 구조 (너비 12등분 후 배분)
  2. BS4 Grid 분기점
  3. BS4 Grid 예제

 

BS4 Grid 기본 구조 (너비 12등분 후 배분)

1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12


BS4 Grid 분기점

 

1. 

화면너비 구분:  5개

 

.col (576px 미만 화면너비 - 초소형장치 (Extra Small Device)

.col-sm-○ : 576px 이상 화면너비 - 소형장치 (Small Device)

.col-md-○ : 768px 이상 화면너비 - 중형장치 (Middle Divice)

.col-lg-○ : 992px 이상 화면너비 - 대형장치 (Large Device)

.col-xl-○ : 1200px 이상 화면너비 - 대형장치 (Extra Large Device)

 

2.

각 클래스는 결합해서 보다 역동적이고 유연한 레이아웃 가능.

 

3.

각 클래스는 확장되므로, sm과 md에 대해 동일 너비 설정하려면 sm만 지정하면 됨.

 

 

BS4 Grid 예제

[예제1] - 모든 화면너비에서 가로 동일 3등분 나열. 

(단, 화면 너비가 너무 작으면 밑으로 하나씩 밀림)

 

<div class="row">

  <div class="col">홈짱닷컴 Homzzang.com</div>

  <div class="col">홈짱닷컴 Homzzang.com</div>

  <div class="col">홈짱닷컴 Homzzang.com</div>

</div>

 
결과보기 


[예제2] - 576px 이상 화면에서 가로 4등분 나열. 

※ 576px 미만 경우 세로 1열로 쌓임.

★ 보다 큰 화면 정의가 별도로 없으면, 해당 화면 너비 이상엔 전부 적용.

 

<div class="row">

  <div class="col-sm-3">홈짱닷컴 Homzzang.com</div>

  <div class="col-sm-3">홈짱닷컴 Homzzang.com</div>

  <div class="col-sm-3">홈짱닷컴 Homzzang.com</div>

  <div class="col-sm-3">홈짱닷컴 Homzzang.com</div>

</div>

 
결과보기


[예제3] - 576px 이상 화면에서 가로 2등분 나열. 

※ 576px 미만 경우 세로 1열로 쌓임.

★ 보다 큰 화면 정의가 별도로 없으면, 해당 화면 너비 이상엔 전부 적용.

 

<div class="row">

  <div class="col-sm-4">.col-sm-4</div>

  <div class="col-sm-8">.col-sm-8</div>

</div>

 

결과보기 



찾아주셔서 감사합니다. Since 2012