Bootstrap 그리드 시스템

Bootstrap 측이 미디어 쿼리를 준비

HTML 태그에 클래스를 붙이는 것만으로 반응 형 디자인

사용하기 위해서는 정해진 쓰기 방법이 있다

이번은 초보의 초보라고 하는 것으로, 아래와 같은 GIF와 같은 구조를 만들었습니다. 그것을 설명합니다.

환경 macOS Catalina 10.15.6 Bootstrap 4.3.1 Rails 6.0.3.4 이번 코드 먼저, 이번에 구현한 코드를 나타냅니다. 익숙하지 않으면 어렵습니다만, 1개씩 해설해 가므로 안심해 주세요. index.html.erb <%# 필요한 부분만 발췌 %> <div class="container"> <h2>< 576px에서 세로 정렬</h2> <h2> ≧ 576px에서 너비 절반 </h2> <div class="row"> <div class="col-sm-6">col-sm-6</div> <div class="col-sm-6">col-sm-6</div> </div> <h2>< 768px에서 세로 정렬</h2> <h2> ≧ 768px에서 폭 비율 1:3:2</h2> <div class="row"> <div class="col-md-2">col-sm-2</div> <div class="col-md-6">col-sm-6</div> <div class="col-md-4">col-sm-4</div> </div> </div> 쓰기의 기본 1. 테이블을 의식한 중첩 구조 그리드 시스템은 "가로 폭의 크기에 따라 달라지는 테이블"의 구조를 취합니다. 기본적으로 HTML을 사용하여 이렇게 표현합니다. index.html <div class="container"> # 테이블 외부 테두리 <div class="row"> # 테이블 행 <div class="col"> # 테이블 열 </div> </div> </div> container > row > col 의 중첩 구조입니다. 행을 늘리고 싶다면 ... index.html <div class="container"> # 테이블 외부 테두리 <div class="row"> # 테이블 행 : 1 <div class="col"> # 테이블 열 : 1-1 </div> </div> <div class="row"> # 테이블 행 : 2 <div class="col"> # 테이블 열 : 2-1 </div> </div> </div> 열을 늘리고 싶다면 ... inde.html <div class="container"> # 테이블 외부 테두리 <div class="row"> # 테이블 행 : 1 <div class="col"> # 테이블 열 : 1-1 </div> <div class="col"> # 테이블 열 : 1-2 </div> <div class="col"> # 테이블 열 : 1-3 </div> </div> <div class="row"> # 테이블 행 : 2 <div class="col"> # 테이블 열 : 2-1 </div> <div class="col"> # 테이블 열 : 2-2 </div> </div> </div> 이렇게 씁니다. 2. 열을 반응형 대응 그런데, 여기로부터 반응형화해 갑니다. 그렇다고해도 쉽습니다. 이번은 「어느 가로폭까지는 가로 줄. 거기를 넘어 작아지면 세로 줄」을 표현합니다. 이 경우의 기본 구문은 여기와 같습니다. col-[가로폭 조건]-(12분의 일부) 하나씩 봅시다. 가로폭 조건 이것은 중단점에 해당합니다. Bootstrap 공식 사이트 에는 다음과 같이 정리되어 있습니다.

sm : 576px, smartphone

md : 768px, medium

lg : 992px, large

xl : 1200px, Extra Large

따라서, 예를 들면 col-sm을 부여하면 「576px 미만으로 세로 줄」이라고 하는 의미가 됩니다.

12분의 몇

다음에 각 요소의 가로폭의 설정입니다.
이것은 다음 규칙에 의해 결정됩니다.

row의 가로폭을 12로 한다

12에 대한 비율을 col로 지정

따라서, 예를 들면 col-sm-6을 부여하면 「576px 미만으로 세로 줄. 576px 이상에서는 부모 요소의 절반의 폭」이라고 하는 의미가 됩니다.

이상이 그리드 시스템의 기본입니다.
이를 바탕으로 첫 번째 코드를 살펴 보겠습니다.

첫 번째 코드를 풀어 라.

이번에는 이런 코드를 썼습니다.

index.html.erb

<%# 必要部分のみを抜粋 %>

<div class="container">
  <h2>< 576px で縦並び</h2>
  <h2>≧ 576px で幅半分</h2>
  <div class="row">
    <div class="col-sm-6">col-sm-6</div>
    <div class="col-sm-6">col-sm-6</div>
  </div>
  <h2>< 768px で縦並び</h2>
  <h2>≧ 768px で幅比1:3:2</h2>
  <div class="row">
    <div class="col-md-2">col-sm-2</div>
    <div class="col-md-6">col-sm-6</div>
    <div class="col-md-4">col-sm-4</div>
  </div>
</div>

h2 요소에 각 div 요소의 의미를 설명했지만 그 의미를 알았다고 생각합니다.
이 코딩에 의해 아래와 같은 디자인이 완성되었습니다.

요약 Bootstrap이 준비한 미디어 쿼리를 사용하여 반응형 대응이 가능해진다 열 요소에 sm을 부여하면 가로폭 576px 전후로 레이아웃이 변화한다 행 요소의 너비를 12로 설정하여 중단점까지 열 요소의 가로 폭을 결정합니다. 솔직히 어지럽히려고 경원하고 있던 그리드 시스템입니다만, 기본은 몹시 심플했습니다. 바로 오리지널 앱에 통합해 보겠습니다! 덤 본문에서는 코드의 일부를 생략했습니다. 여기에서는 원시 코드를 첨부합니다. 참고까지(아래에서 조금 해설하고 있습니다). index.html.erb <div class="container" style="height: calc(100vh - 56px - 56px); background-color: lightskyblue;"> <h2>< 576px에서 세로 정렬</h2> <h2> ≧ 576px에서 너비 절반 </h2> <div class="row pb-5"> <div class="col-sm-6 btn btn-danger">col-sm-6</div> <div class="col-sm-6 btn btn-secondary">col-sm-6</div> </div> <h2>< 768px에서 세로 정렬</h2> <h2> ≧ 768px에서 폭 비율 1:3:2</h2> <div class="row pb-5"> <div class="col-md-2 btn btn-danger">col-sm-2</div> <div class="col-md-6 btn btn-secondary">col-sm-6</div> <div class="col-md-4 btn btn-primary">col-sm-4</div> </div> </div> 【패딩】 pb-○ : padding-bottom 【버튼】 btn : 버튼화 btn-primary : 파란색 기반 버튼화 btn-secondary : 회색 기반 버튼화 btn-danger : 레드 기반 버튼화