웹 프로그래밍(Web Programming)/Bootstrap

[Bootstrap] 부트스트랩 버튼 사용하기

잇트루 2021. 8. 29. 09:33
반응형

 

 

일반적으로 HTML에서 제공하는 버튼 태그입니다.

<button type="button">버튼 이름</button>

이를 직접 구현한 버튼의 모양은 다음과 같습니다.

HTML에서 제공하는 버튼은 CSS를 통해 꾸며줘야 하는 어려움이 있는데, 부트스트랩 버튼은 부트스트랩에서 제공하는 태그를 알맞게 입력하면 적용이 됩니다.

 

따라서 간편하게 제작이 가능한 부트스트랩 버튼의 여러 가지 기능들을 소개해 드리도록 하겠습니다.

1. 부트스트랩 버튼 개요

부트 스트랩에서 다양한 색상들을 이용해서 구현할 수 있지만 기본적으로 제공하는 색은 다음과 같습니다.

따라서 코드를 통해 다음과 같이 위 색상들의 버튼을 구현할 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
  <!-- 메타 태그 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Bootstrap CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <title>IT is True</title>
</head>
 
<body>
  <h1>부트스트랩 버튼</h1>
  
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button>
  <button type="button" class="btn btn-link">Link</button>
  
  <!-- Bootstrap JS CDN -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
           integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous">
  </script>
    
  </body>
</html>

위 HTML 코드의 결과물은 다음과 같습니다.

 

 

2. 버튼을 사용할 수 있는 태그

부트스트랩에서는 버튼을 다양한 태그로도 사용할 수 있도록 제공하고 있는데, <a>태그 또는 <input>태그에서도 사용할 수 있습니다. <a>태그에서는 다른 페이지와 연결할 수 있는 링크를 제공하고 있습니다.

<!doctype html>
<html lang="ko">
<head>
    <!-- 메타 태그 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <title>IT is True</title>
</head>
 
<body>
    <h1>버튼 태그</h1>
  
    <a class="btn btn-primary" href="#" role="button">링크 버튼</a>
    <input class="btn btn-primary" type="button" value="입력 버튼">
  
    <!-- Bootstrap JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
           integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous">
    </script>
    
    </body>
</html>

위 HTML 코드의 결과는 다음과 같습니다.

 

 

3. Outline 버튼

버튼의 배경색을 제외한 외곽선만을 다양한 색상으로 꾸미고자 한다면 다음과 같이 수행이 가능합니다.

<!doctype html>
<html lang="ko">
<head>
    <!-- 메타 태그 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <title>IT is True</title>
</head>
 
<body>
    <h1>Outline 버튼</h1>
  
    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-light">Light</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>
  
    <!-- Bootstrap JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
           integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous">
    </script>
    
    </body>
</html>

위 HTML 코드의 결과는 다음과 같습니다.

 

 

4. 버튼 크기

부트스트랩 버튼은 기본적으로 Large, Middle, Small 세 가지 크기를 제공하고 있습니다. default는 Middle입니다.

<!doctype html>
<html lang="ko">
<head>
    <!-- 메타 태그 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <title>IT is True</title>
</head>
 
<body>
    <h1>버튼 크기</h1>
  
    <button type="button" class="btn btn-primary btn-lg">큰 버튼</button>
    <button type="button" class="btn btn-primary btn">기본 버튼</button>
    <button type="button" class="btn btn-primary btn-sm">작은 버튼</button>
  
    <!-- Bootstrap JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
           integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous">
    </script>
    
    </body>
</html>

위 HTML 코드의 결과는 다음과 같습니다.

 

 

5. 버튼 비활성화

버튼의 요소에 boolean 속성을 추가하여 버튼을 활성화하지 않게 할 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
    <!-- 메타 태그 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <title>IT is True</title>
</head>
 
<body>
    <h1>버튼 비활성화</h1>
  
    <button type="button" class="btn btn-lg btn-primary" disabled>버튼 비활성화</button>
    <a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">링크 버튼 비활성화</a>

  
    <!-- Bootstrap JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
           integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous">
    </script>
    
    </body>
</html>

위 HTML 코드의 결과는 다음과 같습니다.

 

 

6. 토글 버튼(상태 전환 버튼)

버튼의 활동상태를 전환할 수 있는 방법으로 클릭하여 활성화를 하거나 비활성화된 버튼을 활성화하는 버튼입니다.

<!doctype html>
<html lang="ko">
<head>
    <!-- 메타 태그 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <title>IT is True</title>
</head>
 
<body>
    <h1>토글 버튼</h1>
    
    <div class="row">
        <div class="col">
            <button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">토글 버튼</button>
            <button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active 토글 버튼</button>
            <button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">비활성화된 토글 버튼</button>
        </div>
    </div>
    <div class="row mt-1">
        <div class="col">
            <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">토글 링크 버튼</a>
            <a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active 토글 링크 버튼</a>
            <a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">비활성화된 토글 링크 버튼</a>
        </div>
    </div>
  
    <!-- Bootstrap JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
           integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous">
    </script>
    
    </body>
</html>

위 HTML 코드의 결과는 다음과 같습니다.

 

 

부트스트랩 버튼 예제

위 모든 옵션들을 한 번에 모아놓은 코드 및 결과물입니다.

ㄸSee the Pen Bootstrap_Button by Sungho95 (@sungho95) on CodePen.

 

 

 

 

반응형
저작자표시

'웹 프로그래밍(Web Programming) > Bootstrap' 카테고리의 다른 글

[Bootstrap] 부트스트랩 버튼 색상 변경하기  (0) 2021.09.05
[Bootstrap] 부트스트랩이란 무엇일까? - 간단한 사용법  (0) 2021.08.20

'웹 프로그래밍(Web Programming)/Bootstrap'의 다른글

  • 현재글[Bootstrap] 부트스트랩 버튼 사용하기

관련글

댓글

티스토리툴바