2. 부트스트랩 색상 활용

부트스트랩 색상 활용

부트스트랩은 다양한 색상 명령어를 활용하여 배경색, 글자색 등을 간단하게 적용할 수 있습니다.

텍스트색상

class="text-primary"

class="text-secondary"

class="text-success"

class="text-danger"

class="text-warning"

class="text-info"

class="text-light"

class="text-dark"

class="text-muted"

class="text-white"

 

▼결과

배경색상

class="bg-primary" 등..

나머지는 위 text와 동일 반복

 

▼결과

 

배경색상과 텍스트색상 동시 활용

위 2가지 클래스를 동일 요소에 함께 사용합니다.

<p class="text-white bg-dark">TEST</p>

 

테이블 색상 활용

색상 명 앞에 table- 을 붙여서 활용합니다.

<tr class="table-primary"></tr>

<tr class="table-primary">
	<thead class="thead-light"></thead>
</tr>
<tr>
	<thead class="thead-dark"></thead>
</tr>

 

쇼핑몰 아이콘 활용

<span class="badge badge-pill badge-primary">할인</span>
<span class="badge badge-pill badge-secondary">세일</span>
<span class="badge badge-pill badge-success">인기상품</span>
<span class="badge badge-pill badge-danger">주문폭주</span>
<span class="badge badge-pill badge-warning">리뷰</span>
<span class="badge badge-pill badge-info">신상</span>
<span class="badge badge-pill badge-light">50%</span>
<span class="badge badge-pill badge-dark">품절</span>