Bootstrap의 그리드 시스템에서 'col-md-4', 'col-xs-1' 및 'col-lg-2'는 무엇을 의미합니까?

부트스트랩의 그리드 시스템 이해: "col-md-4", "col-xs-1" 및 "col-lg-2" 디코딩

Bootstrap의 그리드 시스템은 레이아웃 구조화를 위한 유연하고 반응성이 뛰어난 솔루션을 제공합니다. 세 가지 주요 클래스 접두사가 사용됩니다: "col-xs", "col-sm", "col-lg" 뒤에 숫자가 옵니다. 이 숫자는 그리드 내에서 열이 정렬되는 방식을 정의합니다.

숫자가 그리드를 정렬하는 방법

접두사 뒤의 숫자는 해당 요소가 차지할 열 수를 나타냅니다. 12개의 사용 가능한 열 중 각 행에는 총 12개의 열이 있으므로 "col--6"은 사용 가능한 공간의 절반을 차지하고 "col--12"는 전체 너비를 차지합니다.

숫자 활용 방법

이러한 클래스를 사용할 때는 원하는 화면 크기에 따라 접두어를 지정해야 합니다. "xs"는 매우 작은 화면(휴대폰)에 적용되고, "sm"은 작은 화면(태블릿)에 적용되고, "md"는 중간 화면(일부 데스크탑)에, "lg"는 대형 화면(나머지 데스크탑)에 적용됩니다.

예를 들어, 행 내에 두 개의 동일한 열을 생성하려면 다음을 사용합니다.

<div>

숫자가 나타내는 것

클래스의 숫자는 특정 항목을 나타냅니다. 그리드 내의 너비. 각 열은 행 내에서 사용 가능한 전체 공간의 일부를 나타냅니다.

• "col-*-1": 너비의 1/12
• "col-*-2" : 너비의 2/12
• "col-*-3": 너비의 3/12
• ...
• "col-*-12": 너비의 12/12

이러한 클래스를 결합하면 다양한 화면 크기와 해상도에 맞게 조정되는 사용자 정의 레이아웃을 만들 수 있습니다. 다양한 중단점에서 다양한 동작을 지정하려면 여러 열 클래스를 사용해야 합니다. 이것이 바로 Bootstrap을 반응형으로 만들고 유연하고 적응력이 뛰어난 레이아웃을 만들 수 있게 해줍니다.

위 내용은 Bootstrap의 그리드 시스템에서 'col-md-4', 'col-xs-1' 및 'col-lg-2'는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!