Alert 클래스
- .alert : 경고상자 생성.
- .alert-danger : 빨간색 경고. 위험하거나 잠재적으로 부정적인 행동.
- .alert-info : 연한 파란색 경고. 중립적 인 정보 변경 또는 조치.
- .alert-link : 일치하는 컬러 링크를 제공하기 위해 경고 내의 링크에 사용.
- .alert-success : 녹색 경고. 성공 또는 긍정적 행동.
- .alert-warning : 노란색 경고. 주의 요함 의미.
- .alert-dismissible : 닫기 가능한 경고상자. .close 클래스와 함께 사용 (추가 패딩 추가).
- .close : 경고상자 닫기버튼 스타일 지정. (지정된 글꼴 크기, 색상 등으로 오른쪽으로 배치).
- .fade : 서서히 닫히는 효과. .in 클래스와 함께 사용.
- .in : 서서히 닫히는 효과. .fade 클래스와 함께 사용.
Alert 구문
<div class="alert" role="alert"> 성공・긍정</div>
Alert 배경색
<div class="alert alert-success" role="alert"> 성공・긍정</div>
<div class="alert alert-info" role="alert"> 중립적</div>
<div class="alert alert-warning" role="alert">주의・경고</div>
<div class="alert alert-danger" role="alert">위험・잠재적 부정</div>
Alert 링크
.alert-link 클래스 : 배경색과 어울리는 링크색 자동 추가.
<div class="alert alert-success">
<strong>홈짱닷컴</strong> <a href="#" class="alert-link">Homzzang.com</a>
</div>
Alert 닫기 1 : data-dismiss="alert" 이용
<div class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>홈짱닷컴</strong> Homzzang.com
</div>
※ class="close" data-dismiss="alert" 속성은 <button> 태그에 추가해도 됨.
※ aria-label = "close" 속성 : 스크린리더 사용하는 사람들의 접근성 향상 위해 추가.
※ × : 닫기 버튼에 대해 선호되는 아이콘 HTML 실체값 (문자 "x" 아님)
Alert 닫기애니효과 (= 서서히닫기 효과)
.fade 클래스와 .in 클래스 추가.
<div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>홈짱닷컴</strong> Homzzang.com
</div>
[참고] component-animations.less
.fade {
opacity: 0;
.transition(opacity .15s linear);
&.in {
opacity: 1;
}
}
Alert 닫기 2 - jquery 이용
<div class="alert alert-success alert-dismissible" id="hz">
<a href="#" class="close">×</a>
<strong>홈짱닷컴</strong> Homzzang.com
</div>
<script>
$(document).ready(function(){
$(".close").click(function(){
$("#hz").alert("close");
});
});
</script>
Alert Option (옵션)
none
Alert Method (메서드)
alert ("close")
경고 닫기 (예제: 위 jquery 이용 닫기)
Alert Event (이벤트)
close.bs.alert
경고 메시지를 닫을 때 발생.
closed.bs.alert
경고 메시지가 닫히면 발생.
close.bs.alert 예제
<div class="container">
<div class="alert alert-danger alert-dismissible" id="hz">
<a href="#" class="close">×</a>
<strong>홈짱닷컴</strong> Homzzang.com
</div>
</div>
<script>
$(document).ready(function(){
$(".close").click(function(){
$("#hz").alert("close");
});
$("#hz").on('close.bs.alert', function(){
alert('경고창 닫힐 때 뜨는 경고메세지는 여기에 기재');
});
});
</script>
※ close.bs.alert 이벤트 자리에 closed.bs.alert 이벤트 넣어 테스트 !! (효과 거의 비슷)
