[Bootstrap4] 03. 부트스트랩4 그리드

Posted by 낭만사업가 정대표 블로그 on 2022-02-27 13:34:12

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

부트스트랩의 그리드 시스템은 flexbox로 구축되었으며 페이지 전체에 최대 12개의 열을 허용합니다.

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

화면 캡처 2022-02-27 133232.jpg

그리드 시스템은 반응형으로 작동되며 열은 화면 크기에 따라 자동으로 재정렬됩니다. 

단, 합계가 최대 12개 이하인지 확인합니다. (사용 가능한 열 12개를 모두 사용할 필요는 없음)


그리드 클래스

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

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

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

 

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

 


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

다음은 부트스트랩 그리드의 기본 구조입니다.

<!-- Control the column width, and how they should appear on different devices -->
<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>

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

첫 번째 예: 

행을 생성합니다(<div class="row">). 

그런 다음 원하는 수의 열을 추가합니다(적절한 .col-*-* 클래스가 있는 태그). 

첫 번째 별(*)은 sm, md, lg 또는 xl의 응답성을 나타내고 두 번째 별은 숫자를 나타내며 각 행에 대해 최대 12가 되어야 합니다.

 

두 번째 예: 

각 열에 숫자를 추가하는 대신 부트스트랩이 레이아웃을 처리하도록 하여 동일한 너비의 열을 생성합니다. 

두 개의 "col" 요소 = 각 열의 50% 너비. 3개의 열 = 각 열에 33.33% 너비. 

네 개의 열 = 25% 너비 등. .col-sm|md|lg|xl을 사용하여 열을 반응형으로 만들 수도 있습니다.

아래에서 기본 Bootstrap 4 그리드 레이아웃의 몇 가지 예를 수집했습니다.

 

3개의 열

화면 캡처 2022-02-27 134859.jpg

다음 예에서는 모든 장치 및 화면 너비에서 3개의 동일한 너비 열을 만드는 방법을 보여줍니다.

Example

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>
Try it Yourself »

반응형 열

화면 캡처 2022-02-27 134914.jpg

다음 예에서는 태블릿에서 시작하여 초대형 데스크톱으로 확장되는 4개의 동일한 너비 열을 만드는 방법을 보여줍니다. 

휴대전화나 너비가 576px 미만인 화면에서는 열이 자동으로 서로 겹쳐집니다.

Example

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>
Try it Yourself »

크기가 다른 2개의 반응형 열

화면 캡처 2022-02-27 135056.jpg

다음 예는 태블릿에서 시작하여 대형 추가 데스크탑으로 확장되는 두 개의 다양한 너비 열을 얻는 방법을 보여줍니다.

Example

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
Try it Yourself »

Total 106
번호 제목 글쓴이 조회 날짜
106 67 06-20
105 103 06-21
104 38 06-20
103 119 02-25
102 539 02-27
101 13 06-23
100 122 02-25
99 113 02-27
98 11 06-24
97 75 02-25
열람 117 02-27
95 21 06-27
94 57 04-11
93 93 02-28
92 64 04-12
RSS

오픈런하우스

1인가구를 위한 원룸형 아파트 쉐어하우스, 1인기업(프리랜서)을 위한 홈오피스형 공유주택

GO!