[Bootstrap] 2. 부트스트랩 반응형 그리드 알아보기

반응형 중에서 가장 많이 쓰이는
container와 container-fluid

차이는 ?
container은 여백이 존재한다.
하지만 화면 사이즈가 모바일처럼 줄어든다면
똑같이 보이며 container 안에 다른 container 클래스를 사용이 불가하다.

부트스트랩 Grid layout

<div class="container">
  <div style="background-color:#CFF">content 1</div>
  <div style="background-color:#9FC">content 2</div>
</div>

부트스트랩 container, container-fluid
Grid 비율

<!-- 부트스트랩 그리드: container > row(줄) > col(열) -->
    <!-- 1줄은 화면 전체길이, 열은 한 화면에 12등분 -->
    <div class="container">
        <div class="row">
            <div class="col-2 bg-primary">첫번째열</div>
            <div class="col-4 bg-success">두번째열</div>
            <div class="col-6 bg-primary">세번째열</div>

        </div>

※ 부트스트랩의 그리드 시스템에서는 화면사이즈가 작을때(모바일) 우선적으로 적용이 되며

설정한 화면 사이즈 이상일때 원하는 비율로 표시가 된다.

 

여러개의 그리드 비율을 적용 예시

화면 크기에 따라서 sm 화면기준보다 작을때는 모바일 기준으로 표시가 되고

화면이 점점 커지게 된다면 sm md lg 순으로

1:3 , 1:1 , 1:2 비율로 표시가 되는것을 볼 수 있다.

 

column 값을 다르게 해서 설정하기

<div class="container">
        <div class="row">
          <div class="col-sm-6 col-md-3 col-lg-2" style="background:#CFF">Lorem ipsum dolor</div>
          <div class="col-sm-6 col-md-3 col-lg-2" style="background:#9FC">Lorem ipsum dolor</div>
          <div class="col-sm-6 col-md-3 col-lg-2" style="background:#CFF">Lorem ipsum dolor</div>
          <div class="col-sm-6 col-md-3 col-lg-2" style="background:#9FC">Lorem ipsum dolor</div>
        </div>
      </div>