• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

목차
  1. Alert Color (얼럿 색깔) - 배경색 + 글자색
  2. Alert Link (얼럿 링크)
  3. Alert Close (얼럿 닫기)
  4. Alert Animation (얼럿 애니효과)
  5. [JS] Alert CSS Class 종류 (ABC순) ★
  6. [JS] data- * 속성으로 Alert 닫기
  7. [JS] JS로 Alert 닫기
  8. [JS] Alert Option (얼럿 옵션)
  9. [JS] Alert Method (얼럿 메서드)
  10. [JS] Alert Event (얼럿 이벤트)

 

Alert Color (얼럿 색깔) - 배경색 + 글자색

 

<div class="alert alert-success">

  <strong>Success!</strong> 성공적・긍정적 조치 (연녹색)

</div>

<div class="alert alert-info">

  <strong>Info!</strong> 중립적 정보변경・동작 (연청록)

</div>

<div class="alert alert-warning">

  <strong>Warning!</strong> 주의 필요함 경고 (연오렌지・아이보리색)

</div>

<div class="alert alert-danger">

  <strong>Danger!</strong> 위험하거나 잠재적으로 부정적인 동작 안내 (연분홍・연보라)

</div>

<div class="alert alert-primary">

  <strong>Primary!</strong> 중요한 행위 지시 (연하늘)

</div>

<div class="alert alert-secondary">

  <strong>Secondary!</strong> 덜 중요한 행위 지시 (밝은연회색)

</div>

<div class="alert alert-dark">

  <strong>Dark!</strong> 진회색 경고.

</div>

<div class="alert alert-light">

  <strong>Light!</strong> 연회색 경고

</div>

 

결과보기

 

Alert Link (얼럿 링크)

※ 링크에 (.alert-link) 클래스 추가.

 

<div class="alert alert-success">

    <strong>Success!</strong> 설명서 <a href="#" class="alert-link">Click</a>.

</div>

 

결과보기


Alert Close (얼럿 닫기)

 

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

    <button type="button" class="close" data-dismiss="alert">&times;</button>

    <strong>Success!</strong>

</div>

 

결과보기

PS1. 링크형태도 가능. (예) <a href="#" class="close" data-dismiss="alert">&times;</a>

PS2. &times; 의미: 닫기 버튼 아이콘으로 사용되는 X 모양 HTML실체값코드.

 

Alert Animation (얼럿 애니효과)

 

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

    <button type="button" class="close" data-dismiss="alert">&times;</button>

    <strong>Success!</strong>

</div>

 

결과보기

[참고] fade 및 show 클래스 : 서서히 사라지는 애니효과. (별 차이 없음. ㅡㅡ;)

 

 

[JS] Alert

 

[JS] Alert CSS Class 종류 (ABC순) ★

 

.alert

경고창.

 

.alert-danger

연분홍 경고창. (※ 위험하거나 잠재적으로 부정적인 행동 의미)

 

.alert-dark

진회색 경고상자

 

.alert-dismissible

닫을 수 있는 경고창.
※ (.close) 클래스와 함께 이 클래스는 경고 닫는 데 사용. 

※ 추가적인 패딩 추가.

 

.alert-heading

지정요소에 color:inherit 추가.

 

.alert-info

연파랑 경고창. (중립적인 정보 변경 또는 조치 의미)

 

.alert-light

연회색 경고창

 

.alert-link

경고창 안의 링크에 대해서, 경고창 배경색과 어울리는 링크색 제공.

 

.alert-primary

연파랑 경고창. (중요 의미)

 

.alert-secondary

연회색 경고창. ("덜" 중요 의미)

 

.alert-success

연녹색 경고창. (성공・긍정 의미)

 

.alert-warning

연노랑 경고창. (주의・조심 의미)

 

.close

경고상자 닫기 버튼 스타일 지정.
※ 지정된 "글꼴 크기, 색상" 등으로 오른쪽에 배치.

 

 

[JS] data- * 속성으로 Alert 닫기

 

<div class="container">

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

    <button type="button" class="close" data-dismiss="alert">&times;</button>

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

  </div>

</div>

 

※ button태그 대신 a태그 사용 가능: <a href="#" class="close" data-dismiss="alert">&times;</a>

 

[JS] JS로 Alert 닫기

 

<div class="alert alert-success alert-dismissible" id="hz">

    <button type="button" class="close">&times;</button>

    <strong>Success!</strong>

</div>

 

<script>

