【Bootstrap 입문】그리드 시스템

1. 그리드 시스템이란?

화면을 12개로 분할하는 사고방식.

2. 화면의 폭의 크기마다 12분할의 나누는 방법을 지정한다

2-1. 화면 폭: ~ 768px

Bootstrap에서의 취급: xs (extra small)
(예) 스마트폰 등

2-2. 화면 폭: 768px ~ 992px

Bootstrap에서의 취급: sm (small)
(예) 태블릿

2-3. 화면 폭: 992px~1200px

Bootstrap에서의 취급: md (medium)
(예) 작은 PC

2-4. 화면 폭: 1200px

Bootstrap에서의 취급: lg (large)
(예) 보통의 PC

예 1: lg와 md를 사용해보기

<!--.containerと.rowの中に入れると、.colが有効になる-->
   <div class="container">
       <div class="row">
           <div class="col-lg-3 col-xs-6">テスト1</div>
           <div class="col-lg-3 col-xs-6">テスト2</div>
           <div class="col-lg-3 col-xs-6">テスト3</div>
           <div class="col-lg-3 col-xs-6">テスト4</div>
       </div>
   </div>

화면 폭: 1200px~(lg)


화면 폭: ~768px(xs)


의문점: 이번에는 lg와 xs를 지정하고 있지만, 지정하지 않은 md와 sm의 화면 사이즈의 때는 어떻게 될까?
lg(1200px=)를 끊었을 때, 지정된 다음 xs(~768px)가 적용되게 되어 있다.

예 2: hidden 사용하기

<div class="container">
    <div class="row">
         <div class="col-lg-3 col-md-6 col-xs-6">テスト1</div>
        <div class="col-lg-3 col-md-3 col-xs-6">テスト2</div>
        <div class="col-lg-3 col-md-3 col-xs-6">テスト3</div>
        <div class="col-lg-3 hidden-md col-xs-6">テスト4</div>
    </div>
</div>

화면 폭: 1200px~(lg)


화면 폭: 992px ~ 1200px(md)

=> hidden-md 가 효과가 있고, 화면의 폭이 992px~1200px(md)일 때만 "테스트 4"가 사라지고 있다.

화면 폭: ~768px(xs)