Buttons
๋ฒํผ ์์๋ฅผ ๋์์ธํฉ๋๋ค.
๊ธฐ๋ณธ ํด๋์ค
๋ฒํผ ๋์์ธ์ ์ ์ฉํ๋ ๊ธฐ๋ณธ ํด๋์ค ์์ฑ๊ฐ์ btn ์
๋๋ค.class="btn"
HTML
๋ณต์ฌ
๋ฒํผ ์ข
๋ฅ | ํด๋์ค | ์ค๋ช
|
๊ธฐ๋ณธ ๋ฒํผ | btn btn-primary | ํ๋์ ๊ธฐ๋ณธ ๋ฒํผ |
btn btn-secondary | ํ์ ๊ธฐ๋ณธ ๋ฒํผ | |
btn btn-success | ์ด๋ก์ ๊ธฐ๋ณธ ๋ฒํผ | |
btn btn-danger | ๋นจ๊ฐ์ ๊ธฐ๋ณธ ๋ฒํผ | |
btn btn-warning | ๋
ธ๋์ ๊ธฐ๋ณธ ๋ฒํผ | |
btn btn-info | ํ๋์ ๊ธฐ๋ณธ ๋ฒํผ | |
btn btn-light | ํฐ์ ๊ธฐ๋ณธ ๋ฒํผ | |
btn btn-dark | ๊ฒ์์ ๊ธฐ๋ณธ ๋ฒํผ | |
btn btn-link | ๋งํฌ ์คํ์ผ ๋ฒํผ | |
ํฐ ๋ฒํผ | btn btn-primary btn-lg | ํ๋์ ํฐ ๋ฒํผ |
btn btn-secondary btn-lg | ํ์ ํฐ ๋ฒํผ | |
btn btn-success btn-lg | ์ด๋ก์ ํฐ ๋ฒํผ | |
btn btn-danger btn-lg | ๋นจ๊ฐ์ ํฐ ๋ฒํผ | |
btn btn-warning btn-lg | ๋
ธ๋์ ํฐ ๋ฒํผ | |
btn btn-info btn-lg | ํ๋์ ํฐ ๋ฒํผ | |
btn btn-light btn-lg | ํฐ์ ํฐ ๋ฒํผ | |
btn btn-dark btn-lg | ๊ฒ์์ ํฐ ๋ฒํผ | |
btn btn-link btn-lg | ๋งํฌ ์คํ์ผ ํฐ ๋ฒํผ | |
์์๋ผ์ธ ๋ฒํผ | btn btn-outline-primary | ํ๋์ ํ
๋๋ฆฌ ๋ฒํผ |
btn btn-outline-secondary | ํ์ ํ
๋๋ฆฌ ๋ฒํผ | |
btn btn-outline-success | ์ด๋ก์ ํ
๋๋ฆฌ ๋ฒํผ | |
btn btn-outline-danger | ๋นจ๊ฐ์ ํ
๋๋ฆฌ ๋ฒํผ | |
btn btn-outline-warning | ๋
ธ๋์ ํ
๋๋ฆฌ ๋ฒํผ | |
btn btn-outline-info | ํ๋์ ํ
๋๋ฆฌ ๋ฒํผ | |
btn btn-outline-light | ํฐ์ ํ
๋๋ฆฌ ๋ฒํผ | |
btn btn-outline-dark | ๊ฒ์์ ํ
๋๋ฆฌ ๋ฒํผ |
์์ ์ฝ๋
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 ๋ฒํผ ์์</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<!-- ๊ธฐ๋ณธ ๋ฒํผ -->
<div class="my-5">
<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 class="my-5">
<button type="button" class="btn btn-primary btn-lg">Primary Large</button>
<button type="button" class="btn btn-secondary btn-lg">Secondary Large</button>
<button type="button" class="btn btn-success btn-lg">Success Large</button>
<button type="button" class="btn btn-danger btn-lg">Danger Large</button>
<button type="button" class="btn btn-warning btn-lg">Warning Large</button>
<button type="button" class="btn btn-info btn-lg">Info Large</button>
<button type="button" class="btn btn-light btn-lg">Light Large</button>
<button type="button" class="btn btn-dark btn-lg">Dark Large</button>
<button type="button" class="btn btn-link btn-lg">Link Large</button>
</div>
<!-- ์์๋ผ์ธ ๋ฒํผ -->
<div class="my-5">
<button type="button" class="btn btn-outline-primary">Outline Primary</button>
<button type="button" class="btn btn-outline-secondary">Outline Secondary</button>
<button type="button" class="btn btn-outline-success">Outline Success</button>
<button type="button" class="btn btn-outline-danger">Outline Danger</button>
<button type="button" class="btn btn-outline-warning">Outline Warning</button>
<button type="button" class="btn btn-outline-info">Outline Info</button>
<button type="button" class="btn btn-outline-light">Outline Light</button>
<button type="button" class="btn btn-outline-dark">Outline Dark</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
HTML
๋ณต์ฌ