Bootstrap 3.3.7 | Bootstrap의 입력 구성 요소 | 버튼 그룹 안에 드롭다운을 조합
이 드롭다운은 단체로 사용하는 것은 물론이고, 버튼 그룹과 버튼 툴바를 통합하여 사용할 수도 있다. 이것에 좀 주의해야 할 점이 있다.
<div class="btn-group">
...... 버튼 태그 ......
<div class="btn-group" role="group">
<button class="btn btn-default dropdown-toggle"
data-toggle="dropdown">버튼의 텍스트</ button>
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a href="#"> 메뉴 항목 </a>
</ li>
...... 필요한 만큼의 <li>을 준비 ......
</ ul>
</ div>
</ div>
버튼 그룹은 <div class="btn-group">
안에 버튼 태그를 작성하고 있다. 여기에서 필요에 따라 드롭다운의 태그를 준비해 둔다. 하지만, 잘 보면 드롭다운의 기반이 되고 있는 <div>
태그가 아래와 같이 되어 있다.
<div class="btn-group" role="group">
버튼 그룹의 항목이 되는 <div>
태그 안에 드롭다운 관련의 태그가 작성되어 있는 것을 알 수 있을 것이다. <div class="dropdown">
은 사용하지 않는다.
아래에 실제 사용 예제이다.
<!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">
<div class="btn btn-default">String</div>
<div class="btn btn-default">Bool</div>
<div class="btn-group" role="group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Number
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a href="#">One</a>
</li>
<li role="presentation">
<a href="#">Two</a>
</li>
<li role="presentation">
<a href="#">Three</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
버튼 그룹, 버튼 툴바 그리고 드롭다운을 알면, 이들을 조합한 인터페이스를 만들 수 있게 된다.