부트스트랩 태그


이 장에서는 Bootstrap 태그에 대해 설명합니다. 레이블은 페이지의 개수, 미리 알림 또는 기타 마크업 표시에 사용될 수 있습니다. 다음 예제와 같이 클래스 .label를 사용하여 레이블을 표시합니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>


</body>
</html>

Run Instance»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요

다음을 수행할 수 있습니다. 다음 예와 같이 수정된 클래스 label-default, label-primary, label-success, label-info, label-warning, label-danger를 사용하여 라벨의 모양을 변경합니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签的变体</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>


</body>
</html>

예제 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요