그림 물감

color소수의 색상 유틸리티 클래스를 통해 의미를 전달하십시오 . 호버 상태로 링크 스타일 지정에 대한 지원도 포함합니다.

이 페이지에서

그림 물감

색상 유틸리티를 사용하여 텍스트에 색상을 지정합니다. 링크에 색상을 지정하려면 및 상태 가 있는 .link-*도우미 클래스 를 사용할 수 있습니다.:hover:focus

.text-기본

.text-보조

.text-성공

.텍스트 위험

.text-경고

.텍스트 정보

.text-light

.텍스트-어두운

.text-본문

.텍스트 음소거

.text-흰색

.text-black-50

.text-white-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

지원 중단:.text-opacity-* 텍스트 유틸리티에 대한 유틸리티 및 CSS 변수 .text-black-50가 추가 .text-white-50되어 v5.1.0부터 더 이상 사용되지 않습니다. v6.0.0에서 제거됩니다.

보조 기술에 의미 전달

색상을 사용하여 의미를 추가하는 것은 시각적 표시만 제공하며 스크린 리더와 같은 보조 기술 사용자에게는 전달되지 않습니다. 색상으로 표시되는 정보가 콘텐츠 자체(예: 보이는 텍스트)에서 명확하거나 .visually-hidden클래스와 함께 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.

불투명

v5.1.0에 추가됨

v5.1.0부터 텍스트 색상 유틸리티는 CSS 변수를 사용하여 Sass로 생성됩니다. 이를 통해 컴파일 및 동적 알파 투명도 변경 없이 실시간 색상 변경이 가능합니다.

작동 방식

기본 .text-primary유틸리티를 고려하십시오.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

--bs-primary(값이 인 ) CSS 변수 의 RGB 버전을 사용 하고 알파 투명도를 위해 13, 110, 253두 번째 CSS 변수 를 첨부했습니다 ( 로컬 CSS 변수 덕분에 --bs-text-opacity기본값이 있음). 1즉 .text-primary, 지금 사용할 때마다 계산된 color값은 rgba(13, 110, 253, 1)입니다. 각 .text-*클래스 내부의 로컬 CSS 변수는 상속 문제를 방지하므로 유틸리티의 중첩 인스턴��가 자동으로 수정된 알파 투명도를 갖지 않습니다.

예시

불투명도를 변경하려면 --bs-text-opacity사용자 정의 스타일 또는 인라인 스타일을 통해 재정의하십시오.

이것은 기본 기본 텍스트입니다.

이것은 50% 불투명도 기본 텍스트입니다.

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

.text-opacity또는 다음 유틸리티 중에서 선택합니다 .

이것은 기본 기본 텍스트입니다.

75% 불투명도 기본 텍스트입니다.

이것은 50% 불투명도 기본 텍스트입니다.

25% 불투명도 기본 텍스트입니다.

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

특성

다른 선택자의 특수성으로 인해 컨텍스트 클래스를 적용할 수 없는 경우가 있습니다. 경우에 따라 충분한 해결 방법은 요소의 콘텐츠를 <div>원하는 클래스로 하나 이상의 의미론적 요소로 래핑하는 것입니다.

사스

다음 Sass 기능 외에도 색상 등에 대한 포함된 CSS 사용자 정의 속성 (일명 CSS 변수)에 대해 읽어보십시오.

변수

대부분의 color유틸리티는 일반 색상 팔레트 변수에서 재할당된 테마 색상으로 생성됩니다.

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

회색조 색상도 사용할 수 있지만 유틸리티를 생성하는 데 하위 집합만 사용됩니다.

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

지도

그런 다음 테마 색상을 Sass 맵에 넣어 유틸리티, 구성 요소 수정자 등을 생성하기 위해 반복할 수 있습니다.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

회색조 색상은 Sass 맵으로도 사용할 수 있습니다. 이 맵은 유틸리티를 생성하는 데 사용되지 않습니다.

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

RGB 색상은 별도의 Sass 맵에서 생성됩니다.

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

그리고 색상 불투명도는 유틸리티 API에서 사용하는 자체 맵을 기반으로 구축됩니다.

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

유틸리티 API

색상 유틸리티는 의 유틸리티 API에 선언되어 있습니다 scss/_utilities.scss. 유틸리티 API를 사용하는 방법을 알아보세요.

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),