Bootstrap의 그리드 레이아웃 이해

날이 갈수록 새로운 화면 크기의 새로운 장치가 등장하고 있으며, 웹 개발자로서 우리는 이러한 다양한 화면 크기에 반응하는 웹 애플리케이션을 만들어야 합니다. 반응 형 레이아웃을 만드는 방법에는 여러 가지가 있지만 부트 스트랩 그리드 레이아웃이 가장 쉽습니다.

4 Equal Columns 레이아웃

레이아웃을 만들려면 다음 단계를 완료해야 합니다.

• 고정 너비에 대한 container 클래스 또는 화면의 전체 너비에 대한 container-fluid를 사용하여 div를 만듭니다.
• 클래스 행이있는 div를 만듭니다. 클래스 행이 있는 Div는 컨테이너 내부에 있어야 합니다.
• 4 개의 열에 대해 4 개의 div를 만듭니다.  열의 Div는 div 행의 직계 자식이어야 합니다.
• 내용은 div 열 안에 있습니다.

한 행에 4 개의 동일한 열을 만들기 위해 아래 목록과 같이 col-md-3 에 클래스가 설정된 4 개의 div를 만들었습니다.

<div class="row">
    <div class="col-md-3">
        <button class="btn btn-success">column1</button>
    </div>
    <div class="col-md-3">
        <button class="btn btn-info">column2</button>
    </div>
    <div class="col-md-3">
        <button class="btn btn-danger">column3</button>
    </div>
    <div class="col-md-3">
        <button class="btn btn-warning">column4</button>
    </div>
</div>

부트스트랩 그리드 시스템은 사용 가능한 화면 너비를 12개의 열로 나눕니다.  따라서 4 개의 열을 만들기 위해 col-md-3 클래스 (중간 장치 용)를 사용했습니다.

3 Unequal Columns Layout

연속으로 세 개의 동일하지 않은 열을 만들기 위해 아래 목록과 같이 col-md-3 , col-md-6 및 col-md-4 클래스가 설정된 세 개의 div를 만들었습니다.

<div class="row">
    <div class="col-md-3">
        <h2>some text</h2>
    </div>
    <div class="col-md-6">
        <h2>some text</h2>
    </div>
    <div class="col-md-4">
        <h2>some text</h2>
    </div>
</div>

.col-md-* 클래스를 사용하여 레이아웃을 만들었는데, 하나는 동일한 열이 있고 다른 하나는 중간 장치에 대해 동일하지 않은 열이 있습니다. 다른 장치의 경우 게시물의 뒷부분에서 논의할 다른 클래스를 사용할 수 있습니다. 그리드 시스템의 이론적 개념에 대해 더 자세히 논의해 보겠습니다.

부트스트랩 그리드 시스템

부트스트랩 3.0 그리드 시스템은 모바일을 염두에 두고 설계되었습니다. 반응형이며 매우 작은 장치, 작은 장치, 데스크톱 및 매우 큰 데스크톱에 대한 레이아웃을 만드는 클래스를 제공합니다. 다양한 종류의 장치에 대해 제공되는 다양한 클래스가 아래 이미지에 나와 있습니다.

부트스트랩 그리드 시스템은 각 유형의 화면을 12개의 열로 나눕니다. 열의 너비는 화면 크기에 따라 다르지만 Bootstrap은 다양한 화면 크기를 고려하며 열 크기는 다음과 같습니다.

이 12개의 열은 아래와 같이 화면 크기에 따라 다양한 변형으로 확대 또는 축소할 수 있습니다.

아래 목록을 사용하여 중간 크기 장치에 대한 위의 레이아웃을 만들 수 있습니다.

<div class="container">
    <div class="row">
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>

    </div>

    <div class="row">
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
        <div class="col-md-2">
            col-md-2
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            col-md-3
        </div>
        <div class="col-md-3">
            col-md-3
        </div>
        <div class="col-md-3">
            col-md-3
        </div>
        <div class="col-md-3">
            col-md-3
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            col-md-4
        </div>
        <div class="col-md-4">
            col-md-4
        </div>
        <div class="col-md-4">
            col-md-4
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            col-md-6
        </div>
        <div class="col-md-6">
            col-md-6
        </div>
    </div>
</div>

부트스트랩 그리드 시스템을 사용하는 규칙

부트스트랩 그리드 레이아웃으로 작업하려면 다음 사항을 처리해야 합니다.

• 행은 적절한 패딩 및 정렬을 가져오기 위해 container (고정 너비의 경우) 또는 container.fluid (전체 너비의 경우) 내에 배치되어야 합니다.
• 열은 행의 직계 자식이어야 합니다.
• 콘텐츠는 열 안에 배치해야 합니다.
• 각 행에는 두 개의 사용 가능한 열이 있습니다.
• 단일 행 내에 12개 이상의 열이 배치되면 추가 열의 각 그룹은 하나의 단위로 새 줄로 줄 바꿈됩니다.

중형 장치용 레이아웃 만들기

다음 요구 사항에 따라 중간 장치에 대한 레이아웃을 만들어야 한다고 가정해 보겠습니다

• Should have three columns
• 첫 번째 열의 너비는 2열 너비와 같아야 합니다.
• 2번째 열의 너비는 6열 너비와 같아야 합니다.
• 3번째 열의 너비는 4개 열의 너비와 같아야 합니다.

이 레이아웃은 아래 목록에 표시된 대로 생성할 수 있습니다.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <h2>.col-md-2</h2>
            <p>some text</p>
        </div>
        <div class="col-md-6">
            <h2>.col-md-6</h2>
            <p>some text</p>
        </div>
        <div class="col-md-4">
            <h2>.col-md-4</h2>
            <p>some text</p>
        </div>
    </div>
</div>

이렇게 하면 아래와 같이 레이아웃이 생성됩니다.

장치의 전체 너비로 작업하지 않고 고정 너비를 사용하려면 아래 목록과 같이 컨테이너 클래스 내부에 행 div를 넣으십시오.

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <h2>.col-md-2</h2>
            <p>some text</p>
        </div>
        <div class="col-md-6">
            <h2>.col-md-6</h2>
            <p>some text</p>
        </div>
        <div class="col-md-4">
            <h2>.col-md-4</h2>
            <p>some text</p>
        </div>
    </div>
</div>

여기서 레이아웃은 아래 이미지와 같이 고정 너비를 사용하는 것과 같이 생성됩니다.

단일 행에 12개 이상의 열을 넣으면 추가 열이 단위로 다음 줄에 쌓입니다.

소형 장치를 위한 레이아웃 만들기

다음 요구 사항을 가진 소형 장치에 대한 레이아웃을 만들어야 한다고 가정해 보겠습니다.

• Should have three columns
• 첫 번째 열의 너비는 2열 너비와 같아야 합니다.
• 2nd의 너비는^​ 6개 열의 너비와 같아야 합니다.
• 3번째의 너비는 4개의 열 너비와 같아야 합니다.

이 레이아웃은 아래 목록에 표시된 것처럼 소형 장치용으로 만들 수 있습니다.

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2">
            <h2>.col-sm-2</h2>
            <p>some text</p>
        </div>
        <div class="col-sm-6">
            <h2>.col-sm-6</h2>
            <p>some text</p>
        </div>
        <div class="col-sm-4">
            <h2>.col-sm-4</h2>
            <p>some text </p>
        </div>
    </div>
</div>

이 스니펫은 아래 이미지에 표시된 레이아웃을 제공합니다. 알 수 있듯이 두 번째 열의 너비는 첫 번째 열 너비의 3 배입니다. 또한 주목할 수 있는 또 다른 중요한 점은 브라우저의 너비가 줄어들어도 열이 세로로 쌓이지 않는다는 것입니다(작은 장치 시뮬레이션).

같은 방식으로 대형 및 초소형 장치에 대한 레이아웃은 각각 .col-mg-* 및 .col-xs.* 클래스를 사용하여 만들 수 있습니다.

태블릿 및 데스크톱용 레이아웃 만들기

col-md-* 클래스와 col-sm-* 클래스를 결합하여 데스크톱 및 태블릿용 레이아웃을 만들 수 있습니다. 아래 목록과 같이 세 개의 동일하지 않은 열의 레이아웃을 만들 수 있습니다.

