Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법에 대한 간략한 분석-부트스트랩 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2021-11-30 19:07:32

앞으로

2818명이 탐색했습니다.

Bootstrap에서 배지 아이콘 구성 요소를 사용하는 방법은 무엇입니까? 다음 글에서는 코드 예제를 통해 Bootstrap5 Badge 배지 아이콘 구성 요소의 사용법을 설명하겠습니다.

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

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