Bootstrap 3.3.7 | Bootstrap의 입력 구성 요소 | 버튼 툴바(btn-toolbar)


버튼 그룹은 여러 버튼을 하나로 통합한 것이었다. 이 버튼 그룹은 더 나아가 여러 그룹을 한곳에 모아서 다루는 “버튼 툴바"라는 것으로 사용할 수 있다.

버튼 툴바

버튼 툴바는 툴바를 만드는 것이다. 툴바라는 것은 컴퓨터의 일반적인 비즈니스 소프트웨어에서 자주 사용되는 인터페이스이다. 메뉴 바의 아래에 아이콘을 표시하는 작은 버튼이 가로로 일렬로 늘어서 있다.

이러한 도구 모음은 단추가 길게 전부 연결되어 있는 것은 아니다. 관련있는 것이 몇 가지 그룹으로 되어 있고, 가로로 늘어선 형태로 되어 있다. 버튼 툴바는 이러한 도구 모음 버튼으로 만드는데 사용한다.

버튼 툴바는 여러 버튼 그룹을 하나로 통합한 형태를 하고 있다. 정리하자면 아래와 같은 형태이다.

<div class="btn-toolbar">
    <div class="btn-group">
        <button class="btn btn-default">텍스트</button>
        ...... 여러 버튼 준비 ......
    </div>
    ...... 여러 버튼 그룹 준비 ......
</div>

<div class="btn-toolbar">라는 태그가 기반이 되어, 그 안에 <div class="btn-group">에서 버튼 그룹을 준비하고 있다. 버튼 그룹을 이해했다면, 그다지 복잡하지 않을 것이다.

실제 사용 예제를 아래와 같다.

<!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 Toolbar</h2>
        </div>
         
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-default">One</button>
                <button class="btn btn-default">Two</button>
                <button class="btn btn-default">Three</button>
            </div>
            <div class="btn-group">
                <input type="button" class="btn btn-default" value="Four">
                <input type="button" class="btn btn-default" value="Five">
            </div>
            <div class="btn-group">
                <div class="btn btn-default">Six</div>
                <div class="btn btn-default">Seven</div>
            </div>
        </div>
    </div>
</div>
 
</div>
 
</body>
</html>

여기에서는 총 7개의 버튼을 3개의 버튼 그룹으로 정리하여 표시하고 있다.

코드를 보면 알겠지만, <button><input type="button">뿐만 아니라 <div> 태그로 버튼 그룹을 만들고 있다. class="btn btn-default"와 같이 버튼의 클래스를 설정해 주면, 버튼과 관계된 태그가 아니어도, 버튼의 표시를 할 수 있다. 물론, 클릭도 할수 있어서 제대로 사용할 수 있다.