Bootstrap 3.3.7 | 입력폼(form)과 GUI 구성 요소 | 버튼(btn)

Tags:

지금까지의 입력폼 샘플에서 하나를 언급하지 않은 항목이 있다. 그것은 “버튼"이다. 샘플의 입력폼에 있는 버튼을 보면, 아래와 같은 식으로 작성되어 있는 것을 알 수 있다.

<input type="button" class="btn" value="Click">

class="btn"로 지정되어 있는데, 이는 Bootstrap 자체의 버튼 스타일을 할당하기 위한 것이다. 이 btn 클래스를 지정하면, 원래 스타일의 버튼이 표시된다.

버튼(Button)

가장 기본적인 형태는 다음과 같다.

<button class="btn btn-default">button</button>

btn은 공통적으로 적용되는 모양을 정의하고, btn-default는 테두리나 배경색 등을 정의한다.

여기에서는 <button>를 사용하고 있는데, 물론 <input>에서도 동일하게 사용할 수 있다. 그리고 입력폼 이외(<form> 태그 이외)에서도 <a>, <button>, <input> 등의 태그에 클래스를 추가하여 버튼 모양을 만들 수 있다.

이 btn 클래스는 푸시 버튼의 기반이 되는 클래스이며, 이것만으로 Bootstrap 버튼이 아니다. 이 외에도 다음과 같은 클래스가 준비되어 있다.

색(Color)

Bootstrap은 btn-default 대신에 넣을 수 있는 값으로 총 7가지의 버튼 모양을 제공한다.

  • btn-default
  • btn-primary
  • btn-success
  • btn-info
  • btn-warningg
  • btn-danger
  • btn-link

위에 클래스들은 btn 클래스와 함께 사용한다. 베이스가 되는 디자인은 모두 동일하고, 표시되는 버튼의 색상만 변경된다.

크기(Size)

버튼 크기를 정의하는 클래스는 아래와 같다.

  • btn-lg : 큰 버튼
  • btn-sm : 작은 버튼
  • btn-sx : 더 작은 버튼

이 클래스들을 버튼의 class에 추가하여 크기를 조정할 수 있다.

btn-block은 버튼의 블록 요소로 만든다. 크기를 정하는 클래스와 블록 요소로 만드는 클래스는 같이 사용할 수 있다.

상태(State)

버튼의 상태를 활성화 및 비활성화 상태로 만들 수 있다.

active - 활성화 상태

버튼을 처음부터 누른 상태에서 표시 할 경우에는 class에 “active"를 추기한다. 사용은 class="btn btn-default active"와 같이 한다.

disabled - 비활성 상태

버튼을 사용할 수 없는 상태로 하고 싶은 경우는 class에 “disabled"를 지정한다. 비활성화된 상태인 경우 클릭이 되지 않는다. 사용은 class="btn btn-default disabled"와 같이 한다.

 

실제로 어떤 표시가 되는지, 아래에 샘플을 올려 두었다.

<!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 | Button</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style>
      h1 {
        font-size: 20px;
      }
    </style>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h1>Button</h1>
          <p>
            <a href="#" class="btn btn-default">a</a>
            <button class="btn btn-default">button</button>
            <input type="submit" value="input" class="btn btn-default">
            <span class="btn btn-default">span</span>
          </p>
          <h1>Color</h1>
          <p>
            <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>
            <button class="btn btn-link">Link</button>
          </p>
          <h1>Size</h1>
          <p>
            <button class="btn btn-default btn-xs">btn-xs</button>
            <button class="btn btn-default btn-sm">btn-sm</button>
            <button class="btn btn-default btn-lg">btn-lg</button>
          </p>
          <p>
            <button class="btn btn-default btn-block">btn-block</button>
          </p>
          <p>
            <button class="btn btn-default btn-lg btn-block">btn-lg btn-block</button>
          </p>
          <h1>State</h1>
          <p>
            <button class="btn btn-primary active">button - active</button>
            <a href="#" class="btn btn-danger active">a - active</a>
            <button class="btn btn-primary" disabled="disabled">button - disabled</button>
            <a href="#" class="btn btn-danger disabled">a - disabled</a>
          </p>
        </div>
      </div>
    </div>
  </body>
</html>