Bootstrap 3.3.7 | Bootstrap의 입력 구성 요소 | 버튼 그룹(btn-group)

Tags:

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개의 그룹으로 구성되어 있다.