>  기사  >  웹 프론트엔드  >  Bootstrap 4의 \"mb-0\" 유틸리티 클래스는 페이지 요소에 어떤 영향을 줍니까?

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

DDD
DDD원래의
2024-10-31 07:41:30986검색

How does the

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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