반응형
버튼 예제
https://getbootstrap.com/docs/5.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
사이트에 사용 방법이 나와있어서 그대로 따라 하다 보면 익숙해질 것이다.
class 이름에 특정 버튼을 의미하는 명칭을 적어주면 적용이 된다.
버튼 만들기, 버튼 그룹 만들기, outline 버튼 만들기 예제
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<title>Document</title>
</head>
<body>
<!-- 버튼 사용 예제 -->
<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-link">Link</button>
<!-- div를 class명을 이용하여 버튼으로 만드는 방법 -->
<div class = "btn btn-primary">ABC</div>
<!-- 버튼을 그룹화 시키는 방법 -->
<div class="btn-group">
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
</div>
<!-- outline Button 만드는 방법 -->
<div class = "btn btn-outline-primary">outline</div>
</body>
</html>
반응형
'프론트엔드 > Bootstrap' 카테고리의 다른 글
| 부트 스트랩 - Components 사용 방법 (Tooltips) (0) | 2021.06.29 |
|---|---|
| 부트 스트랩 - Components 사용 방법 (Modal) (0) | 2021.06.28 |
| 부트 스트랩 - Forms 사용 방법 (0) | 2021.06.28 |
| 부트 스트랩 - Components 사용 방법 (Dropdowns, List group) (0) | 2021.06.28 |
| 부트 스트랩 시작 (0) | 2021.06.28 |