$(document).ready(function(){

  $(".close").click(function(){

    $("#hz").alert("close");

  });

});

</script>

 

결과보기

 

[JS] Alert Option (얼럿 옵션)

 

none

 

 

[JS] Alert Method (얼럿 메서드)

 

.alert("close")

경로 메세지 닫기. (예) $("#hz").alert("close");

 

.alert("dispose")

요소의 Alert 파괴.  (참고: 테스트해보니 정상작동 X)

 

 

[JS] Alert Event (얼럿 이벤트)

 

close.bs.alert

경고 메시지를 닫을 때 발생.

 

closed.bs.alert

경고 메시지가 닫히면 발생. (CSS 전환이 완료 될 때까지 기다림.)

 


[예제]

 

<div class="container">

  <div class="alert alert-success alert-dismissible" id="hz">

    <button type="button" class="close">&times;</button>

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

  </div>

</div>


<script>

$(document).ready(function(){

  $(".close").click(function(){

    $("#hz").alert("close");

  });

  $("#hz").on('closed.bs.alert', function(){

    alert('Homzzang.com 자주 찾아주세요.');

  });

});

</script>

 

결과보기 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS4 - HOME (BS소개)
basic BS4 - Start (BS시작) - BS4다운 / BS4CDN / BS4구문
basic BS4 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS4 - Grid (BS그리드)
basic BS4 - Text/Typography (BS글자 = BS텍스트)
basic BS4 - Color (BS색깔 = BS색상) - BS글자색 + BS배경색
basic BS4 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS4 - Image (BS이미지) - 이미지모양 + 이미지정렬 + 반응형이미지
basic BS4 - Jumbotron (BS점보트론) - 박스형 vs 와이드형
basic BS4 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS4 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS4 - Button Group (BS버튼그룹)
basic BS4 - Badge (BS배지)
basic BS4 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS4 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS4 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS4 - List Group (BS리스트그룹)
basic BS4 - Card (BS카드) - Well (BS웰) + Panel (BS패널) + Thumbnail (B…
basic BS4 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS4 - Collapse (BS접기 = BS컬랩스 = BS토글)
basic BS4 - Nav (네브) - 간단메뉴 + 일반탭 + 알약탭
basic BS4 - Navbar (메뉴바) - 네비게이션 메뉴바 (= 네브바 = 네비바) ※ BS4분기점
basic BS4 - Form (BS폼양식)
basic BS4 - Input (BS입력 = BS인풋)
basic BS4 - Input Group (BS입력그룹 = BS인풋그룹)
basic BS4 - Custom Form (BS커스텀폼)
basic BS4 - Carousel (BS캐러셀)
basic BS4 - Modal (BS모달)
basic BS4 - Tooltip (BS툴팁 = BS말풍선 허버형)
basic BS4 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS4 - Toast (BS토스트) - 순간말풍선 (= 팝업상자 = 짧은경고창 = 스낵바)
basic BS4 - Scrollspy (BS스크롤스파이) - 원페이지메뉴링크 (= 내부링크)
basic BS4 - Utilities (BS유틸클래스 + BS4추가클래스) ★★★★★
basic BS4 - Flex (BS플렉스박스) ★★★★★
basic BS4 - Icon (BS아이콘)
basic BS4 - Media Object (BS미디어객체) - 썸네일형, 요약형
basic BS4 - Filter (필터링) ★ - 테이블필터링 + 리스트필터링 + 드롭다운필터링 + div안 텍스트필…
grid BS4 - Grid (BS그리드) - 반응형 레이아웃 ★★★
grid BS4 - Grid Stacked-to-horizontal (BS그리드 수직정렬 → 수평정렬)
grid BS4 - Grid Extra Small (BS그리드 초소형기기) - .col-숫자, .col 클래스
grid BS4 - Grid Small (BS그리드 소형기기) - .col-sm-숫자, .col-sm 클래스
grid BS4 - Grid Medium (BS그리드 중형기기) - .col-md-숫자, .col-md 클래스
grid BS4 - Grid Large (BS그리드 대형기기) - .col-lg-숫자, .col-lg 클래스
grid BS4 - Grid Extra Large (BS그리드 초대형기기) - .col-xl-숫자, .col-xl 클…
grid BS4 - Grid Example (BS그리드 예제) ★
theme BS4 - Template (BS템플릿)
BS_bookmark BS4 - BS메가메뉴
BS_bookmark BS4 - Masonry (메이슨리) 갤러리
목록
찾아주셔서 감사합니다. Since 2012