English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 기본 강의

Bootstrap4 信息提示框

Bootstrap 4 可以很容易实现信息提示框。

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>提示框</h2>
　　<p>提示框可以使用　.alert　类,　后面加上指定特定意义的颜色类来实现:</p>
　　<div　class="alert　alert-success">
　　　　강조> 성공!/강조> 성공적인 작업 표시 경고 정보를 지정하십시오。
　　</div>
　　<div　class="alert　alert-info">
　　　　강조> 정보!/강조> 이 정보를 주의하세요。
　　</div>
　　<div　class="alert　alert-warning">
　　　　강조> 경고!/강조> 경고 정보를 설정하십시오。
　　</div>
　　<div　class="alert　alert-danger">
　　　　strong>오류!/strong>　失败的操作
　　</div>
　　<div　class="alert　alert-primary">
　　　　strong>선택!/strong>　중요한 작업 정보입니다.
　　</div>
　　<div　class="alert　alert-secondary">
　　　　strong>보조!/strong>　중요하지 않은 정보를 표시합니다.
　　</div>
　　<div　class="alert　alert-dark">
　　　　<strong>검은색!/strong>　검은색 알림 팝업.
　　</div>
　　<div　class="alert　alert-light">
　　　　<strong>은은색!/strong>은은색 알림 팝업.
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›

提示框添加链接

提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>提示框添加链接</h2>
　　<p>提示框中在链接的标签上添加　alert-link　类来设置匹配提示框颜色的链接：</p>
　　<div　class="alert　alert-success">
　　　　강조> 성공!/strong>　你应该认真阅读　<a　href="#"　class="alert-link">이 정보</a>.
　　</div>
　　<div　class="alert　alert-info">
　　　　강조> 정보!/strong>　你应该认真阅读　<a　href="#"　class="alert-link">이 정보</a>.
　　</div>
　　<div　class="alert　alert-warning">
　　　　강조> 경고!/strong>　你应该认真阅读　<a　href="#"　class="alert-link">이 정보</a>.
　　</div>
　　<div　class="alert　alert-danger">
　　　　strong>오류!/strong>　你应该认真阅读　<a　href="#"　class="alert-link">이 정보</a>.
　　</div>
　　<div　class="alert　alert-primary">
　　　　strong>선택!/strong>　你应该认真阅读　<a　href="#"　class="alert-link">이 정보</a>.
　　</div>
　　<div　class="alert　alert-secondary">
　　　　strong>보조!/strong>　你应该认真阅读　<a　href="#"　class="alert-link">이 정보</a>.
　　</div>
　　<div　class="alert　alert-dark">
　　　　<strong>검은색!/strong>你应该认真阅读　<a　href="#"　class="alert-link">이 정보</a>.
　　</div>
　　<div　class="alert　alert-light">
　　　　灰色!/strong>　你应该认真阅读　<a　href="#"　class="alert-link">이 정보</a>.
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›

튜플을 닫기

튜플의 div에 .alert-dismissible 클래스를 사용한 후, 닫기 버튼의 링크에 class="close"와 data-dismiss="alert" 클래스를 사용하여 닫기 작업을 설정합니다。

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>튜플을 닫기</h2>
　　<p>튜플의 div에 .alert-dismissible 클래스를 사용한 후, 닫기 버튼의 링크에 class="close"와 data-dismiss="alert" 클래스를 사용하여 튜플의 닫기 작업을 설정합니다。</p>
　　<div　class="alert　alert-성공 경고-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　강조> 성공!/강조> 성공적인 작업 표시 경고 정보를 지정하십시오。
　　</div>
　　<div　class="alert　alert-정보 경고-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　강조> 정보!/강조> 이 정보를 주의하세요。
　　</div>
　　<div　class="alert　alert-경고 경고-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　강조> 경고!/강조> 경고 정보를 설정하십시오。
　　</div>
　　<div　class="alert　alert-위험 경고-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>오류!/strong>　실패한 작업.
　　</div>
　　<div　class="alert　alert-primary　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>선택!/strong>　중요한 작업 정보입니다.
　　</div>
　　<div　class="alert　alert-secondary　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>보조!/strong>　중요하지 않은 정보를 표시합니다.
　　</div>
　　<div　class="alert　alert-dark　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>검은색!/strong>　검은색 알림 팝업.
　　</div>
　　<div　class="alert　alert-light　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>은은색!/strong>은은색 알림 팝업.
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›

알림: × (×)는 HTML 엔티티 문자로, "x" 글자 대신 닫기 작업을 나타냅니다。

튜플 애니메이션

.fade와 .show 클래스는 튜플이 닫혀질 때의 점진적 사라짐과 등장 효과를 설정합니다：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 예제</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>튜플 애니메이션</h2>
　　<p>.fade와 .show 클래스는 튜플이 닫혀질 때의 점진적 사라짐과 등장 효과를 설정합니다：</p>
　　<div　class="alert　alert-성공 경고-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　강조> 성공!/강조> 성공적인 작업 표시 경고 정보를 지정하십시오。
　　</div>
　　<div　class="alert　alert-정보 경고-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　강조> 정보!/강조> 이 정보를 주의하세요。
　　</div>
　　<div　class="alert　alert-경고 경고-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　강조> 경고!/강조> 경고 정보를 설정하십시오。
　　</div>
　　<div　class="alert　alert-위험 경고-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>오류!/strong>　실패한 작업.
　　</div>
　　<div　class="alert　alert-primary　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>선택!/strong>　중요한 작업 정보입니다.
　　</div>
　　<div　class="alert　alert-secondary　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong>보조!/strong>　중요하지 않은 정보를 표시합니다.
　　</div>
　　<div　class="alert　alert-dark　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>검은색!/strong>　검은색 알림 팝업.
　　</div>
　　<div　class="alert　alert-light　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>은은색!/strong>은은색 알림 팝업.
　　</div>
</div>
</body>
</html>
테스트 보기 ‹/›
Bootstrap4 버튼Bootstrap4 Jumbotron