• Q&A
  • 회원가입
  • 로그인

[basic] BS3 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니효과

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">&times;</a>

    <strong>홈짱닷컴</strong> Homzzang.com

</div>

 

※ class="close" data-dismiss="alert" 속성은 <button> 태그에 추가해도 됨.

※ aria-label = "close" 속성 : 스크린리더 사용하는 사람들의 접근성 향상 위해 추가.

※ &times;  :  닫기 버튼에 대해 선호되는 아이콘 HTML 실체값 (문자 "x" 아님)

 

 

Alert 닫기애니효과 (= 서서히닫기 효과)

 

.fade 클래스와 .in 클래스 추가.

 


 

<div class="alert alert-success alert-dismissible fade in">

    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</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">&times;</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">&times;</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 이벤트 넣어 테스트 !! (효과 거의 비슷)

 

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012