부트스트랩에 그리드 레이아웃이 있나요?-부트스트랩 튜토리얼-php.cn

부트스트랩에는 그리드 레이아웃이 있습니다. 그리드 레이아웃은 행을 12개의 그리드로 나누고 레이아웃을 위해 12개의 그리드를 다른 div 요소에 할당하는 것을 의미합니다. 열 너비를 숫자로 설정하려면 모듈식 페이지 레이아웃은 열 수에 따라 정의됩니다.

부트스트랩에 그리드 레이아웃이 있나요?

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

부트스트랩에 그리드 레이아웃이 있나요?

부트스트랩에 그리드 레이아웃이 있나요?

1 . 그리드 레이아웃이란 무엇입니까?

과거에는 웹 페이지 레이아웃을 만들 때 테이블 레이아웃을 사용하여 웹 페이지를 테이블을 나누어 큰 테이블과 작은 테이블로 나눈 다음 테이블에서 요소를 채웠습니다. 나중에 div+css 레이아웃으로 발전했습니다. div+css를 통해 플로팅합니다. 부동:오른쪽 및 부동:왼쪽 레이아웃.

이제 부트스트랩은 그리드 레이아웃을 사용합니다. 간단히 말하면 행은 12개의 그리드로 나누어집니다. 레이아웃을 위해 서로 다른 DIV 요소에 12개의 그리드를 할당합니다.

Bootstrap에 그리드 레이아웃을 도입, 페이지를 테이블 형태의 레이아웃으로 분할
각 행은 12개의 열로 구성되며, 열의 너비는 해당 열이 차지하는 열 수를 설정하여 설정할 수 있습니다.
다양한 장치 너비에 해당하는 5가지 반응형 크기로 반응형 레이아웃 지원
Flexbox 흐름 레이아웃을 사용하여 페이지 레이아웃 구현
div를 사용하여 컨테이너, 행 및 열 레이아웃 구현

2. 그리드 레이아웃은 어떻게 구현하나요?

우선 부트스트랩, 웹팩 로딩, CND 레퍼런스 활용 등 다양한 방법이 있습니다. CDN에서 로컬 컴퓨터로 버전 3.37을 직접 다운로드했습니다. 그런 다음 link 태그를 통해 참조하십시오. 이는 Jquery를 참조하는 것과 유사합니다.

둘째, 레이아웃에 따라 그리드를 지정합니다. 예를 들어, 세 개의 열이 있는 큰 가로 레이아웃을 구현한다고 가정해 보겠습니다. 그런 다음 각 DIV에 12/3=4 그리드를 할당합니다.

세 열의 크기가 서로 다른 경우 왼쪽에 약 3개, 중간에 5개, 오른쪽에 4개의 그리드가 있습니다.

    栅格布局      
     第一列
 第二列
 第三列
 
 
    第一列
 第二列
 第三列
 
 
    第一列
 第二列
 第三列
 
 
    第一列
 第二列
 第三列
 
 
    第一列
 第二列
 第三列

로그인 후 복사

3. 그리드 레이아웃 클래스 매개변수

그리드 클래스에는 col-lg-1, col-md가 4개 있습니다. -1, col-sm-1, col-xs-1은 각각 대형 화면(large) 및 중형 화면(middl), 작은 화면(smll), 매우 작은 화면(xs)에 해당합니다. 그 중 col은 Column을 뜻하고 가운데는 size의 약어, 마지막은 div가 할당한 그리드 크기(예는 1/12)