Bootstrap 3.3.7 | Bootstrap의 입력 구성 요소 | 버튼 그룹(btn-group)
HTML에는 입력 관계의 부품은 정해져 있다. 하지만 그것만으로는 그냥 재미없는 인터페이스가 되어 버린다. 좀 더 사용하기 쉽게 디자인된 부품이 있으면 …… 이라고 생각하는 사람도 많을 것이다.
Bootstrap은 독자적으로 정의한 스타일이나 스크립트 등을 사용하여, 표준 HTML에 포함되어 있지 않은 인터페이스를 간단히 만들 수 있다. 그들에 대해 여기서 정리하여 설명하겠다.
버튼 그룹
우선은 “버튼 그룹"에 대해서이다. 버튼은 이미 간단히 설명을 했다. Bootstrap 자체의 클래스를 사용하는 것으로 보기 쉬운 디자인을 할 수 있었다. 이 푸시 버튼을 여러개를 나란히 그룹화한 것이 버튼 그룹이다.
이 버튼 그룹은 앞서 설명한 “입력 그룹"의 버튼 버전이라고 해도 좋을 것이다. 여러 버튼을 1개의 바(bar)처럼 표시한다. 이 버튼 그룹은 다음과 같이 작성한다.
<div class="btn-group">
<button class="btn">버튼의 표시 텍스트</button>
...... 중략 ......
</ div>
class="btn-group"
을 설정한 <div>
태그 안에 버튼을 작성하고 있다. 여기에서는 <button>
태그를 사용했지만, 이것은 <input type="button">
에서도 동일하게 사용할 수 있다.
표시하는 것은 단순한 버튼이기 때문에, Bootstrap에 준비되어 있는 btn와 btn-primary 같은 버튼의 클래스도 그대로 사용할 수 있다.
아래는 실제 사용 예제이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>컨텐츠 표시</h1>
<h2>Button Group</h2>
</div>
<div class="btn-group">
<button class="btn">btn</button>
<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>
</div>
</div>
</div>
</div>
</body>
</html>
다양한 클래스를 설정한 버튼을 <div class="btn-group">
으로 깨끗하게 1개의 그룹으로 구성되어 있다.