Bootstrap 4 / Buttons / 버튼 꾸미기
Buttons
CSS로 꾸밀 때 손이 많이 가는 것 중의 하나가 버튼입니다. Bootstrap을 사용하면 여러 색의 버튼을 쉽게 만들 수 있습니다.
기본
클래스의 값으로 btn btn-xxx를 추가하면 버튼이 꾸며집니다. xxx에 들어갈 문자열에 따라 색이 달라집니다. 버튼에 마우스를 올리면 좀 더 진한 색으로 바뀝니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col"> <h1>Button</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> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </body> </html>
위 아래 여백이 없으므로, 줄바꿈이 있을 때 버튼이 붙는다는 것에 주의합니다.
버튼 모양으로 만들 수 있는 태그
꼭 button만 꾸밀 수 있는 것은 아닙니다. a, input, span, p 등 다른 요소도 꾸밀 수 있습니다.
<a class="btn btn-primary" href="#">Link</a> <input class="btn btn-success" type="button" value="Input"> <input class="btn btn-danger" type="submit" value="Submit"> <input class="btn btn-info" type="reset" value="Reset">
테두리 모양의 버튼
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을 추가하면 버튼이 작아집니다. btn-block을 추가하면 block 레벨의 버튼이 만들어집니다.
<p><button type="button" class="btn btn-primary">Button</button></p> <p><button type="button" class="btn btn-secondary btn-lg">Button large</button></p> <p><button type="button" class="btn btn-success btn-sm">Button Small</button></p> <p><button type="button" class="btn btn-danger btn-block">Button Block</button></p>
활성화와 비활성화
클래스에 active를 추가하면 색이 진해집니다. disabled를 축하면 색이 흐려집니다.
<p><button type="button" class="btn btn-primary">Nomal</button></p> <p><button type="button" class="btn btn-primary active">Active</button></p> <p><button type="button" class="btn btn-primary" disabled>Disabled</button></p>
클래스 값으로 disabled를 추가해도 됩니다.
<span class="btn btn-primary disabled">Disabled</span>