<!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</h2>
<p>
btn 클래스는 버튼 스타일을 지원한다.
a, input, button 태그에 사용할 수 있다.
</p>
<div>
<a href="" class="btn btn-primary">링크</a>
<button class="btn btn-primary">버튼</button>
<input type="submit" class="btn btn-primary" value="등록" />
</div>
<h2>버튼 종류</h2>
<div>
<button class="btn btn-default">default</button>
<button class="btn btn-primary">primary</button>
<button class="btn btn-success">success</button>
<button class="btn btn-info">info</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-link">link</button>
</div>
<h2>버튼 크기</h2>
<div>
<button class="btn btn-primary btn-lg">버튼</button>
<button class="btn btn-primary">버튼</button>
<button class="btn btn-primary btn-sm">버튼</button>
<button class="btn btn-primary btn-xs">버튼</button>
</div>
<h2>버튼 비활성화</h2>
<div>
<button class="btn btn-primary" disabled>버튼</button>
</div>
</div>
</body>
</html>
'부트스트랩' 카테고리의 다른 글
demo6-grid (0) | 2019.06.09 |
---|---|
demo5-images (0) | 2019.06.09 |
demo4-text (0) | 2019.06.09 |
demo3-form (0) | 2019.06.09 |
demo2-table (0) | 2019.06.09 |