목차
Alert Color (얼럿 색깔) - 배경색 + 글자색 Alert Link (얼럿 링크) Alert Close (얼럿 닫기) Alert Animation (얼럿 애니효과)
※ BS4와 유사하나, "얼럿 닫기"는 약간 바뀜.
Alert Color (얼럿 색깔) - 배경색 + 글자색
<div class="alert alert-success ">
<strong>Success!</strong> 성공적・긍정적 조치 (연녹색)
</div>
<div class="alert alert-info ">
<strong>Info!</strong> 중립적 정보변경・동작 (연청록)
</div>
<div class="alert alert-warning ">
<strong>Warning!</strong> 주의 필요함 경고 (연오렌지・아이보리색)
</div>
<div class="alert alert-danger ">
<strong>Danger!</strong> 위험하거나 잠재적으로 부정적인 동작 안내 (연분홍・연보라)
</div>
<div class="alert alert-primary ">
<strong>Primary!</strong> 중요한 행위 지시 (연하늘)
</div>
<div class="alert alert-secondary ">
<strong>Secondary!</strong> 덜 중요한 행위 지시 (밝은연회색)
</div>
<div class="alert alert-dark ">
<strong>Dark!</strong> 진회색 경고.
</div>
<div class="alert alert-light ">
<strong>Light!</strong> 연회색 경고
</div>
결과보기
※ BS4와 동일
Alert Link (얼럿 링크)
※ 링크에 (.alert-link) 클래스 추가.
<div class="alert alert-success">
<strong>Success!</strong> 설명서 <a href="#" class="alert-link ">Click</a>.
</div>
결과보기
※ BS4와 동일
Alert Close (얼럿 닫기)
(예) 성공적/긍정적 조치 얼럿창에 닫기 가능 버튼 추가
<div class="alert alert-success alert-dismissible ">
<button type="button" class="btn-close" data-bs-dismiss="alert" ></button>
<strong>Success!</strong> 성공적/긍정적 조치
</div>
결과보기
cf. BS4 : <button type="button" class="close" data-dismiss="alert">×</button>
Alert Animation (얼럿 애니효과)
<div class="alert alert-success alert-dismissible fade show ">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Success!</strong> 성공적/긍정적 조치
</div>
결과보기
[참고] fade 및 show 클래스 : 서서히 사라지는 애니효과. (※ BS4와 동일)
