텍스트 색상

Bootstrap 4에는 “색상을 통한 의미”를 제공하는 데 사용할 수 있는 몇 가지 상황별 클래스가 있다.

텍스트 색상의 클래스는 다음과 같다.
text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body(기본 본문 색상/종종 검은색) 및 .text-light

예제

<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>

링크에 상황별 텍스트 클래스를 사용할 수도 있으며, 그러면 더 어두운 호버 색상이 추가된다.

예제

<a href="#" class="text-muted">Muted link.</a>
<a href="#" class="text-primary">Primary link.</a>
<a href="#" class="text-success">Success link.</a>
<a href="#" class="text-info">Info link.</a>
<a href="#" class="text-warning">Warning link.</a>
<a href="#" class="text-danger">Danger link.</a>
<a href="#" class="text-secondary">Secondary link.</a>
<a href="#" class="text-dark">Dark grey link.</a>
<a href="#" class="text-body">Body/black link.</a>
<a href="#" class="text-light">Light grey link.</a>

.text-black-50 또는 .text-white-50 클래스를 사용하여 검정색 또는 흰색 텍스트에 대해 50% 불투명도를 추가할 수도 있다.

예제

<p class="text-black-50">Black text with 50% opacity on white background</p>
<p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>

배경색

배경색 클래스는 .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary및 .bg-dark, .bg-light.이다.

배경색은 텍스트 색상을 설정하지 않으므로 어떤 경우에는 .text-* 클래스와 함께 사용하고 싶을 수도 있다.

예제

<p class="bg-primary text-white">This text is important.</p>
<p class="bg-success text-white">This text indicates success.</p>
<p class="bg-info text-white">This text represents some information.</p>
<p class="bg-warning text-white">This text represents a warning.</p>
<p class="bg-danger text-white">This text represents danger.</p>
<p class="bg-secondary text-white">Secondary background color.</p>
<p class="bg-dark text-white">Dark grey background color.</p>
<p class="bg-light text-dark">Light grey background color.</p>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기