Bootstrap의 그리드 시스템이란? (반응형 디자인 지원)

목적

Bootstrap의 반응형 디자인에 대응하는 그리드 시스템의 사고방식에 대해 정리
※그릿 시스템의 기본을 알고 싶은 분은 여기 를 참고해 주세요.

이 기사의 타겟

Bootstrap을 사용해 보았지만 잘 반응하는 디자인이 불가능한 사람

그리드 시스템의 반응형 디자인에 약한 의식이있는 분

반응형 디자인화 대응을 하지 않으면 어떻게 된다?

어느 브라우저의 가로폭에서도 같은 영역을 사용해 요소를 표시하게 되어, 가로폭이 좁은 브라우저라면 요소가 늘어나고, 보기 어려운 웹 페이지가 된다.
※ 아래에 예를 기재한다

응답형 디자인화 대응을 하지 않은 웹 페이지를 1200px 이상의 가로폭의 브라우저로 보았을 때

정상적으로 표시됨

반응형 디자인화 대응을 하지 않은 웹 페이지를 500px의 가로폭의 브라우저로 보았을 때

1200px로의 표시를 그대로 작게 하고 있기 때문에 col 클래스의 div 요소가 작게 표시되어 보기 어렵다

이상 표시

텍스트의 하나하나가 화면폭 가득 표시되고 세로로 늘어선

누르는 포인트

그릿 시스템의 가장 외부의 요소는 container 클래스를 가지는 div, 그 안에 row 클래스를 가진 div, 그 안에 col 클래스를 가진 div로 구성되어 있다. (아래에 간이도를 기재한다.)
※이 근간의 생각은 반응형 디자인에 대응하고 있든 없든 함께

지금까지 container와 클래스명을 붙이고 있던 것을 container-fluid로 한다
※container-fluid는 브라우저 윈도우의 가로폭에 맞추어 container-fluid를 클래스명에 붙인 div요소도 유동적으로 변화한다.

col 클래스를 가지는 div로 표시하는 컨텐츠를 기재한다.

col 클래스를 가지는 div의 클래스명을 지정할 때에 div내의 요소를 12분할된 영역을 얼마나 사용해 표시하는지를 설정
한다.

사용 영역은 클래스명의 col에 숫자를 붙여 설정한다.

Bootstrap에서는 화면의 가로폭의 픽셀수에 따라 이름이 붙어 있다.
※ 아래에 화면 폭의 조견표를 기재한다

이 화면 폭 이상일 때는 몇 영역을 사용하여 표시한다. 라고 말하도록 설정하면 화면의 가로폭에 맞추어 표시 영역을 변화시킬 수 있다
※화면 폭 medium일 때 4영역을 사용하여 표시하고 싶을 때는 다음과 같이 기재한다



Extra Small(es)
Small(sm)
Medium(md)
Large(lg)
Extra Large(xl)


544px 미만
544px 이상, 768px 미만
768px 이상, 992px 미만
992px 이상, 1200px 미만
1200px 이상

그리드 시스템을 작성하는 방법의 예

화면폭이 Medium(md) 이상일 때 12분할된 안의 8영역과 4영역을 사용하여 텍스트를 표시한다.

아래에 HTML 파일의 내용을 기재한다.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <h1>おはよう</h1>
    </div>
    <div class="col-md-4">
      <h1>こんにちは</h1>
    </div>
  </div>
</div>

화면 폭이 Large(lg) 이상일 때, 12분할된 안의 1영역과 1영역과 10영역을 사용하여 텍스트를 표시한다.

아래에 HTML 파일의 내용을 기재한다

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-1">
      <h1>おはよう</h1>
    </div>
    <div class="col-lg-1">
      <h1>こんにちは</h1>
    </div>
    <div class="col-lg-10">
      <h1>こんばんは</h1>
    </div>
  </div>
</div>

화면 폭이 Extra Small(xs) 이상일 때 12분할된 안의 12영역과 12영역과 12영역을 사용하여 텍스트를 표시하고 화면폭이 Large(lg) 이상일 때 12분할 네 영역과 네 영역과 네 영역을 사용하여 텍스트를 표시합니다.

※하나의 row에 합계의 영역이 12를 넘으면 자동적으로 개행이 행해지기 때문에 12영역을 사용하는 설정으로 했다.
- 아래에 HTML 파일의 내용을 기재한다

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-lg-4">
      <h1>おはよう</h1>
    </div>
    <div class="col-xs-12 col-lg-4">
      <h1>こんにちは</h1>
    </div>
    <div class="col-xs-12 col-lg-4">
      <h1>こんばんは</h1>
    </div>
  </div>
</div>

초보자에게도 추천 사이트

※초보자에게도 알기 쉽게 설명되고 있는 사이트를 발견했으므로 링크를 붙여 둡니다.
※자신의 기사 뭔가보다 훨씬 보기 쉽고 정중한 설명이었습니다. . . 죄송합니다. . .
Bootstrap의 그리드 시스템 사용법을 초보자를 향해 드러내기