>Bootstrap 기본 강의

>Bootstrap 플러그인

Bootstrap 초대형 스크린 Bootstrap 태그

Bootstrap 메달

>이 장에서는 Bootstrap 벨트(Badges)를 설명합니다. 벨트는 태그와 유사하지만, 벨트의 모서리가 더 둥글어서 차이가 나는 점이 있습니다.

>벨트(Badges)는 새로운 또는 미읽은 항목을 강조하기 위해 사용됩니다. 벨트를 사용하려면 단순히 <span> >링크, Bootstrap 네비게이션 등 이러한 요소에 추가하면 됩니다。

>다음 예제에서 이를 보여줍니다：

온라인 예제

>미읽은 이메일을 표시합니다：

예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8>　
	<title>Bootstrap　예제　-　벨트(Badges)</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>
<a　href="#">메일함　<span　class="badge">50</span></a>
</body>
</html>

테스트해 보세요 ‹/›

결과는 다음과 같습니다:

>새로운 또는 미읽은 항목이 없을 때, CSS의 :empty >선택자를 사용하면 벨트가 비어 있음을 나타냅니다.

온라인 예제

>미읽은 메시지를 표시합니다：

예제

!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>
<div　class="container">
　　<h2>벨트</h2>
　　<p>.badge　클래스는 미읽은 메시지의 수를 지정합니다:</>p>
　　<p><a　href="#">받은 편지함　<span　class="badge">21</span></a></>p>
</>div>
</body>
</html>

테스트해 보세요 ‹/›

>네비게이션 상태 활성화

>활성 상태의 캡슐 네비게이션과 리스트 네비게이션에 벨트를 위치시킬 수 있습니다. 다음과 같이 사용하면 됩니다： <span> >链接를 활성화하려면 다음 예제와 같이 합니다：

온라인 예제

예제

!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>
<h4>胶囊 네비게이션의 활성 상태</h4>
<ul　class="nav　nav-pills">
	<li　class="active"><a　href="#">홈　<span　class="badge">42</span></a></li>
	<li><a href="#">소개</a></li>
	<li><a　href="#">메시지　<span　class="badge">3</span></a></li>
</ul>
<br>
<h4>리스트 네비게이션의 활성 상태</h4>
<ul　class="nav　nav-pills　nav-stacked"　style="max-width:　260px;">
	<li class="active">
		<a href="#">
			<span class="badge pull-right">42</span>
			홈페이지
		</a>
	</li>
	<li><a href="#">소개</a></li>
	<li>
		<a href="#">
			<span class="badge pull-right">3</span>
			메시지
		</a>
	</li>
</ul>
</body>
</html>

테스트해 보세요 ‹/›

결과는 다음과 같습니다:

Bootstrap 초대형 스크린 Bootstrap 태그