7. 텍스트와 버튼

부트스트랩에 버튼은 다양한 크기와 색을 지원합니다. 아래는 부트스트랩에서 기본적으로 제공하고 있는 버튼입니다.


<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>

버튼은 <button> 요소와 함께 사용하도록 설계되었지만 다른 요소에도 사용할 수 있습니다. 아래 다양한 예제를 참고하여 홈페이지를 작성하시면 좋을 것 같습니다. 모두 동일한 모양의 버튼을 만들어줍니다.


<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

아웃라인만 들어간 버튼을 만들 수도 있습니다. 기본 클래스를 .btn-outline-*로 바꾸면 버튼의 배경 이미지와 색상이 제거된 아웃라인 버튼을 만들 수 있습니다.


<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>

부트스트랩은 버튼의 사이즈를 빠르게 변경하기 위한 클래스를 제공합니다. .btn-lg (큰 버튼)또는 .btn-sm(작은 버튼)을 추가하면 아래처럼 버튼의 크기가 조정됩니다.


<button type="button" class="btn btn-primary btn-lg">큰 버튼</button>
<button type="button" class="btn btn-secondary btn-lg">큰 버튼</button>

<button type="button" class="btn btn-primary btn-sm">작은 버튼</button>
<button type="button" class="btn btn-secondary btn-sm">작은 버튼</button>

.btn-block을 추가하면 부모의 전체 넓이만한 버튼을 만들 수도 있습니다.


<button type="button" class="btn btn-primary btn-lg btn-block">블록 레벨 버튼</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">블록 레벨 버튼</button>

부트스트랩 버튼에는 활성과 비활성을 제공하고 있습니다. 버튼이 Acrive(활성)상태가 되면 버튼이 눌러져 보입니다.


<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

버튼의 비활성 상태는 기존의 색 그대로를 나타냅니다. disabled 속성을 <button> 요소에 추가하여 버튼을 비활성 상태로 만들 수 있습니다. 활성화된 상태는 .active입니다.


<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

<a> 요소를 사용하는 비활성 버튼은 조금 다르게 동작합니다.

<a>는 disabled 속성을 지원하지 않으므로 비활성화 된 것으로 보이게 하려면 .disabled 클래스를 추가 해야 합니다.

anchor 버튼의 모든 pointer-events를 비활성화 합니다. 해당 속성을 지원하는 브라우저에서는 비활성화 된 커서가 전혀 표시되지 않습니다.

Disabled buttons(비활성상태 버튼)은 aria-disabled="true" 속성을 포함해야 합니다.

비활성화 된 버튼에는 요소의 상태를 표시하기 위해 aria-disabled=“true” 속성을 포함합니다.


<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

버튼 플러그인을 사용하면 버튼으로 더 많은 작업을 할 수 있게 됩니다. 토글 상태를 알기 위해서는 data-toggle="button"을 추가하여 버튼 active 상태를 토글합니다.

버튼을 미리 토글할 경우에는 .active 클래스와 aria-pressed=“true”를 수동으로 <button>에 추가해야 합니다.


<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
    Single toggle
</button>

체크박스와 라디오 버튼에 부트스트랩에서 제공하고 있는 플러그인을 사용해보도록 하겠습니다. 부트스트랩의 .button 스타일은 <label>과 같은 요소에 적용되어 checkbo나 radio에 버튼토글을 지정할 수 있습니다. 각각의 스타일에서 토글링할 수 있도록 변경된 버튼이 포함된.btn-group에 data-toggle="buttons"를 추가할 수 있습니다.

버튼들의 체크상태는 버튼의 클릭 이벤트를 통해서만 업데이트됩니다. 다른 방법을 사용하여<input type="reset"> 또는 input의 checked 속성을 적용하여 입력을 업데이트하는 경우 <label>을 수동으로 토글해야 합니다.

기본 선택된 버튼은 적용하려면 .active 클래스를 input의 <label>에 수동으로 추가해야 합니다.


<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-secondary active">
		<input type="checkbox" checked autocomplete="off"> 체크박스 1 (기본선택)
	</label>
	<label class="btn btn-secondary">
		<input type="checkbox" autocomplete="off"> 체크박스 2
	</label>
	<label class="btn btn-secondary">
		<input type="checkbox" autocomplete="off"> 체크박스 3
	</label>
</div>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <p class="text-active">hello world</p>
    <p class="text-primary">hello world</p>
    <p class="text-secondary">hello world</p>
    <p class="text-success">hello world</p>
    <p class="text-danger">hello world</p>
    <p class="text-warning">hello world</p>
    <p class="text-info">hello world</p>
    <p class="text-light">hello world</p>
    <p class="text-dark">hello world</p>

    <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>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>