[basic] BS5 - Alert (BS경고 = BS얼럿 = BS경보)

1. Alert Color (얼럿 색깔) - 배경색 + 글자색
2. Alert Link (얼럿 링크)
3. Alert Close (얼럿 닫기)
4. 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">&times;</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와 동일)