Irodori彩り

Bootstrap

29개의 공식 시맨틱 토큰

총 29가지 색상

개요 Bootstrap

Bootstrap은 $primary, $secondary, $success 같은 의미 테마 색상을 중심으로 색 체계를 구성하며, _variables.scss에 gray-100부터 gray-900까지의 그레이스케일을 정의합니다.

사용 방법

SCSS 변수를 덮어쓰거나 $custom-colors를 확장해 새 유틸리티를 만드세요. 마크업에서는 .bg-*, .text-*, .border-* 헬퍼 클래스로 적용합니다.

공식 문서

Primary

$primary · --bs-primary

Buttons, links, active states

Secondary

$secondary · --bs-secondary

Secondary buttons and muted UI

Success

$success · --bs-success

Positive actions and alerts

Danger

$danger · --bs-danger

Destructive actions and errors

Warning

$warning · --bs-warning

Warning alerts and badges

Info

$info · --bs-info

Informational alerts

Light

$light · --bs-light

Light gray component background

Dark

$dark · --bs-dark

Dark component background

Blue

$blue

Base theme color, aliased by $blue

Indigo

$indigo

Base theme color, aliased by $indigo

Purple

$purple

Base theme color, aliased by $purple

Pink

$pink

Base theme color, aliased by $pink

Red

$red

Base theme color, aliased by $red

Orange

$orange

Base theme color, aliased by $orange

Yellow

$yellow

Base theme color, aliased by $yellow

Green

$green

Base theme color, aliased by $green

Teal

$teal

Base theme color, aliased by $teal

Cyan

$cyan

Base theme color, aliased by $cyan

Gray 100

$gray-100

Light gray for surfaces

Gray 200

$gray-200

Light gray for surfaces

Gray 300

$gray-300

Light gray for surfaces

Gray 400

$gray-400

Mid gray for borders and muted text

Gray 500

$gray-500

Mid gray for borders and muted text

Gray 600

$gray-600

Mid gray for borders and muted text

Gray 700

$gray-700

Dark gray for text

Gray 800

$gray-800

Dark gray for text

Gray 900

$gray-900

Dark gray for text

Body background

$body-bg

Default page background

Body text

$body-color

Default text color

출처: Bootstrap v5.3.8 · _variables.scss