- primary : 파란색
- secondary : 회색
- success : 초록색
- danger : 빨간색
- warning : 노란색
- info : 하늘색
- light : 밝은하얀색
- dark : 어두운색
부트스트랩 기본 색상 (버전 4 및 5 기준)
Primary (.bg-primary, .text-primary, .btn-primary)
색상: #0d6efd (파란색)
주로 기본 버튼, 강조 텍스트 등에 사용되는 대표 색상입니다.
Secondary (.bg-secondary, .text-secondary, .btn-secondary)
색상: #6c757d (회색)
부수적인 정보나 보조 스타일에 사용됩니다.
Success (.bg-success, .text-success, .btn-success)
색상: #198754 (녹색)
성공적인 작업 완료, 긍정적인 메시지 등에 사용됩니다.
Danger (.bg-danger, .text-danger, .btn-danger)
색상: #dc3545 (빨간색)
오류, 경고, 위험 요소 등을 나타내기 위해 사용됩니다.
Warning (.bg-warning, .text-warning, .btn-warning)
색상: #ffc107 (노란색)
주의나 경고 메시지를 전달할 때 사용됩니다.
Info (.bg-info, .text-info, .btn-info)
색상: #0dcaf0 (하늘색)
정보성 메시지나 주의를 주는 경우에 사용됩니다.
Light (.bg-light, .text-light, .btn-light)
색상: #f8f9fa (밝은 회색)
밝고 가벼운 배경이나 텍스트 색상에 사용됩니다.
Dark (.bg-dark, .text-dark, .btn-dark)
색상: #212529 (어두운 회색/검정)
어두운 배경, 강조 텍스트 등에 주로 사용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Colors Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-4">
<!-- Primary -->
<div class="p-3 mb-2 bg-primary text-white">Primary Background</div>
<button class="btn btn-primary mb-2">Primary Button</button>
<p class="text-primary">Primary Text</p>
<!-- Secondary -->
<div class="p-3 mb-2 bg-secondary text-white">Secondary Background</div>
<button class="btn btn-secondary mb-2">Secondary Button</button>
<p class="text-secondary">Secondary Text</p>
<!-- Success -->
<div class="p-3 mb-2 bg-success text-white">Success Background</div>
<button class="btn btn-success mb-2">Success Button</button>
<p class="text-success">Success Text</p>
<!-- Danger -->
<div class="p-3 mb-2 bg-danger text-white">Danger Background</div>
<button class="btn btn-danger mb-2">Danger Button</button>
<p class="text-danger">Danger Text</p>
<!-- Warning -->
<div class="p-3 mb-2 bg-warning text-dark">Warning Background</div>
<button class="btn btn-warning mb-2">Warning Button</button>
<p class="text-warning">Warning Text</p>
<!-- Info -->
<div class="p-3 mb-2 bg-info text-dark">Info Background</div>
<button class="btn btn-info mb-2">Info Button</button>
<p class="text-info">Info Text</p>
<!-- Light -->
<div class="p-3 mb-2 bg-light text-dark">Light Background</div>
<button class="btn btn-light mb-2">Light Button</button>
<p class="text-light bg-dark p-2">Light Text</p>
<!-- Dark -->
<div class="p-3 mb-2 bg-dark text-white">Dark Background</div>
<button class="btn btn-dark mb-2">Dark Button</button>
<p class="text-dark">Dark Text</p>
</div>
<!-- Bootstrap JS (Optional if you need any JS functionality) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Primary Text
Secondary Text
Success Text
Danger Text
Warning Text
Info Text
Light Text
Dark Text
'교육 > IT' 카테고리의 다른 글
| 카톡에서 물음표가 거꾸로 써질 때 ¿¿ 해결법 (0) | 2024.08.07 |
|---|---|
| 네이버 웨일 설치안될때 (0) | 2024.05.23 |
| 안랩 개발자도구 차단 해제방법(F12눌렀을때) (0) | 2024.04.29 |
| Springboot - ResponseEntity (0) | 2024.04.20 |
| IntelliJ에서 종종 Build가 깨지는 오류 해 (1) | 2023.11.27 |