Twitter사제의 UI 프레임워크 「 Bootstrap 」에서의 레이아웃에 있어서, 포인트가 되는 것은 그리드 시스템 의 이해입니다. 본 엔트리에서는 Bootstrap의 그리드 시스템에 대해 살펴보면서, 최신의 Bootstrap 4에 대응한 그리드 레이아웃의 방법을 소개합니다.

원래 그리드 시스템이란?

그리드란 「화면을 종횡으로 분할하는 선」입니다. 가로선으로 분할된 영역은 '행', 세로선으로 분할된 영역은 '열'이 됩니다. 이러한 "행"과 "열"을 사용하여 상자를 배치하는 것이 Bootstrap 4 그리드 시스템의 기본입니다.

그리드 시스템의 "행"

그리드 시스템의 "행"은 화면을 옆으로 분할하여 만드는 영역. 행의 너비는 화면 가로 너비이며 높이는 내부 콘텐츠에 따라 다릅니다.

그리드 시스템의 "열"

그리드 시스템의 "열"은 화면을 세로로 12 분할하여 만드는 영역. 열의 너비는 화면 너비의 12분의 1입니다.

상자 레이아웃 방법

박스란 <div> 태그나 <section> 태그 등으로 만들어지는 구형의 블록 요소입니다. 소스 코드를 섞으면서 구체적인 레이아웃 방법을 살펴 보겠습니다.

1. 「행」의 작성

우선은 「행」의 작성입니다. row 클래스를 사용합니다. 행을 정의하는 것으로 "여기에서 여기까지가 그리드 시스템을 사용한 레이아웃이다"라고 선언하게 됩니다.

<!--行1-->
<div class="row">
</div>

<!--行2-->
<div class="row">
</div>

<!--行3-->
<div class="row">
</div>

2. 「행」안에 몇 개분의 열의 폭을 사용해 박스를 배치할까를 지정

행이 완성되면 "열을 몇 개 사용하여 상자를 배치할지"를 결정합니다. 상자는 줄에 몇 개라도 만들 수 있습니다.



HTML 코드에서는 col-(画面幅)-(何個分の列か) 클래스를 사용하여 열을 만듭니다. 「화면 폭」의 부분에는 xs 이나 sm 라고 하는 캐릭터 라인이 들어갑니다만, 이것에 대해서는 다음의 기사로 설명합니다. 일단 xs를 넣어 두십시오. 10열분의 폭이 있는 박스를 배치한 행, 7열폭과 5열폭의 박스를 배치한 행의 코드는 아래와 같습니다.

<!--行1-->
<div class="row">
  <!--10列幅分のボックス-->
  <div class="col-xs-10 bg-primary">10列</div>
</div>

<!--行2-->
<div class="row">
  <!--7列幅分のボックス-->
  <div class="col-xs-7 bg-success">7列</div>
  <!--5列幅分のボックス-->
  <div class="col-xs-5 bg-info">5列</div>
</div>

각 상자에는 배경색 설정을 위해 bg-* 계열 클래스 ( Utility classes · Bootstrap )가 설정되어 있습니다.

실행 결과

실행 결과는 js도. 다른 t을 참조하십시오. 다음 캡처와 같이 그리드 시스템을 사용하는 상자 레이아웃이 생겼습니다.

그리드 시스템은 무섭지 않다.

이번에는 Bootstrap의 그리드 시스템의 기본을 소개했습니다. CSS를 일절 쓰지 않고 간편하게 수평 줄을 포함한 박스 레이아웃이 가능했습니다. 다음 기사 「 이렇게 하면 이해할 수 있는 Bootstrap 4의 반응형 웹 디자인과 그 CSS - Qiita 」에서는, 그리드 시스템을 구사한 반응형 웹 디자인의 방법에 대해 설명합니다.