Bootstrap 간격 유틸리티 클래스를 사용하여 레이아웃의 여백과 패딩을 제어하려면 어떻게 해야 합니까?

Bootstrap 간격 유틸리티 클래스 이해

Bootstrap은 요소의 여백과 안쪽 여백을 제어하기 위한 포괄적인 간격 유틸리티 클래스를 제공합니다. 이러한 클래스는 레이아웃에서 공백을 조정하는 프로세스를 단순화합니다.

구문

간격 유틸리티 클래스의 구문은 다양한 Bootstrap 버전에서 발전했습니다.

부트스트랩 4

여백: m{sides}-{size}
Padding: p{sides}-{size}

부트스트랩 5

여백: m{sides}-{size}(use me-, ms-, pe -, ps-)
패딩: p{sides}-{size}

예

부트스트랩 4:

<div class="m-b-lg">...</div> <!-- margin-bottom-large -->
<div class="p-t-3">...</div> <!-- padding-top-3 -->

부트스트랩 5:

<div class="me-3">...</div> <!-- margin-end-3 -->
<div class="ps-1">...</div> <!-- padding-start-1 -->

반응형 간격

부트스트랩 4에서는 중단점에 응답하는 반응형 간격 유틸리티 클래스를 구현합니다. 구문은 다음과 같습니다.

m{sides}-{breakpoint}-{size}
p{sides}-{breakpoint}-{size}

예:

<div class="mt-md-2">...</div> <!-- margin-top-2 on medium screens or larger -->

React에서의 사용

간격 유틸리티 클래스를 사용하려면 React에서는 요소에 className 속성을 설정할 수 있습니다. 예:

<code class="javascript">import React, { Component } from 'react';

class Example extends Component {
  render() {
    return (
      <div className="m-b-lg">
        {/* Your content */}
      </div>
    );
  }
}

export default Example;</code>

참고:

Bootstrap 4에서는 간격 유틸리티 클래스 지원을 활성화하려면 플러그인을 설치해야 할 수도 있습니다. 자세한 내용은 Bootstrap 문서를 참조하세요.

위 내용은 Bootstrap 간격 유틸리티 클래스를 사용하여 레이아웃의 여백과 패딩을 제어하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!