부트스트랩 4 경고
Bootstrap 4는 사전 정의된 경고 메시지를 생성하는 쉬운 방법을 제공한다.
성공! 이 경고 상자는 성공 또는 긍정적인 작업을 나타냅니다.
정보! 이 경고 상자는 중립적인 정보 변경 또는 조치를 나타냅니다.
경고! 이 경고 상자는 주의가 필요할 수 있는 경고를 나타냅니다.
위험! 이 경고 상자는 위험하거나 잠재적으로 부정적인 조치를 나타냅니다.
기본적인! 이 경고 상자는 중요한 작업을 나타냅니다.
이차적인! 이 경고 상자는 덜 중요한 작업을 나타냅니다.
어두운! 진한 회색 경고 상자.
밝은! 밝은 회색 경고 상자.
경고는 .alert 클래스로 생성되고그 뒤에 상황별 클래스 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 또는 .alert-dark 중 하나가 생성된다.
예제
<div class="alert alert-success"> <strong>Success!</strong> Indicates a successful or positive action. </div>
기본 예시
예제 보기경고 링크
“일치하는 색상의 링크”를 생성하려면 경고 상자 내부의 링크에 .alert-link 클래스를 추가하자.
성공! 당신은 이 메시지를 읽어야 합니다 .
정보! 당신은 이 메시지를 읽어야 합니다 .
경고! 당신은 이 메시지를 읽어야 합니다 .
위험! 당신은 이 메시지를 읽어야 합니다 .
기본적인! 당신은 이 메시지를 읽어야 합니다 .
이차적인! 당신은 이 메시지를 읽어야 합니다 .
어두운! 당신은 이 메시지를 읽어야 합니다 .
밝은! 당신은 이 메시지를 읽어야 합니다 .
예제
<div class="alert alert-success"> <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>. </div>
기본 예시
Success! You should read this message.
마감 알림
×나를 닫으려면 오른쪽에 있는 “x” 기호를 클릭하세요.
경고 메시지를 닫으려면 경고 컨테이너에 .alert-dismissible 클래스를 추가하자.
그런 다음 링크 또는 버튼 요소에 class=”close” 및 data-dismiss=”alert” 를 추가한다.
이를 클릭하면 경고 상자가 사라진다.
예제
<div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Success!</strong> Indicates a successful or positive action. </div>
기본 예시
Success! Indicates a successful or positive action.
애니메이션 알림
×나를 닫으려면 오른쪽에 있는 “x” 기호를 클릭하세요. 나는 “페이드 아웃”할 것이다.
.fade 및 .show 클래스는 경고 메시지를 닫을 때 페이딩 효과를 추가한다.
예제
<div class="alert alert-danger alert-dismissible fade show">
기본 예시
예제 보기참고
W3C School - Bootstrap – Bootstrap 4 Alerts
공부 목적 블로그