Bootstrap Grid

Table of contents

1. Bootstrap Grid Basic
   1. What is Grid System?
   2. Grid Basic Structure
   3. Grid System Rules
   4. Nested Columns
   5. Grid Option

Bootstrap Grid Basic

What is Grid System?

그리드는 화면을 총 12열로 구성해서 레이아웃을 잡는 시스템

▸ 여러개를 그룹화 해 더 많은 열로 만들 수 있음

▸ 그리드 클래스를 이용해 스크린 사이즈에 따라서 Responisve하게 열을 리사이징 할 수 있음

Grid Basic Structure

1. 먼저 행을 추가 하기 row

2. 다음 원하는 수의 열을 각 행에 최대 12개 더하기

기본 구조

<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

Grid System Rules

일부 부트 스트랩 그리드 시스템 규칙

• 적절한 정렬 및 패딩을 위해 행은 .container(고정 너비) 또는 .container-fluid(전체 너비)내에 배치되어야함

• 행을 사용하여 가로 열 그룹 만들기

• 콘텐츠는 열 내에 배치되어야하며 열만 행의 직계 자식 일 수 있음

• 열은 패딩을 통해 gutters(열 내용 사이의 간격)를 만들고 해당 패딩은 .rows의 음수 여백을 통해 첫 번째 및 마지막 열의 행에서 오프셋됨

• 열 너비는 백분율로 표시되므로 항상 상위 요소에 비해 유동적이고 크기가 조정됨

Nested Columns

하나의 그리드 내부에 또 그리드를 만들수 있음

▸ 내부에 만들어진 그리드는 또다시 12개의 그리드가 생성

W3School

Grid Option

Table of contents

• Class