강의 추천:

Bootstrap 5 알림

알림

Bootstrap 5는 사전 정의된 알림 메시지를 생성하는 간단한 방법을 제공합니다:

  • 알림 상자는 .alert 클래스를 사용하여 생성되며, 다음과 같은 상황 클래스 중 하나를 추가합니다:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

예제

<div class="alert alert-success">
  <strong>성공!</strong> 이 알림 상자는 성공이나 긍정적인 행동을 나타냅니다.
</div>

직접 시험해보세요

.alert-dark

알림 링크 .alert-link 알림 상자 내의 어떤 링크에도 클래스를 추가하여 '일치하는 색상 링크'를 생성할 수 있습니다:

예제

<div class="alert alert-success">
  <strong>성공!</strong> 이 메시지를 <a href="#" class="alert-link">읽어야 합니다</a>.
</div>

직접 시험해보세요

알림 닫기

알림 메시지를 닫기 위해 .alert-dismissible 알림 컨테이너에 클래스를 추가한 후 class="btn-close" 와 data-bs-dismiss="alert" 링크나 버튼 요소에 추가하면(클릭 시 알림 상자가 닫힙니다).

예제

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>성공!</strong> 이 알림 상자는 성공이나 긍정적인 행동을 나타냅니다.
</div>

직접 시험해보세요

알림 상자 애니메이션

.fade 와 .show 닫기 알림 메시지를 닫을 때 애니메이션 효과를 추가할 수 있는 클래스가 있습니다:

예제

<div class="alert alert-danger alert-dismissible fade show">

직접 시험해보세요