부트스트랩의 12그리드 시스템이란 무엇입니까?

부트스트랩에서 12그리드 시스템은 페이지 레이아웃을 동일한 너비의 1~12열로 나누고, 비율 계산을 통해 열 너비를 정의하고, 열 수를 통해 모듈식 페이지 레이아웃 방법을 정의하는 것을 의미합니다. 스타일, 모바일 우선 그리드 시스템.

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 3.3.7, DELL G3 컴퓨터

부트스트랩의 12그리드 시스템이란 무엇입니까?

Bootstrap은 반응형 모바일 우선 스트리밍 그리드 세트를 제공합니다. 화면이나 뷰포트 크기가 커지면 시스템은 자동으로 최대 12개의 열로 나누어집니다.

그리드란 무엇인가요?

그래픽 디자인에서 그리드는 콘텐츠를 구성하는 데 사용되는 일련의 교차 직선(세로, 가로)으로 구성된 구조(보통 2차원)입니다. 인쇄 디자인의 디자인 레이아웃과 내용 구조에 널리 사용됩니다. 웹 디자인에서는 일관된 레이아웃을 빠르게 생성하고 HTML과 CSS를 효과적으로 사용하기 위한 방법입니다.

간단히 말해서 웹 디자인의 그리드는 콘텐츠를 구성하고, 웹 사이트를 쉽게 탐색할 수 있도록 하며, 사용자 측의 부하를 줄이는 데 사용됩니다.

부트스트랩 그리드 시스템이란 무엇입니까?

Bootstrap에는 장치 또는 뷰포트 크기가 증가함에 따라 최대 12개 열까지 적절하게 확장되는 반응형 모바일 우선 유동 그리드 시스템이 포함되어 있습니다. 여기에는 간단한 레이아웃 옵션을 위한 사전 정의된 클래스뿐만 아니라 보다 의미 있는 레이아웃을 생성하기 위한 강력한 믹스인 클래스도 포함되어 있습니다.

그리드 시스템이란 페이지 레이아웃을 동일한 너비의 열로 나눈 다음 열 수를 정의하여 페이지 레이아웃을 모듈화하는 것을 말합니다. Bootstrap의 그리드 시스템은 1-12 열 패턴을 사용하고 비례 계산을 사용하여 정의한 열 너비를 설정합니다.

예를 들어 이 행에 2열 레이아웃 모드를 사용하려는 경우 각 열의 너비는 탐색에 어떤 장치를 사용하든 이 비율로 표시됩니다. . 그러나 장치 너비가 설정한 최소 너비보다 작은 경우 두 열이 나란히 하나의 열이 됩니다.

Bootstrap의 그리드 시스템

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

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

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

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

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

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

관련 권장 사항: 부트스트랩 튜토리얼

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