col-md-4, col-xs-1 및 col-lg-2와 같은 Bootstrap 그리드 클래스의 숫자는 요소 너비와 응답성을 어떻게 결정합니까?

부트스트랩 그리드 클래스의 숫자 이해: col-md-4, col-xs-1, col-lg-2

The 부트스트랩 프레임워크는 반응형 레이아웃 생성을 용이하게 하는 강력한 그리드 시스템을 도입합니다. 이 시스템에 필수적인 것은 col-* 형식의 클래스입니다. 여기서 별표는 숫자를 나타냅니다. 이러한 숫자는 그리드 내의 요소가 정렬되는 방식과 다양한 화면 크기에 반응하는 방식을 결정하는 데 중요한 역할을 합니다.

숫자는 그리드를 어떻게 정렬합니까?

col-* 클래스의 숫자는 관련 요소가 차지해야 하는 사용 가능한 너비 부분을 나타냅니다. 그리드 행의 전체 너비는 12개 열로 나뉘며 클래스의 숫자는 요소가 확장되는 열 수를 나타냅니다.

예를 들어 col-4는 요소가 4개 열에 걸쳐 있음을 의미합니다. 또는 사용 가능한 너비의 1/3입니다. col-12는 전체 너비에 걸쳐 12개 열을 모두 차지합니다.

숫자 사용 방법

이러한 클래스를 사용하려면 클래스 내의 요소에 할당하기만 하면 됩니다. 그리드 행. 예를 들어, 행 내에 너비가 같은 열 2개를 만들려면 다음을 사용합니다.

<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>

너비가 다른 열 3개를 만들려면 다음을 사용할 수 있습니다.

<div class="col-2">Column 1</div>
<div class="col-6">Column 2</div>
<div class="col-4">Column 3</div>

숫자는 무엇을 나타냅니까?

숫자 자체 외에도 숫자에 적용된 접두사를 기록해 두는 것이 중요합니다. Bootstrap에서 이러한 접두사는 다양한 화면 크기를 나타냅니다.

• xs: 매우 작음(모바일 장치)
• sm: 작음(태블릿)
• md: 중간(데스크톱) )
• lg: 대형(더 큰 데스크탑)

여러 col-* 클래스를 요소에 할당하여 각 화면 크기에서 요소가 작동하는 방식을 제어할 수 있습니다. 예를 들어 col-6 col-sm-4는 요소가 모바일 화면 너비의 절반, 태블릿과 데스크톱 너비의 1/3에 걸쳐 있음을 의미합니다.

결론

부트스트랩 그리드 클래스의 숫자와 접두사를 이해하는 것은 반응형 및 적응형 웹 레이아웃을 만드는 데 필수적입니다. col-* 클래스를 효과적으로 활용함으로써 개발자는 자신의 디자인이 다양한 화면 크기에 원활하게 반응하여 모든 기기에서 일관된 사용자 경험을 제공할 수 있습니다.

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