색상 및 배경

대비되는 전경색으로 배경색을 설정합니다.

이 페이지에서

개요

v5.2.0에 추가됨

색상 및 배경 도우미는 .text-*유틸리티 와 .bg-*유틸리티 의 기능 을 한 클래스에 결합합니다. Sass color-contrast()기능을 사용 color하여 특정 background-color.

머리! 현재 CSS 기본 color-contrast기능에 대한 지원이 없으므로 Sass를 통해 자체 기능을 사용합니다. 즉, CSS 변수를 통해 테마 색상을 사용자 정의하면 이러한 유틸리티에서 색상 대비 문제가 발생할 수 있습니다.

대비되는 색상의 기본

대비되는 색상의 보조

대비되는 색상으로 성공

대비되는 색상의 위험

대비되는 색상으로 경고

대비되는 색상 정보

대비되는 색상의 조명

대비되는 색상으로 어둡게

HTML

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

구성품 포함

배지.text-* 와 .bg-*같이 결합된 클래스 대신 사용합니다 .

주요한 정보

HTML

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

또는 카드 :

헤더

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

헤더

카드 제목을 기반으로 하고 카드 콘텐츠의 대부분을 구성하는 몇 가지 빠른 예제 텍스트입니다.

HTML

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>