<div class="row">
    <div class="col-md-2 col-sm-2">
        <h2>some text</h2>
    </div>
    <div class="col-md-6 col-sm-6">
        <h2>some text</h2>
    </div>
    <div class="col-md-4 col-sm-4">
        <h2>some text</h2>
    </div>
</div>

위에서 만든 레이아웃은 중간 화면 크기의 데스크톱과 태블릿 모두에 반응합니다.

태블릿, 데스크톱 및 모바일용 레이아웃 만들기

col-md-* 클래스, col-xs-* 및 col-sm-* 클래스를 결합하여 데스크톱 및 태블릿용 레이아웃을 만들 수 있습니다. 아래 목록과 같이 세 개의 동일하지 않은 열의 레이아웃을 만드는 방법을 살펴보겠습니다.

<div class="row">
    <div class="col-md-2 col-sm-2 col-xs-2">
        <h2>some text</h2>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
        <h2>some text</h2>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
        <h2>some text</h2>
    </div>
</div>

위에서 만든 레이아웃은 중간 화면 크기의 데스크톱, 모바일 장치 및 태블릿 모두에 반응합니다.

Nesting Columns

Bootstrap은 열의 중첩도 허용하므로 기존 열 내부에 행과 열을 넣을 수 있습니다. 중첩에서도 총 열의 합은 동일한 행에서 12보다 크지 않아야 합니다.  이를 더 잘 이해하기 위해 다음 시나리오를 고려해 보겠습니다.

• 행이 있습니다.
• 행에는 두 개의 열이 있습니다.
• 첫 번째 열은 col-md-4 클래스입니다.
• 두 번째 열은 col-md-8 클래스입니다.
• 첫 번째 열 안에 중첩된 열이 있습니다.

여기서 중첩 열의 최대 수는 col-md-4 내에서 12개입니다. 12개 이상의 열이 첫 번째 열의 다음 줄에 쌓입니다.  12개 이상의 중첩 열을 유지한 아래 목록을 살펴보겠습니다.

<div class="row">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-2">
                <h2>text here</h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <h1>I am level - col-md-8 </h1>
    </div>
</div>

여기에서 우리는 메인 행의 첫 번째 열에 12개 이상의 중첩 열을 넣었습니다. 추가 중첩 열은 아래 이미지와 같이 다음 줄에 누적됩니다.

Column Offset

Bootstrap을 사용하면 .col-md-offset-* 클래스를 사용하여 열을 오른쪽으로 이동할 수 있습니다. 따라서 열을 오른쪽으로 4 열 이동하려는 경우 col-md-offset-4 클래스를 사용해야합니다. 이 작업은 아래 목록에 표시된 대로 수행할 수 있습니다.

<div class="row">
    <div class="col-md-5 col-md-offset-4">
        <h2>moved 4 columns right</h2>
    </div>
    <div class="col-md-3">
        <h2>col-md-3 </h2>
    </div>
</div>

그러면 오프셋 열이 아래 이미지와 같이 표시됩니다.

Column Push and Pull

Bootstrap을 사용하면 열의 순서도 변경할 수 있습니다. col-md-push-* 또는 col-md-pull-* 클래스를 사용하여 이 작업을 수행할 수 있습니다.

<div class="row">
    <div class="col-md-9 col-md-push-3">col-md-9 col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">col-md-3 col-md-pull-9</div>
 </div>

여기서 첫 번째 열은 아래와 같이 오른쪽으로 3개 열로 푸시되고 두 번째 열은 왼쪽으로 9개 열로 당겨집니다.

결론

우리가 시연한 것처럼 Bootstrap에서 제공하는 다양한 클래스를 사용하여 웹 애플리케이션을 위한 반응형 레이아웃을 만들 수 있습니다. 이 게시물에서는 행 및 열 클래스와 함께 offset, push, pull 및 열 중첩에 중점을 두었습니다. 이 게시물이 도움이 되었기를 바라며 읽어 주셔서 감사합니다!

좋아하는 프레임워크를 사용하여 모든 시나리오에 대한 최신 웹 앱을 만드세요. 지금 Ignite UI 다운로드하고Infragistics jQuery 컨트롤의 강력한 기능을 경험해 보세요.