테스트 사이트 - 개발 중인 베타 버전입니다

애니메이션 경고

· 8년 전 · 1762
스크린샷 2017-09-29 오후 11.34.56.png
애니메이션 경고

× 나를 닫으려면 오른쪽에있는 "x"기호를 클릭하십시오. 나는 "퇴색"할 것이다.
.fade및 .in경고 메시지를 닫을 때 클래스는 페이딩 효과를 추가합니다 :


<div class="alert alert-danger fade in">

[전체소스]

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Animated Alerts</h2>
<p>The .fade and .in classes adds a fading effect when closing the alert message.</p>
<div class="alert alert-success alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div>

</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
1386
1385
AngularJS 주형
1384
AngularJS 컨트롤러
1383
1382
1381
1380
1379
1378
1377
1376
1375
1374
1373
1372
1371
1370
AngularJS AngularJS API
1369
AngularJS 검증 예제
1368
1367
AngularJS CSS 클래스
1366
1365
AngularJS 이메일
1364
1363
AngularJS 선택 상자
1362
1361
AngularJS 체크 박스
1360
1359
AngularJS $event 객체
1358
1357