목차

Bootstrap Alerts

  • description : Bootstrap Alerts
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-25


Alerts

Bootstrap은 미리 정의 된 경고 메시지를 생성하는 쉬운 방법을 제공합니다:

출처: W3Schools.com - Bootstrap Alerts

Alerts는 .alert 클래스, 그리고 그 뒤에 4 개의 컨텍스추얼 클래스인 .alert-success, .alert-info, .alert-warning 또는 .alert-danger 중 하나를 사용하여 생성합니다.

예제

Alerts

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.


Alert 박스 내부의 모든 링크에 alert-link 클래스를 추가하여 “일치하는 컬러의 링크”를 만듭니다.

예제

Alerts

Add the alert-link class to any links inside the alert box to create "matching colored links".

Success! you should read this message.
Info! you should read this message.
Warning! you should read this message.
Danger! you should read this message.


Closing Alerts

Alert 메시지를 닫으려면, alert 컨테이너에 .alert-dismissible 클래스를 추가합니다.
그런 다음 링크 또는 버튼 요소에 class="close" 및 data-dismiss="alert"를 추가합니다.(이것을 클릭하면 경고 상자가 사라집니다)

예제

Alerts

The a element with class="close" and data-dismiss="alert" is used to close the alert box.

The alert-dismissible class adds some extra padding to the close button.

× Success! This alert box could indicate a successful or positive action.
× Info! This alert box could indicate a successful or positive action.
× Warning! This alert box could indicate a successful or positive action.
× Danger! This alert box could indicate a successful or positive action.


aria-* 속성과 × 설명
스크린 리더를 사용하는 사람들의 접근성을 높이려면, 닫기 버튼을 만들 때 aria-label = "close" 속성을 포함해야 합니다.

× (×)는 문자 “x”가 아닌 닫기 버튼의 기본 아이콘인 HTML 엔티티(entity)입니다.
모든 HTML Entities 목록을 보려면 HTML Entities Reference를 방문하십시오.

Animated Alerts

.fade 및 .in 클래스는 Alert 메시지를 닫을 때 페이딩 효과를 추가합니다.

예제

Animated Alerts

The .fade and .in classes adds a fading effect when closing the alert message.

× Success! This alert box could indicate a successful or positive action.
× Info! This alert box could indicate a successful or positive action.
× Warning! This alert box could indicate a successful or positive action.
× Danger! This alert box could indicate a successful or positive action.
, ,