Bootstrap 4 그리드 시스템

Bootstrap의 그리드 시스템은 페이지 전체에 최대 12개의 열을 허용한다.

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

Bootstrap의 그리드 시스템은 반응성이 뛰어나며 화면 크기에 따라 열이 다시 정렬된다.
큰 화면에서는 콘텐츠를 세 개의 열로 구성하면 더 보기 좋을 수 있지만, 작은 화면에서는 콘텐츠 항목을 쌓아 두는 것이 더 좋다.

그리드 클래스

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

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

⭐ 각 클래스는 스케일업되므로 sm과 md의 너비를 동일하게 설정하려면 sm만 지정하면 된다.

예제

그리드 시스템 규칙

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

• 올바른 정렬 및 패딩을 위해 행은 .container(고정 너비) 또는 .container-fluid(전체 너비) 내에 배치해야 한다.
• 행을 사용하여 수평 열 그룹 만들기
• 내용은 열 내에 배치해야 하며 열만 행의 바로 아래 자식일 수 있다
• .row 및 .col-sm-4와 같은 미리 정의된 클래스를 사용하여 그리드 레이아웃을 빠르게 만들 수 있다.
• 열은 패딩을 통해 거터(열 내용 사이의 간격)를 생성한다. 그 패딩은 .row에서 음의 여백을 통해 첫 번째 열과 마지막 열에 대한 행에서 상쇄된다.
• 격자열은 사용할 수 있는 열 12개의 수를 지정함으로써 생성된다. 예를 들어, 3개의 동일한 열은 3개의 .col-sm-4를 사용할 것이다.
• 열 너비는 백분율이므로 항상 유동적이며 상위 요소에 대해 크기가 지정된다.
• 부트스트랩 3과 부트스트랩 4의 가장 큰 차이점은 부트스트랩 4가 이제 플로트 대신 플렉스박스를 사용한다는 것이다.
• 플렉스박스의 한 가지 큰 장점은 폭이 지정되지 않은 격자열이 자동으로 같은 폭의 열로 배치된다는 것이다. 예: .col-sm인 세 원소는 작은 중단점과 위쪽으로부터 각각 33.33%의 폭을 가진다.

⭐ Flexbox는 IE9 및 이전 버전에서는 지원되지 않는다.

Bootstrap 4 그리드의 기본 구조

예제

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기