집 >웹 프론트엔드 >부트스트랩 튜토리얼 >Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석
Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석
- 青灯夜游앞으로
- 2021-11-30 19:07:322816검색
Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법은 무엇입니까? 다음 글에서는 코드 예제를 통해 Bootstrap5 Badge 배지 아이콘 구성 요소의 사용법을 설명하겠습니다.
1 배지 구조
배지는 일반적으로 탐색 모음, 제목, 버튼 및 아바타 오른쪽의 작은 영역에 사용되며, 읽지 않은 메시지 수를 세거나 새 릴리스를 식별하는 데 사용됩니다. 인기 핫 등 상대 글꼴 크기와 em 단위를 사용하면 직접 상위 요소의 크기에 맞게 배지 크기를 조정할 수 있습니다. Bootstrap 5부터 배지에는 더 이상 링크 포커스나 호버 스타일이 없습니다. [관련 추천: "부트스트랩 튜토리얼"]
배지의 구조는 매우 간단합니다. 두 개의 클래스가 포함된 스팬 태그입니다. bg-*是背景颜色。还可以用text-*
<span class="badge bg-secondary">文字内容</span>2 배지를 텍스트로 사용할 경우배지를 텍스트로 사용할 경우 텍스트에 맞게 크기가 자동으로 조정됩니다.
<!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>
<button type="button" class="btn btn-primary"> 未读消息 <span class="badge bg-secondary">4</span> </button>
<button type="button" class="btn btn-primary">
个人中心 <span class="badge bg-secondary">9</span>
<span class="visually-hidden">未读消息</span>
</button>
<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>
<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>
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제