주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
in English

색깔

부트스트랩은 우리의 스타일과 구성 요소를 테마로 하는 광범위한 색상 시스템에서 지원됩니다. 이를 통해 모든 프로젝트에 대해 보다 포괄적인 사용자 지정 및 확장이 가능합니다.

테마 색상

모든 색상의 하위 집합을 사용하여 색 구성표를 생성하기 위한 더 작은 색상 팔레트를 생성합니다. 또한 부트스트랩 scss/_variables.scss파일에서 Sass 변수 및 Sass 맵으로도 사용할 수 있습니다.

주요한
중고등 학년
성공
위험
경고
정보
어두운

이 모든 색상은 Sass 맵으로 사용할 수 있습니다 $theme-colors.

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

이러한 색상을 수정하는 방법은 Sass 맵 및 루프 문서 를 확인하세요 .

모든 색상

모든 부트스트랩 색상은 파일의 Sass 변수 및 Sass 맵으로 사용할 수 있습니다 scss/_variables.scss. 파일 크기 증가를 방지하기 위해 이러한 각 변수에 대해 텍스트 또는 배경 색상 클래스를 생성하지 않습니다. 대신 테마 팔레트 에 대해 이러한 색상의 하위 집합을 선택합니다 .

색상을 사용자 정의할 때 명암비를 모니터링해야 합니다. 아래와 같이 기본 색상 각각에 세 가지 대비 비율을 추가했습니다. 하나는 견본의 현재 색상, 하나는 흰색, 다른 하나는 검정색입니다.

$블루#0d6efd
$블루-100
$블루-200
$블루-300
$블루-400
$블루-500
$블루-600
$블루-700
$블루-800
$블루-900
$인디고#6610f2
$인디고-100
$인디고-200
$인디고-300
$인디고-400
$indigo-500
$인디고-600
$인디고-700
$인디고-800
$인디고-900
$보라색#6f42c1
$보라색-100
$보라색-200
$보라색-300
$ 보라색-400
$보라색-500
$ 보라색-600
$ 보라색-700
$ 보라색-800
$ 보라색-900
$핑크#d63384
$핑크-100
$핑크-200
$핑크-300
$핑크-400
$핑크-500
$핑크-600
$핑크-700
$핑크-800
$핑크-900
$빨간색#dc3545
$레드-100
$레드-200
$레드-300
$red-400
$레드-500
$레드-600
$레드-700
$레드-800
$레드-900
$오렌지#fd7e14
$오렌지-100
$오렌지-200
$오렌지-300
$오렌지-400
$오렌지-500
$오렌지-600
$ 오렌지-700
$ 오렌지-800
$ 오렌지-900
$옐로우#ffc107
$yellow-100
$yellow-200
$yellow-300
$yellow-400
$yellow-500
$yellow-600
$yellow-700
$yellow-800
$yellow-900
$그린#198754
$그린-100
$그린-200
$그린-300
$그린-400
$그린-500
$그린-600
$그린-700
$그린-800
$그린-900
청록#20c997
$틸-100
$틸-200
$틸-300
$teal-400
$teal-500
$틸-600
$teal-700
$틸-800
$틸-900
$시안#0dcaf0
$cyan-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$회색-500#adb5bd
$회색-100
$회색-200
$회색-300
$회색-400
$회색-500
$회색-600
$회색-700
$회색-800
$회색-900
$블랙#000
$흰색#ffff

Sass에 대한 참고 사항

Sass는 프로그래밍 방식으로 변수를 생성할 수 없으므로 모든 색조 및 음영에 대한 변수를 직접 생성했습니다. 중간점 값(예: $blue-500)을 지정하고 사용자 정의 색상 기능을 사용하여 Sass의 색상 기능을 통해 색상을 색조(밝게) 또는 음영(어둡게) mix()합니다.

를 사용 하는 것은 and와 mix()같지 않습니다. 전자는 지정된 색상을 흰색 또는 검정색과 혼합하고 후자는 각 색상의 밝기 값만 조정합니다. 결과는 이 CodePen 데모에서 볼 수 있듯이 훨씬 더 완전한 색상 모음입니다 .lighten()darken()

우리의 tint-color()shade-color()함수는 우리가 생산하는 각 혼합 색상에 대해 단계별 백분율 값을 지정하는 변수 mix()와 함께 사용합니다. 전체 소스 코드 는 및 파일을 $theme-color-interval참조하십시오 .scss/_functions.scssscss/_variables.scss

컬러 사스 맵

Bootstrap의 소스 Sass 파일에는 색상 목록과 해당 16진수 값을 빠르고 쉽게 반복할 수 있는 세 가지 맵이 포함되어 있습니다.

  • $colors500사용 가능한 모든 기본( ) 색상 을 나열합니다 .
  • $theme-colors의미상 명명된 모든 테마 색상을 나열합니다(아래 참조).
  • $grays회색의 모든 색조와 음영을 나열합니다.

에서 scss/_variables.scssBootstrap의 색상 변수와 Sass 맵을 찾을 수 있습니다. 다음은 $colorsSass 맵의 예입니다.

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

맵 내에서 값을 추가, 제거 또는 수정하여 다른 많은 구성요소에서 값이 사용되는 방식을 업데이트합니다. 불행히도 현재로서는 모든 구성 요소가 이 Sass 맵을 사용하는 것은 아닙니다. 향후 업데이트에서는 이를 개선하기 위해 노력할 것입니다. 그때까지 ${color}변수와 이 Sass 맵을 사용할 계획입니다.

예시

Sass에서 이것을 사용하는 방법은 다음과 같습니다.

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

색상 값을 설정 하고 사용하는 데 색상 및 배경 유틸리티 클래스도 사용할 수 있습니다 .colorbackground-color500