GitHub에서 보기

색상

// Colors

색상 유틸리티 클래스를 사용하여 color (색상)을 통해 의미를 전달합니다. 호버 상태의 링크 스타일링에 대한 지원도 포함합니다.

색상

색상 유틸리티를 사용하여 텍스트를 색상화 합니다. 링크에 색을 입히려면 : hover 및 : focus 상태가 있는 .link-* helper classes를 사용할 수 있습니다.

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

html

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

예제

불투명도를 변경하려면 맞춤 스타일 또는 인라인 스타일을 통해 --bs-text-opacity를 재정의하세요.

This is default primary text

This is 50% opacity primary text

html

<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 유틸리티 중 하나를 선택할 수 있습니다:

This is default primary text

This is 75% opacity primary text

This is 50% opacity primary text

This is 25% opacity primary text

html

<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

다음 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

색상 유틸리티는scss / _utilities.scss의 유틸리티 API에 선언되어 있습니다. 유틸리티 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
      )
    ),