온라인 도구

Bootstrap 기본 강의

Bootstrap 태그

Bootstrap 플러그인 이 장에서는 Bootstrap 레이블을 설명합니다. 레이블은 카운트, 튜토리얼, 또는 페이지에서 다른 표시를 위해 사용될 수 있습니다. class를 사용하여: .label

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　레이블을 표시하려면 아래의 예제와 같이:/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>
<h1>예제 제목 <span　class="label　label-default">레이블</span></h1>
<h2>예제 제목 <span　class="label　label-default">레이블</span></h2>
<h2>예제 제목 <span　class="label　label-default">레이블</span></h2>
<h4>예제 제목 <span　class="label　label-default">레이블</span></h4>
</body>
</html>

테스트해 보세요 ‹/›

결과는 다음과 같습니다:

수정된 class를 사용할 수 있습니다. label-default、label-primary、label-success、label-info、label-warning、label-danger 레이블의 외관을 변경할 수 있습니다. 아래의 예제와 같이:

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　변형된 레이블</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>
<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>

테스트해 보세요 ‹/›

결과는 다음과 같습니다:

태그 더 많은 예제

클래스	설명	예제
.label label-default	기본의 회색 태그	시도해 보세요
.label label-success	"success" 유형의 녹색 태그	시도해 보세요
.label label-warning	"warning" 유형의 노란 태그	시도해 보세요

Bootstrap 메달 Bootstrap 페이지네이션