자꾸 입문 - 2

그리드 시스템

컬럼(column : 열)과 거터(gutter : 그루브)

Bootstrap에서는 페이지의 폭을 12열로 분할한 그리드 시스템을 채용하고 있습니다.
12열로 분할된 그리드의 열을 열이라고 하고 각 열 사이의 여백을 거터라고 합니다.

컨테이너(container : 상자)

그리드 시스템을 사용하여 레이아웃 할 때 먼저 사용하는 것이 컨테이너입니다.
컨테이너는 콘텐츠를 넣는 상자이며 페이지의 가로 중앙에 콘텐츠를 배치하는 역할을합니다.
컨테이너에는 고정 폭 컨테이너와 가변 폭 컨테이너의 두 가지 유형이 있습니다.

고정 폭 컨테이너

화면 크기에 따라 콘텐츠의 최대 너비를 전환할 수 있습니다.

윈도우를 확대/축소해도 폭은 고정입니다.

container 클래스를 사용합니다.

<div class="container">
    <!-- ここにコンテンツを入れる -->
</div>

가변폭 컨테이너

화면 사이즈 전폭에 걸치는 유동적인 컨텐츠 폭을 갖게 할 수 있습니다.

윈도우의 확대/축소에 따라 폭이 가변(화면 폭에 대해서, 항상 전폭)

container-fuild 클래스를 사용합니다.

<div class="container-fluid">
    <!-- ここにコンテンツを入れる -->
</div>

row 클래스(행)

컨테이너(상자) 안에는 row 클래스(행)를 넣습니다.
row 클래스는, 일련의 컬럼을 올바르게 레이아웃 하기 위해서 사용하는 클래스로, 이 안에 컬럼을 정리합니다.
여러 줄로 만들려면 컨테이너에 row 클래스를 지정하는 요소를 추가합니다.

<div class="container">
    <div class="row"><!-- 1行目 -->
        <!-- ここにカラムを入れる -->
    </div>
    <div class="row"><!-- 2行目 -->
        <!-- ここにカラムを入れる -->
    </div>
</div>

그리드 시스템 사용법

그리드 시스템은 일련의 컨테이너(container 클래스 또는 container-fluid 클래스), 행(row 클래스), 열(col 클래스)을 사용하여 컨텐츠를 레이아웃합니다.
기본 구조는 컨테이너(container 클래스 또는 container-fluid 클래스) > 행(row 클래스) > 열(col 클래스)로 되어 있습니다.

<div class="container">
    <div class="row"><!-- row : 行 -->
        <div class="col">1列目</div><!-- col : カラム -->
        <div class="col">2列目</div><!-- col : カラム -->
        <div class="col">2列目</div><!-- col : カラム -->
    </div>
</div>

색인

부트스트랩 자꾸 입문
부트스트랩 자꾸 입문 - 3

후기

수시로 갱신하겠습니다!