<!DOCTYPE html>
<html lang="ko">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>부트스트랩 컴포넌트</h1>
<h2>.btn-group 버튼 그룹</h2>
<div class="btn-group">
<button class="btn btn-default">현금</button>
<button class="btn btn-primary">카드</button>
<button class="btn btn-default">이머니</button>
</div>
<h2>.btn-group, .btn-group-justified 양쪽 정렬된 버튼 그룹</h2>
<div class="btn-group btn-group-justified">
<a href="" class="btn btn-default">현금</a>
<a href="" class="btn btn-primary">카드</a>
<a href="" class="btn btn-default">이머니</a>
<a href="" class="btn btn-default">무통장</a>
<a href="" class="btn btn-default">네이버페이</a>
</div>
<h2>.btn-group 드롭다운버튼</h2>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
신상품은 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="">가격순</a></li>
<li><a href="">평점순</a></li>
<li><a href="">리뷰순</a></li>
</ul>
</div>
<h2>.badge, .label</h2>
<div>
<button class="btn btn-primary">좋아요<span class="badge">♥</span></button>
<a href="">메일 <span class="badge">?</span></a>
<a href="">쪽지 <span class="badge">?</span></a>
<a href="">알림 <span class="badge">?</span></a>
</div>
<div>
<a href="">메일 <span class="label label-default">7 개</span></a>
<a href="">쪽지 <span class="labe label-primary">7 개</span></a>
<a href="">알림 <span class="labe label-success">7 개</span></a>
<a href="">알림 <span class="labe label-info">7 개</span></a>
<a href="">알림 <span class="labe label-warning">7 개</span></a>
<a href="">알림 <span class="labe label-danger">7 개</span></a>
</div>
<h2>.glyphicon</h2>
<div>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-shopping-cart"></span> 장바구니 담기
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span> 늘 사는 것
</button>
</div>
<h2>.list-group, .list-group-item 목록그룹</h2>
<div>
<ul class="list-group">
<li class="list-group-item">인사 1팀<span class="badge">3</span></li>
<li class="list-group-item">영업 1팀<span class="badge">3</span></li>
<li class="list-group-item active"><span class="badge">3</span>영업 2팀</li>
<li class="list-group-item">총무팀<span class="badge">3</span></li>
</ul>
</div>
<div>
<div class="list-group">
<a href="" class="list-group-item">링크1</a>
<a href="" class="list-group-item">링크1</a>
<a href="" class="list-group-item">링크1</a>
<a href="" class="list-group-item">링크1</a>
</div>
</div>
<div>
<div class="list-group">
<a href="" class="list-group-item">
<h4 class="list-group-item-heading">[속보] 점심 시간 5분 전</h4>
<p class="list-group-item-text">점심 시간이 5분 남았다고 합니다.</p>
</a>
<a href="" class="list-group-item">
<h4 class="list-group-item-heading">[속보] 점심 시간 5분 전</h4>
<p class="list-group-item-text">점심 시간이 5분 남았다고 합니다.</p>
</a>
</div>
</div>
</div>
</body>
</html>