유틸리티 API

유틸리티 API는 유틸리티 클래스를 생성하는 Sass 기반 도구입니다.

이 페이지에서

부트스트랩 유틸리티는 유틸리티 API로 생성되며 Sass를 통해 기본 유틸리티 클래스 세트를 수정하거나 확장하는 데 사용할 수 있습니다. 유틸리티 API는 다양한 옵션이 있는 클래스 패밀리를 생성하기 위한 일련의 Sass 맵 및 함수를 기반으로 합니다. Sass 맵에 익숙하지 않다면 공식 Sass 문서 를 읽어보고 시작하십시오.

지도에는 모든 유틸리티 가 포함되어 있으며 나중에 사용자 정의 지도(있는 경우) $utilities와 병합됩니다 . $utilities유틸리티 맵에는 다음 옵션을 허용하는 유틸리티 그룹의 키 목록이 포함되어 있습니다.

옵션	유형	설명
`property`	필수의	속성의 이름으로, 문자열 또는 문자열 배열(예: 수평 패딩 또는 여백)이 될 수 있습니다.
`values`	필수의	값 목록 또는 클래스 이름이 값과 동일하지 않게 하려는 경우에는 맵입니다. `null`맵 키로 사용하면 컴파일되지 않습니다 .
`class`	선택 과목	속성과 동일하지 않게 하려는 경우 클래스 이름에 대한 변수입니다. `class`키를 제공하지 않고 `property`키가 문자열 배열인 경우 클래스 이름은 배열의 첫 번째 요소가 `property`됩니다.
`state`	선택 과목	유틸리티에 대해 생성 `:hover`하거나 같은 유사 클래스 변형 목록입니다 . `:focus`기본값이 없습니다.
`responsive`	선택 과목	반응형 클래스를 생성해야 하는지 여부를 나타내는 부울입니다. `false`기본적으로.
`rfs`	선택 과목	유체 재조정을 가능하게 하는 부울입니다. 이것이 어떻게 작동하는지 알아보려면 RFS 페이지를 살펴보십시오 . `false`기본적으로.
`print`	선택 과목	인쇄 클래스를 생성해야 하는지 여부를 나타내는 부울입니다. `false`기본적으로.
`rtl`	선택 과목	유틸리티를 RTL에 유지해야 하는지 여부를 나타내는 부울입니다. `true`기본적으로.

API 설명

모든 유틸리티 변수는 스타일시트 $utilities내의 변수에 추가됩니다 _utilities.scss. 각 유틸리티 그룹은 다음과 같습니다.

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

다음을 출력합니다.

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

사용자 정의 클래스 접두사

옵션을 사용 class하여 컴파일된 CSS에 사용된 클래스 접두사를 변경합니다.

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

산출:

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }

주

옵션을 사용하여 state의사 클래스 변형을 생성합니다. 의사 클래스의 예는 :hover및 :focus입니다. 상태 목록이 제공되면 해당 의사 클래스에 대한 클래스 이름이 생성됩니다. 예를 들어, 호버에서 불투명도를 변경하려면 추가 state: hover하면 .opacity-hover:hover컴파일된 CSS가 표시됩니다.

여러 의사 클래스가 필요하십니까? 공백으로 구분된 상태 목록을 사용하십시오 state: hover focus. .

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

산출:

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

반응형 유틸리티

부울을 추가하여 모든 중단점responsive 에서 응답 유틸리티(예: .opacity-md-25) 를 생성합니다 .

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

산출:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

유틸리티 변경

동일한 키를 사용하여 기존 유틸리티를 재정의합니다. 예를 들어 추가 응답형 오버플로 유틸리티 클래스가 필요한 경우 다음을 수행할 수 있습니다.

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

인쇄 유틸리티

print옵션을 활성화하면 미디어 쿼리 내에서만 적용되는 인쇄용 유틸리티 클래스 도 생성됩니다.@media print { ... }

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

산출:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

중요성

API에 의해 생성된 모든 유틸리티에는 !important의도한 대로 구성 요소 및 수정자 클래스를 재정의하도록 하는 것이 포함됩니다. 변수 를 사용하여 이 설정을 전역적으로 토글할 수 있습니다 $enable-important-utilities(기본값은 true).

API 사용

이제 유틸리티 API가 작동하는 방식에 익숙해졌으므로 사용자 정의 클래스를 추가하고 기본 유틸리티를 수정하는 방법을 배우십시오.

유틸리티 추가

$utilities를 사용하여 기본 맵에 새 유틸리티를 추가할 수 있습니다 map-merge. 필요한 Sass 파일과 _utilities.scss가져오기를 먼저 확인한 다음 를 사용 map-merge하여 추가 유틸리티를 추가하십시오. cursor예를 들어, 다음 은 3개의 값으로 반응형 유틸리티 를 추가하는 방법 입니다.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

유틸리티 수정

및 기능 을 사용하여 기본 $utilities맵 에서 기존 유틸리티를 수정 합니다. 아래 예에서는 유틸리티에 추가 값을 추가하고 있습니다. 이니셜 로 시작한 다음 수정할 유틸리티를 지정하십시오. 거기에서 중첩 맵을 가져와 유틸리티의 옵션과 값에 액세스하고 수정합니다.map-getmap-mergewidthmap-merge"width"map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

반응형 활성화

기본적으로 현재 응답하지 않는 기존 유틸리티 세트에 대해 응답 클래스를 활성화할 수 있습니다. 예를 들어 border클래스를 반응형으로 만들려면 다음을 수행합니다.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

이제 각 중단점에 대한 .border응답 변형이 생성됩니다 . .border-0생성된 CSS는 다음과 같습니다.

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

유틸리티 이름 바꾸기

v4 유틸리티가 없거나 다른 명명 규칙에 익숙합니까? 유틸리티 API는 class지정된 유틸리티의 결과를 재정의하는 데 사용할 수 있습니다. 예를 들어 .ms-*유틸리티 이름을 oldish 로 변경할 수 있습니다 .ml-*.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

유틸리티 제거

그룹 키를 로 설정하여 기본 유틸리티를 제거하십시오 null. 예를 들어, 모든 width유틸리티를 제거하려면 내부에 생성 $utilities map-merge하고 추가 "width": null합니다.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

RTL에서 유틸리티 제거

아랍어의 줄 바꿈과 같은 일부 엣지 케이스는 RTL 스타일 지정을 어렵게 만듭니다. 따라서 rtl옵션을 false다음 으로 설정하여 유틸리티를 RTL 출력에서 삭제할 수 있습니다.

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

산출:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

이것은 RTLCSS remove제어 지시어 덕분에 RTL에서 아무 것도 출력하지 않습니다 .