부트스트랩 그리드 시스템은 무엇을 의미합니까?

그리드 시스템이란

그리드 시스템이란 페이지 레이아웃을 동일한 너비의 열로 나눈 다음 열 수를 정의하여 페이지 레이아웃을 모듈화하는 것을 말합니다. Bootstrap의 그리드 시스템은 1-12 열 패턴을 사용하고 비례 계산을 사용하여 정의한 열 너비를 설정합니다. 예를 들어 이 행에 2열 레이아웃 모드를 사용하려는 경우 각 열의 너비는 탐색에 사용하는 장치에 관계없이 이 비율로 표시됩니다. 그러나 장치 너비가 설정한 최소 너비보다 작은 경우 두 열이 나란히 하나의 열이 됩니다.

Bootstrap의 그리드 시스템

Bootstrap에서 그리드 시스템을 사용하는 것은 매우 간단하고 편리합니다. 이미 정의된 클래스를 div에 추가하기만 하면 됩니다.

먼저 Bootstrap에서 사용할 수 있는 여러 그리드 클래스를 살펴보겠습니다.

1. .col-xs-* 휴대폰 및 기타 장치와 유사한 초소형 화면 클래스(

2. .col-sm-* 태블릿 장치와 유사한 작은 화면 장치 클래스(≥768px 및

3. .col-md-* 중간 장치 클래스입니다(≥992px 및

4. .col-lg-* 이는 대형 장치 클래스(≥1200px)입니다.

부트스트랩 그리드 시스템 사용 방법

기기에 해당하는 그리드 클래스를 사용하여 다양한 기기에 적용하려는 레이아웃 스타일을 결정할 수 있습니다. 예:

> ; 이 인코딩의 결과로 두 div는 PC에서는 두 개의 행으로 표시되지만(각 행은 그리드의 12개 열을 차지함) 모바일 브라우저에서는 1개의 행과 2개의 열로 표시됩니다(각 열은 그리드의 6개 열을 차지함). 그리드). 이 양식에서는 그리드 시스템을 쉽게 사용하여 자신만의 애플리케이션 레이아웃을 사용자 정의할 수 있습니다.

기타 정보

위의 사용 방법 외에도 "열 오프셋 클래스"를 사용하여 자신만의 그리드 위치를 빠르게 지정할 수도 있습니다. 사용 방법은

이 작성 방법에 따르면 이 div는 PC 측에서 오른쪽으로 3열만큼 오프셋됩니다.

Bootstrap과 관련된 더 많은 기술 기사를 보려면

Bootstrap Tutorial

칼럼을 방문하여 알아보세요!

위 내용은 부트스트랩 그리드 시스템은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!