집 > 기사 > 웹 프론트엔드 > Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석

Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석

青灯夜游앞으로: 2021-11-30 19:07:322756검색

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>

Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석

3 for 버튼

배지는 링크나 버튼의 일부로 사용되어 카운터를 제공할 수 있습니다.

<button type="button" class="btn btn-primary">
   未读消息 <span class="badge bg-secondary">4</span>
</button>

Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석

배지는 사용 방법에 따라 스크린 리더 및 유사한 보조 기술 사용자에게 혼란을 줄 수 있다는 점에 유의하세요. 배지 스타일은 목적에 대한 시각적 단서를 제공하지만 이러한 사용자는 배지의 내용만 볼 수 있습니다. 상황에 따라 이러한 배지는 문장, 링크 또는 버튼 끝에 임의의 추가 단어나 숫자처럼 보일 수 있습니다.

컨텍스트가 명확하지 않은 경우('읽지 않은 메시지' 예에서 '4'가 알림 수인 것으로 이해됨) 시각적으로 숨겨진 추가 텍스트 조각에 추가 컨텍스트를 포함하는 것을 고려하세요.

<button type="button" class="btn btn-primary">
    个人中心 <span class="badge bg-secondary">9</span>
    <span class="visually-hidden">未读消息</span>
 </button>

Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석

이 숨겨진 라벨은 사용자 앞에 표시되지 않으며 마우스를 올렸을 때 프롬프트가 표시되지 않습니다. 마우스를 올렸을 때 프롬프트를 표시하려면 제목을 추가할 수 있습니다. 버튼 또는 배지의 차이점은 버튼에 추가된다는 것입니다. 마우스를 전체 버튼 위에 올리면 프롬프트가 표시되고, 스팬 태그에는 마우스가 가리킬 때만 표시됩니다. 호버링 시 지연이 발생하며 몇 초 동안 그 위에 올려 놓아야 합니다.

        <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>

Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석

4가지 배경색

제공된 유틸리티 클래스를 사용하여 배지 모양을 빠르게 변경하세요. Bootstrap의 기본 .bg-light를 사용할 때 올바른 스타일을 얻으려면 .text-dark와 같은 텍스트 색상 유틸리티가 필요할 수 있습니다. 이는 배경 유틸리티가 배경색만 설정하기 때문입니다.

<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>

Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석

5개의 캡슐 배지

.rounded-pill 유틸리티 클래스를 사용하여 배지를 더 둥글게 만들고 테두리 반경을 더 크게 만듭니다.

<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에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석

부트스트랩에 대한 자세한 내용을 보려면

부트스트랩 기본 튜토리얼을 방문하세요! !

위 내용은 Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Bootstrap에서 경고 상자 구성 요소를 사용하는 방법에 대한 심층 설명다음 기사：Bootstrap에서 경고 상자 구성 요소를 사용하는 방법에 대한 심층 설명