부트스트랩 4 그리드 시스템

부트스트랩 4 그리드 시스템

부트스트랩의 그리드 시스템은 페이지 전체에 최대 12개의 열을 허용합니다.

12개의 열을 모두 개별적으로 사용하지 않으려면 열을 그룹화하여 더 넓은 열을 만들 수 있습니다.

부트스트랩의 그리드 시스템은 반응형이며 화면 크기에 따라 열이 재배열됩니다. 큰 화면에서는 콘텐츠가 3열로 구성되어 더 잘 보일 수 있지만 작은 화면에서는 콘텐츠 항목이 쌓이면 더 좋습니다. 서로 위에.

그리드 클래스

Bootstrap 4 그리드 시스템에는 5가지 클래스가 있습니다.

• .col-(초소형 기기 - 화면 너비가 576px 미만)
• .col-sm-(소형 기기 - 화면 너비가 576px 이상)
• .col-md-(중형 기기 - 화면 너비가 768px 이상)
• .col-lg-(대형 기기 - 화면 너비가 992px 이상)
• .col-xl-(xlarge 장치 - 화면 너비가 1200px 이상)

위의 클래스를 결합하여 보다 동적이고 유연한 레이아웃을 만들 수 있습니다.

팁:sm 각 클래스는 확장되므로 및 에 대해 동일한 너비를 설정 md하려면 만 지정하면 됩니다 sm.

그리드 시스템 규칙

일부 Bootstrap 4 그리드 시스템 규칙:

• 적절한 정렬 및 패딩을 위해 행은 .container(고정 너비) 또는 (전체 너비) 내에 배치되어야 합니다..container-fluid
• 행을 사용하여 가로 열 그룹 만들기
• 콘텐츠는 열 내에 배치되어야 하며 열만 행의 직계 자식일 수 있습니다.
• .row 와 같은 미리 정의된 클래스 .col-sm-4는 그리드 레이아웃을 빠르게 만드는 데 사용할 수 있습니다.
• 열은 패딩을 통해 여백(열 콘텐츠 사이의 간격)을 만듭니다. 해당 패딩은 음수 여백을 통해 첫 번째 및 마지막 열의 행에서 오프셋됩니다..rows
• 그리드 열은 확장하려는 12개의 사용 가능한 열 수를 지정하여 생성됩니다. 예를 들어 3개의 동일한 열은 3개의.col-sm-4
• 열 너비는 백분율로 표시되므로 항상 유동적이며 상위 요소를 기준으로 크기가 조정됩니다.
• Bootstrap 3과 Bootstrap 4 의 가장 큰 차이점은 Bootstrap 4 가 이제 float 대신 flexbox를 사용한다는 것입니다. flexbox의 큰 장점 중 하나는 너비가 지정되지 않은 그리드 열이 자동으로 "동일 너비 열"(및 동일한 높이)로 레이아웃된다는 것입니다. 예: 가 있는 세 개의 요소 .col-sm는 각각 자동으로 작은 중단점에서 33.33% 이상의 너비가 됩니다. 팁: Flexbox에 대해 더 알고 싶다면 CSS Flexbox Tutorial 을 읽어보세요 .

부트스트랩 4 그리드의 기본 구조

다음은 Bootstrap 4 그리드의 기본 구조입니다.

첫 번째 예: 행을 생성합니다( <div class="row">). 그런 다음 원하는 수의 열(적절한 .col-*-*클래스가 있는 태그)을 추가합니다. 첫 번째 별(*)은 sm, md, lg 또는 xl의 응답성을 나타내고 두 번째 별은 숫자를 나타내며 각 행에 대해 항상 12를 더해야 합니다.

두 번째 예: 각각에 숫자를 추가하는 대신 col부트스트랩이 레이아웃을 처리하도록 하여 동일한 너비의 열을 생성합니다. 두 개의 "col"요소 = 각 열의 너비 50%. 3개의 열 = 각 열에 33.33% 너비. 네 개의 열 = 25% 너비 등 .col-sm|md|lg|xl. 열을 반응형으로 만드는 데 사용할 수도 있습니다.

그리드 옵션

다음 표에는 다양한 화면 크기에서 Bootstrap 4 그리드 시스템이 작동하는 방식이 요약되어 있습니다.

예

다음 장에서는 다양한 장치 및 화면 너비에 대한 그리드 시스템의 예를 보여줍니다.

• 스택에서 수평으로
• 초소형 레이아웃
• 소형 기기
• 중형 기기
• 대형 기기
• 초대형 장치
• 더 많은 그리드 예시