Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 경고

이 장에서 경고(Alerts)와 Bootstrap가 제공하는 경고를 위한 class를 설명합니다. 경고(Alerts)는 사용자에게 메시지 스타일을 정의할 수 있는 방법을 제공합니다. 이는 표준 사용자 작업에 대한 상황 정보 피드백을 제공합니다.

경고 팝업에 선택 사항으로 닫기 버튼을 추가할 수 있습니다. 인라인으로 취소할 수 있는 경고 팝업을 만들기 위해 다음을 사용하세요: 경고(Alerts) jQuery 플러그인。

하나의 <div>를 생성하고 그에 경고를 추가할 수 있습니다. .alert class와 네 가지 상황 class（즉 .alert-success、.alert-info、.alert-warning、.alert-danger） 중 하나를 선택하여 기본 경고 팝업을 추가하세요. 아래 예제에서 이를 보여줍니다：

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
　　　　<title>Bootstrap 예제　-　경고(Alerts)</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="alert　alert-success">성공! 제출을 잘 완료했습니다.</div>
<div　class="alert　alert-info">정보! 이 정보를 주의하세요.</div>
<div　class="alert　alert-warning">경고! 제출하지 마세요.</div>
<div　class="alert　alert-danger">오류! 일부 변경이 필요합니다.</div>
</body>
</html>

테스트를 보세요.‹/›

결과는 다음과 같습니다:

취소할 수 있는 경고(Dismissal Alerts)

취소할 수 있는 경고(Dismissal Alert)를 생성하는 단계는 다음과 같습니다：

하나의 <div>를 생성하고 그에 .alert class와 네 가지 상황 class（즉 .alert-success、.alert-info、.alert-warning、.alert-danger） 중 하나를 사용하여 기본 경고 팝업을 추가합니다.
또한上面的 <div> class에 선택적 .alert-dismissable。
닫기 버튼을 추가합니다。

아래 예제는 이를 보여줍니다：

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap 예제　-　취소할 수 있는 경고(Dismissal Alerts)</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="alert　alert-success　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	성공! 잘 완료했습니다。
</div>
<div　class="alert　alert-info　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	정보! 이 정보를 주의하세요。
</div>
<div　class="alert　alert-warning　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	경고! 제출하지 마세요。
</div>
<div　class="alert　alert-danger　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	오류! 일부 변경이 필요합니다。
</div>
</body>
</html>

테스트를 보세요.‹/›

결과는 다음과 같습니다:

경고(Alerts)의 링크

경고(Alerts)에서 링크를 생성하는 단계는 다음과 같습니다：

하나의 <div>를 생성하고 그에 .alert class와 네 가지 상황 class（즉 .alert-success、.alert-info、.alert-warning、.alert-danger） 중 하나를 사용하여 기본 경고 팝업을 추가합니다.
사용 .alert-link enity 클래스를 사용하여 일치하는 색상의 링크를 빠르게 제공합니다。

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap 예제　-　경고(Alerts)의 링크</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="alert　alert-success">
	<a　href="#"　class="alert-link">성공! 잘 완료했습니다.</a>
</div>
<div　class="alert　alert-info">
	<a　href="#"　class="alert-link">정보! 이 정보를 주의하세요.</a>
</div>
<div　class="alert　alert-warning">
	<a　href="#"　class="alert-link">경고! 제출하지 마세요.</a>
</div>
<div　class="alert　alert-danger">
	<a　href="#"　class="alert-link">에러! 일부 변경이 필요합니다.</a>
</div>
</body>
</html>

테스트를 보세요.‹/›

결과는 다음과 같습니다:

Bootstrap 진행条的 Bootstrap 미니어처