목적

Bootstrap의 그리드 시스템 개념에 대해 요약
※리스폰시브 디자인에 대응한 그리드 시스템에 대해서는 별도 기사로 정리한다.

이 기사의 타겟

Bootstrap을 사용해 보았지만 잘 col 클래스를 사용하는 방법을 모르는 사람

도트 설치 그리드 시스템에 대한 동영상을 보아도 잘 모르는 분

그리드 시스템에 대해 잘 모르고 Bootstrap을 사용하는 것을 싫어하는 사람

그리드 시스템에 약한 의식이있는 분

원래 그리드 시스템이란?

요소의 표시 폭에 관한 단어

화면 폭에 따라 요소의 표시 영역을 제어 할 수 있습니다.

Bootstrap의 그리드 시스템이라는 생각을 이해하면 간단하게 반응형 디자인화가 가능해진다
※ 이야기가 다소 어려워지므로 다른 기사에서 설명한다.

"세로 방향으로 12 분할 된 영역"을 얼마나 점령하는지에 따라 표시 영역을 설정합니다.

누르는 포인트

그릿 시스템의 가장 외부의 요소는 container 클래스를 가지는 div, 그 안에 row 클래스를 가진 div, 그 안에 col 클래스를 가진 div로 구성되어 있다. (아래에 간이도를 기재한다.)

col은 컬럼이라고 불린다.

container 클래스의 div에서 그릿 시스템을 사용하는 것을 나타낸다.

row 클래스의 div에서 container 클래스의 div를 상하 방향으로 분할한다.

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

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

사용 영역은 클래스명의 col에 숫자를 붙여 설정한다.
※4영역을 사용하여 표시하고 싶을 때는 다음과 같이 기재한다<div class="col-4"></div>

하나의 col내에서 합계 12를 넘는 지정을 하면 자동적으로 상하로 나누어 표시한다.

하나의 col내에서 합계 12를 넘지 않는 지정을 하면 왼쪽 근방에 지정된 영역을 사용해 내용을 표시한다.
아래에 그리드 시스템의 간략한 다이어그램을 놓습니다.

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

이 절에서는 그리드 시스템에 대해서만 설명합니다.
반응형 디자인 가능 그리드 시스템은 다음 섹션에서 설명합니다.
- 12분할 중 8개 영역과 4개 영역을 사용하여 텍스트를 표시합니다.
- 아래에 HTML 파일의 내용을 기재한다.

<div class="container">
　<div class="row">
　　<!-- 12分の8を使用して表示する bg-primaryは背景色を青色にする設定 -->
　　<div class="col-8 bg-primary">
　　　<p>8</p>
　　</div>
　　<!-- 12分の4を使用して表示する bg-warningは背景色を黄色にする設定 -->
　　<div class="col-4 bg-warning">
　　　<p>4</p>
　　</div>
　</div>
</div>

아래에 코드와 미리보기 화면의 색 관계를 나타내는 이미지를 첨부합니다.

코드를 첨부한다.

미리보기 이미지를 첨부합니다.

12분할 안의 1영역과 1영역과 10영역을 사용하여 텍스트를 표시한다.

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

<div class="container">
  <div class="row">
    <!-- 12分の1を使用して表示する bg-primaryは背景色を青色にする設定 -->
    <div class="col-1 bg-primary">
      <p>①</p>
    </div>
    <!-- 12分の1を使用して表示する bg-warningは背景色を黄色にする設定 -->                
    <div class="col-1 bg-warning">
      <p>①</p>
    </div>
    <!-- 12分の10を使用して表示する bg-successは背景色を緑色にする設定 -->
    <div class="col-10 bg-success">
      <p>⑩</p>
    </div>
  </div>
</div>

아래에 코드와 미리보기 화면의 색 관계를 나타내는 이미지를 첨부합니다.

코드를 첨부한다.

미리보기 이미지를 첨부합니다.

요약

그리드 시스템의 기본적인 사고방식을 정리했다.
- 다음 번은 반응형 디자인 대응시킨 그리드 시스템에 대해 정리한다. (이 기사에 링크 할 예정)