Main menu

Bootstrap 3 강좌 | 버튼(Button)

버튼(Button)

<a>, <button>, <input> 등의 태그에 클래스를 추가하여 버튼 모양을 만들 수 있습니다. 가장 기본적인 형태는 다음과 같습니다.

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

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

색(Color)

btn-default 대신에 넣을 수 있는 값은 btn-primarybtn-successbtn-infobtn-warningbtn-dangerbtn-link로, Bootstrap은 총 7가지의 버튼 모양을 제공합니다.

크기(Size)

버튼 크기를 정의하는 클래스는 btn-xsbtn-smbtn-lg입니다. btn-block은 버튼을 블록 요소로 만듭니다. 크기를 정하는 클래스와 블록 요소로 만드는 클래스는 같이 사용할 수 있습니다.

상태(State)

active를 추가하면 활성화된 상태, 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="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>

이 글을 공유하기

Kakao