그림 물감

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>

보조 기술에 의미 전달

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

특성

다른 선택자의 특수성으로 인해 컨텍스트 클래스를 적용할 수 없는 경우가 있습니다. 경우에 따라 충분한 해결 방법은 요소의 콘텐츠를 <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
);

유틸리티 API

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

    "color": (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (
          "white": $white,
          "body": $body-color,
          "muted": $text-muted,
          "black-50": rgba($black, .5),
          "white-50": rgba($white, .5),
          "reset": inherit,
        )
      )
    ),