여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap - Bootstrap 4 색상
Bootstrap – Bootstrap 4 색상
1년전 작성
1년전 수정



텍스트 색상

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
밍구
밍구
공부 목적 블로그