bootstrap4의 그리드는 5가지 범주로 나뉩니다. 1. 모든 장치용 ".col-sm" 3. 데스크톱 모니터용 ".col-md" . " .col-lg", 대형 데스크탑 모니터용 5. ".col-xl", 초대형 데스크탑 모니터용.
이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 4, DELL G3 컴퓨터
Bootstrap은 화면이나 뷰에 따라 변경되는 반응형 모바일 장치 우선 유동 그리드(그리드) 시스템을 제공합니다. 뷰포트 크기가 증가하면 시스템은 이를 자동으로 최대 12개의 열로 나눕니다.
또한 필요에 따라 열 수를 정의할 수도 있습니다.
Bootstrap 4의 그리드 시스템은 반응성이 뛰어나며 열은 화면 크기에 따라 자동으로 재정렬됩니다.
Bootstrap 4 그리드 시스템에는 다음과 같은 5가지 클래스가 있습니다:
.col - 모든 기기용
.col-sm - 태블릿 - 화면 너비가 576px
이상입니다. col -md- 데스크탑 모니터 - 화면 너비가 768px 이상)
.col-lg- 대형 데스크탑 모니터 - 화면 너비가 992px 이상)
.col-xl- 초대형 데스크탑 모니터 - 화면 너비가 1200px 이상)
다음 표에는 Bootstrap 그리드 시스템이 다양한 장치에서 작동하는 방식이 요약되어 있습니다.
초소형 장치 ≥576px |
데스크탑 모니터 ≥768px |
대형 데스크톱 모니터 ≥992px |
초대형 데스크톱 모니터 ≥1200px |
| 컨테이너 최대 너비|
---|---|---|---|---|---|
720px | 960px | 1140px | 클래스 접두어 | ||
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- .col-lg-
|
|
열 수 및 | |||||
간격 너비 | |||||
중첩 가능 | |||||
열 정렬 |
위 내용은 Bootstrap4의 래스터는 여러 범주로 나뉩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!