>웹 프론트엔드 >프런트엔드 Q&A >Bootstrap4의 래스터는 여러 범주로 나뉩니다.

Bootstrap4의 래스터는 여러 범주로 나뉩니다.

青灯夜游
青灯夜游원래의
2022-01-10 10:31:052334검색

bootstrap4의 그리드는 5가지 범주로 나뉩니다. 1. 모든 장치용 ".col-sm" 3. 데스크톱 모니터용 ".col-md" . " .col-lg", 대형 데스크탑 모니터용 5. ".col-xl", 초대형 데스크탑 모니터용.

Bootstrap4의 래스터는 여러 범주로 나뉩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 4, DELL G3 컴퓨터

Bootstrap은 화면이나 뷰에 따라 변경되는 반응형 모바일 장치 우선 유동 그리드(그리드) 시스템을 제공합니다. 뷰포트 크기가 증가하면 시스템은 이를 자동으로 최대 12개의 열로 나눕니다.

또한 필요에 따라 열 수를 정의할 수도 있습니다.

Bootstrap4의 래스터는 여러 범주로 나뉩니다.

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

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

  • .col - 모든 기기용

  • .col-sm - 태블릿 - 화면 너비가 576px

  • 이상입니다. col -md- 데스크탑 모니터 - 화면 너비가 768px 이상)

  • .col-lg- 대형 데스크탑 모니터 - 화면 너비가 992px 이상)

  • .col-xl- 초대형 데스크탑 모니터 - 화면 너비가 1200px 이상)

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

컨테이너 최대 너비없음(자동) 540px720px 960px1140px클래스 접두어.col-.col-sm-.col-md-.col-xl-1230px (열의 각 변은 각각 15px입니다.) 예예

초소형 장치
≥576px
데스크탑 모니터
≥768px
대형 데스크톱 모니터
≥992px
초대형 데스크톱 모니터
≥1200px

.col- .col-sm- .col-md- .col-lg- .col-xl- .col-lg-
열 수 및
간격 너비
중첩 가능
열 정렬

부트스트랩에 대한 더 많은 관련 지식을 보려면

부트스트랩 기본 튜토리얼🎜을 방문하세요! ! 🎜

위 내용은 Bootstrap4의 래스터는 여러 범주로 나뉩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.