Bootstrap 3.3.7 | Bootstrap의 입력 구성 요소 | 버튼 그룹 안에 드롭다운을 조합

Tags:

이 드롭다운은 단체로 사용하는 것은 물론이고, 버튼 그룹과 버튼 툴바를 통합하여 사용할 수도 있다. 이것에 좀 주의해야 할 점이 있다.

<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>

버튼 그룹, 버튼 툴바 그리고 드롭다운을 알면, 이들을 조합한 인터페이스를 만들 수 있게 된다.