그림 물감

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

특이성 다루기

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

보조 기술에 의미 전달

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

색깔

.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">.text-warning</p>
<p class="text-info">.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-white.text-muted

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

배경색

상황별 텍스트 색상 클래스와 유사하게 요소의 배경을 모든 상황별 클래스로 쉽게 설정할 수 있습니다. 앵커 구성 요소는 텍스트 클래스와 마찬가지로 마우스를 가져가면 어두워집니다. 백그라운드 유틸리티 는 설정되지 않으므로color 경우에 따라 유틸리티를 사용해야 .text-*합니다.

.bg-기본

.bg-보조

.bg-성공

.bg-위험

.bg-경고

.bg-정보

.bg-light

.bg-어두운

.bg-흰색

.bg-투명

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

배경 그라데이션

가 (기본값은 ) $enable-gradients로 설정 되면 유틸리티 클래스 를 사용할 수 있습니다 . 이러한 클래스 등을 활성화하는 Sass 옵션에 대해 알아보세요 .truefalse.bg-gradient-

.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark