Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법은 무엇입니까? 다음 글에서는 코드 예제를 통해 Bootstrap5 Badge 배지 아이콘 구성 요소의 사용법을 설명하겠습니다.
1 배지 구조
배지는 일반적으로 탐색 모음, 제목, 버튼 및 아바타 오른쪽의 작은 영역에 사용되며, 읽지 않은 메시지 수를 세거나 새 릴리스를 식별하는 데 사용됩니다. 인기 핫 등 상대 글꼴 크기와 em 단위를 사용하면 직접 상위 요소의 크기에 맞게 배지 크기를 조정할 수 있습니다. Bootstrap 5부터 배지에는 더 이상 링크 포커스나 호버 스타일이 없습니다. [관련 추천: "부트스트랩 튜토리얼"]
배지의 구조는 매우 간단합니다. 두 개의 클래스가 포함된 스팬 태그입니다. bg-*是背景颜色。还可以用text-*
1 | <span class="badge bg-secondary">文字内容</span>
|
로그인 후 복사
2 배지를 텍스트로 사용할 경우
배지를 텍스트로 사용할 경우 텍스트에 맞게 크기가 자동으로 조정됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>徽章</title>
</head>
<body>
<div>
<br><br><br>
<h1>Example heading <span class="badge bg-info ">New</span></h1>
<h2>Example heading <span class="badge bg-danger ">Hot</span></h2>
<h3>Example heading <span class="badge bg-info ">New</span></h3>
<h4>Example heading <span class="badge bg-info ">New</span></h4>
<h5>Example heading <span class="badge bg-info ">New</span></h5>
<h6>Example heading <span class="badge bg-info ">New</span></h6>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
|
로그인 후 복사
3 for 버튼
배지는 링크나 버튼의 일부로 사용되어 카운터를 제공할 수 있습니다.
1 2 3 | <button type="button" class="btn btn-primary">
未读消息 <span class="badge bg-secondary">4</span>
</button>
|
로그인 후 복사
배지는 사용 방법에 따라 스크린 리더 및 유사한 보조 기술 사용자에게 혼란을 줄 수 있다는 점에 유의하세요. 배지 스타일은 목적에 대한 시각적 단서를 제공하지만 이러한 사용자는 배지의 내용만 볼 수 있습니다. 상황에 따라 이러한 배지는 문장, 링크 또는 버튼 끝에 임의의 추가 단어나 숫자처럼 보일 수 있습니다.
컨텍스트가 명확하지 않은 경우('읽지 않은 메시지' 예에서 '4'가 알림 수인 것으로 이해됨) 시각적으로 숨겨진 추가 텍스트 조각에 추가 컨텍스트를 포함하는 것을 고려하세요.
1 2 3 4 | <button type="button" class="btn btn-primary">
个人中心 <span class="badge bg-secondary">9</span>
<span class="visually-hidden">未读消息</span>
</button>
|
로그인 후 복사
이 숨겨진 라벨은 사용자 앞에 표시되지 않으며 마우스를 올렸을 때 프롬프트가 표시되지 않습니다. 마우스를 올렸을 때 프롬프트를 표시하려면 제목을 추가할 수 있습니다. 버튼 또는 배지의 차이점은 버튼에 추가된다는 것입니다. 마우스를 전체 버튼 위에 올리면 프롬프트가 표시되고, 스팬 태그에는 마우스가 가리킬 때만 표시됩니다. 호버링 시 지연이 발생하며 몇 초 동안 그 위에 올려 놓아야 합니다.
1 2 3 4 5 6 7 | <button type="button" class="btn btn-primary">
个人中心 <span class="badge bg-secondary" title="您有9条未读消息" >9</span>
</button>
<button type="button" class="btn btn-primary" title="您有9条未读消息" >
个人中心 <span class="badge bg-secondary" >9</span>
</button>
|
로그인 후 복사
4가지 배경색
제공된 유틸리티 클래스를 사용하여 배지 모양을 빠르게 변경하세요. Bootstrap의 기본 .bg-light를 사용할 때 올바른 스타일을 얻으려면 .text-dark와 같은 텍스트 색상 유틸리티가 필요할 수 있습니다. 이는 배경 유틸리티가 배경색만 설정하기 때문입니다.
1 2 3 4 5 6 7 8 | <span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
|
로그인 후 복사
5개의 캡슐 배지
.rounded-pill 유틸리티 클래스를 사용하여 배지를 더 둥글게 만들고 테두리 반경을 더 크게 만듭니다.
1 2 3 4 5 6 7 8 | <span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
|
로그인 후 복사
부트스트랩에 대한 자세한 내용을 보려면
부트스트랩 기본 튜토리얼을 방문하세요! !
위 내용은 Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
