<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
</head>
<body>
<!--색상별 배지-->
<span class="badge text-bg-primary">Primary</span><br>
<!--더 둥근 배지-->
<span class="badge rounded-pill text-bg-secondary">Secondary</span><br>
<!--버튼 안에 배지-->
<button type="button" class="btn btn-danger">
Notifications <span class="badge text-bg-success">Success</span>
</button><br>
<!--모서리에 배지 붙이기-->
<button type="button" class="btn btn-info position-relative">
Info
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button><br>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous">
</script>
</body>
</html>
'단순 코드 기록 > BootStrap' 카테고리의 다른 글
| BootStrap_Button_Grid (0) | 2024.02.09 |
|---|---|
| BootStrap_Button (0) | 2024.02.09 |
| BootStrap_Color (0) | 2024.02.09 |
| BootStrap_Alert (0) | 2024.02.09 |
| BootStrap_Grid (0) | 2024.02.09 |