Bootstrap 4의 그리드 시스템에 대해 이야기해 보겠습니다.

이 기사에서는 Bootstrap의 그리드 시스템을 안내합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Bootstrap4의 그리드 시스템

Bootstrap은 반응성이 뛰어난 모바일 우선 유동 그리드 시스템을 제공합니다. 화면이나 뷰포트 크기가 증가하면 시스템이 자동으로 이를 최대 12개의 목록으로 나눕니다.

Bootstrap 4의 그리드 시스템은 반응성이 뛰어나며 화면 크기에 따라 열이 자동으로 재정렬됩니다.

관련 권장 사항: "bootstrap Tutorial"

Grid Class

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

.col - 모든 장치용
.col-sm - 태블릿 - 화면 너비 동일 576px 이상
.col-md- 데스크탑 모니터 - 화면 너비가 768px 이상)
.col-lg- 대형 데스크탑 모니터 - 화면 너비가 992px 이상)
.col-xl- Extra- 대형 데스크탑 모니터 - 화면 너비가 1200px 이상)

그리드 시스템 규칙

Bootstrap4 그리드 시스템 규칙:

그리드의 각 행은 .container 세트(고정 너비)에 배치되어야 합니다. .container-fluid (전체 화면 너비) 클래스 컨테이너. 일부 여백과 패딩을 자동으로 설정할 수 있습니다.

행을 사용하여 열의 수평 그룹을 만듭니다.

콘텐츠는 열에 배치되어야 하며 열만 행의 직계 하위 항목이 될 수 있습니다.

.row 및 .col-sm-4와 같은 사전 정의된 클래스를 사용하여 그리드 레이아웃을 빠르게 만들 수 있습니다.

열은 내용을 채워서 열 내용 사이에 간격을 만듭니다. 이 간격은 .rows 클래스의 음수 여백을 통해 첫 번째 행과 마지막 열을 설정하여 상쇄됩니다.

그리드 열은 지정된 12개 열에 걸쳐 생성됩니다. 예를 들어 3개의 동일한 열을 설정하려면 3개의 .col-sm-4를 사용하여 설정해야 합니다.

Bootstrap 3과 Bootstrap 4의 가장 큰 차이점은 Bootstrap 4가 이제 float 대신 flexbox(탄성 상자)를 사용한다는 것입니다. Flexbox의 가장 큰 장점 중 하나는 지정된 너비가 없는 그리드 열이 자동으로 너비와 높이가 동일하게 설정된다는 것입니다. Flexbox에 대해 자세히 알아보려면 CSS Flexbox 튜토리얼을 읽어보세요.

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

Bootstrap 4 그리드의 기본 구조

<!-- 第一个例子：控制列的宽度及在不同的设备上如何显示 -->
<div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
</div>
 
<!-- 第二个例子：或让 Bootstrap 者自动处理布局 -->
<div>
  <div></div>
  <div></div>
  <div></div>
</div>

第一个例子：创建一行(<div>)。
然后， 添加是需要的列( .col-*-* 类中设置)。 
第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 
第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。

第二个例子: 不在每个 col 上添加数字，
让 bootstrap 自动处理布局，同一行的每个列宽度相等： 
两个 "col" ，每个就为 50% 的宽度。
三个 "col"每个就为 33.33% 的宽度，
四个 "col"每个就为 25% 的宽度，
以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。<p><span style="font-size: 16px;"><strong>폭이 같은 열 만들기, Bootstrap 자동 레이아웃</strong> </span> </p>
<pre class="brush:php;toolbar:false"><div>
  <div>.col</div>
  <div>.col</div>
  <div>.col</div>
</div>

폭이 같은 반응형 열

다음 예에서는 태블릿과 대형 화면에서 너비가 같은 반응형 열을 만드는 방법을 보여줍니다. 모바일 장치에서, 즉 화면 너비가 576px보다 작으면 4개의 열이 서로 쌓이게 됩니다.

<div>.col-sm-3</div>
<div>.col-sm-3</div>
<div>.col-sm-3</div>
<div>.col-sm-3</div>

너비가 다른 반응형 열

다음 예에서는 태블릿에서 너비가 다른 경우를 보여줍니다. 및 더 큰 화면 반응형 열의 너비. 모바일 장치에서, 즉 화면 너비가 576px 미만인 경우 두 열은 서로 겹쳐집니다.

<div>
  <div>.col-sm-4</div>
  <div>.col-sm-8</div>
</div>

태블릿 및 데스크톱

다음 예에서는 두 열의 서로 다른 너비를 보여줍니다. 데스크톱 디스플레이의 열은 50%를 차지하며, 태블릿에서는 왼쪽이 25%, 오른쪽이 75%로 쌓여서 표시됩니다.

<div>
  <div>
    <div>
      <p></p>
    </div>
    <div>
      <p></p>
    </div>
  </div>
</div>

태블릿, 데스크탑, 대형 데스크탑 모니터, 초대형 데스크탑 모니터

다음 예는 태블릿, 데스크탑, 대형 데스크탑 모니터, 초대형 데스크탑 모니터의 너비 비율을 25%/75%, 50으로 나타냅니다. %/ 50%, 33.33%/66.67%, 16.67/83.33%는 휴대폰 등 소형 기기에 겹쳐서 표시됩니다.

<div>
  <div>
    <div>
      <p></p>
    </div>
    <div>
      <p></p>
    </div>
  </div>
</div>

Offset 열

오프셋 열은 offset- - 클래스를 통해 설정됩니다. 첫 번째 별표(*)는 화면 장치 유형을 나타내는 sm, md, lg, xl일 수 있고 두 번째 별표(*)는 1~11 사이의 숫자일 수 있습니다.

대형 화면 디스플레이에서 오프셋을 사용하려면 .offset-md-* 클래스를 사용하세요. 이러한 클래스는 * 열만큼 열의 왼쪽 여백을 늘립니다. 여기서 *의 범위는 1부터 11까지입니다.

예: .offset-md-4는 .col-md-4의 4개 열을 오른쪽으로 이동합니다.

<div>
  <div>.col-md-4</div>
  <div>.col-md-4 .offset-md-4</div>
</div>
<div>
  <div>.col-md-3 .offset-md-3</div>
  <div>.col-md-3 .offset-md-3</div>
</div>
<div>
  <div>.col-md-6 .offset-md-3</div>
</div>

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !