Bootstrap 4의 \"mb-0\" 유틸리티 클래스는 페이지 요소에 어떤 영향을 줍니까?

Bootstrap 4의 class="mb-0" 유틸리티 클래스의 목적 이해

Bootstrap 4는 개발자에게 다양한 기능을 제공합니다. xs, sm, md, lg 및 xl을 포함한 다양한 중단점에서 페이지 응답성과 적응성을 향상시키도록 설계된 여백 및 패딩 유틸리티 클래스입니다. 이러한 다용도 클래스는 일관된 명명 규칙을 따릅니다.

{property}{sides}-{size}

클래스 요소 해독

• m: 여백을 나타냅니다. 설정
• b: 아래쪽 여백 지정
• 0: 여백-하단 값을 0으로 설정

구현 예

다음 HTML 코드를 고려하세요.

<code class="html"><p class="mb-0">Lorem ipsum</p></code>

이 예에서는 "mb-0" 유틸리티 클래스가 단락 요소에 적용되어 결과적으로 특정 요소에 대한 기본 아래쪽 여백을 제거합니다.

추가 유틸리티 클래스 옵션

Bootstrap 4는 다른 여백 및 패딩 속성에 대한 유틸리티 클래스도 제공합니다.

• t: 여백/패딩 상단
• l: 여백/왼쪽 패딩
• r: 여백/패딩-오른쪽
• x: 여백/패딩-왼쪽 및 -오른쪽
• y: 여백/패딩-상단 및 -bottom

크기 옵션:

유틸리티 클래스는 크기 옵션으로 추가로 사용자 정의할 수 있어 개발자가 간격을 정확하게 제어할 수 있습니다.

• 0: 여백/패딩 없음
• 1: 여백/패딩 0.25rem(기본 글꼴 크기는 4px)
• 2: 여백/패딩 0.5rem(8px)
• 3: 여백/패딩 1rem(16px)
• 4: 1.5rem의 여백/패딩(24px)
• 5: 3rem의 여백/패딩(48px)
• auto: 여백을 자동으로

자세한 내용은 간격에 대한 공식 Bootstrap 4 문서와 w3schools 튜토리얼을 참조하세요.

위 내용은 Bootstrap 4의 \"mb-0\" 유틸리티 클래스는 페이지 요소에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!