Bootstrap 그리드 표기법(col-md-4, col-xs-1, col-lg-2)의 숫자는 요소 너비와 정렬을 어떻게 정의합니까?

Bootstrap의 그리드 표기법 이해: col-md-4, col-xs-1, col-lg-2

Bootstrap의 새로운 기능 그리드 시스템은 요소의 레이아웃을 제어하기 위해 간단하면서도 효과적인 표기법을 사용합니다. col--, 여기서 별표(*)는 숫자를 나타냅니다. 이 표기법은 요소의 너비뿐만 아니라 다양한 화면 크기에서의 정렬도 정의합니다.

How Numbers가 그리드 정렬을 정의하는 방법

그리드 클래스의 숫자(col- xs-1, col-lg-2 등) 요소가 그리드 내에서 차지할 "열" 수를 결정합니다. 부트스트랩은 사용 가능한 공간을 12개의 동일한 열로 나누므로 col-md-4 클래스는 요소가 12개 열 중 4개에 걸쳐 있어야 함을 지정합니다.

숫자 사용 방법

이러한 숫자를 사용하려면 원하는 요소에 그리드 클래스를 추가하기만 하면 됩니다. 예를 들어, 중간 화면(md)에서 4개 열에 걸쳐 있는 열을 생성하려면 col-md-4 클래스를 사용합니다. 더 세밀하게 제어하려면 col-xs-1 col-md-4와 같이 다양한 화면 크기에 대해 서로 다른 숫자를 지정할 수 있습니다. 이렇게 하면 요소가 매우 작은 화면(xs)에서 1열을 차지하고 중간 화면(md)에서 4열을 차지하게 됩니다. ).

숫자가 나타내는 것

그리드 클래스의 숫자는 요소의 너비를 나타냅니다. 사용 가능한 공간에 비해 예를 들어 col-xs-1은 요소가 매우 작은 화면에서 사용 가능한 너비의 1/12을 차지한다는 것을 의미합니다. 마찬가지로 col-lg-2는 요소가 대형 화면에서 사용 가능한 너비의 2/12를 차지한다는 의미입니다.

그리드 클래스 우선순위

그리드에 유의하는 것이 중요합니다. 특정 화면 크기에 대한 클래스는 해당 크기뿐만 아니라 더 큰 화면 크기에도 적용됩니다. 예를 들어 col-xs-6 클래스는 아주 작은 화면부터 큰 화면까지 모든 화면에 적용됩니다. 그러나 더 큰 화면 크기에 대한 그리드 클래스를 지정하면 더 작은 화면 크기에 대한 그리드 클래스가 재정의됩니다.

결론

숫자의 의미 이해 col-md-4, col-xs-1 및 col-lg-2 클래스에서는 Bootstrap의 요소 레이아웃을 효과적으로 관리하는 데 중요합니다. 이러한 클래스를 활용하면 다양한 화면 크기에 원활하게 조정되는 반응형 및 적응형 웹 디자인을 만들 수 있습니다.

위 내용은 Bootstrap 그리드 표기법(col-md-4, col-xs-1, col-lg-2)의 숫자는 요소 너비와 정렬을 어떻게 정의합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!