이 문서에서는 부트스트랩 배지의 사용법을 설명하기 위해 다음과 같은 관점을 다룹니다.
- 추가 정보를 위해 부트스트랩 배지를 사용하는 방법은 무엇입니까?
- 컨텍스트 정보에 부트스트랩 배지를 사용하는 방법은 무엇입니까?
- 부트스트랩 배지에 사용자 지정 스타일을 추가하는 방법은 무엇입니까?
- Bootstrap 배지에 아이콘을 추가하는 방법은 무엇입니까?
- 부트스트랩 배지를 다른 소스에 연결하는 방법은 무엇입니까?
- 배지를 둥글게 만드는 방법?
- 부트스트랩 배지를 카운터로 사용하는 방법?
Bootstrap 배지는 무엇입니까?
배지는 지표를 표시하는 데 사용되는 기본 구성 요소입니다. 예를 들어 알림 또는 메시지 수를 표시하는 숫자 카운터로 사용할 수 있습니다.
주어진 이미지에 표시된 것과 같은 추가 정보를 표시하는 데 사용할 수도 있습니다.
추가 정보를 위해 부트스트랩 배지를 사용하는 방법은 무엇입니까?
부트스트랩 배지는 추가 정보로 사용하기 위해 HTML 요소 내에 추가할 수 있습니다. 데모에 대해 아래에 언급된 예를 확인하십시오.
예
추가 정보에 Bootstrap 배지를 사용하려면 먼저 다음을 수행하십시오.
- 추가하다 ' ' 그리고 ' ” 요소.
- 두는 ' <스팬> ” 요소에 “ 배지 ' 그리고 ' 배지-* ' 클래스. 'badge-*' 클래스는 지정된 색상의 배지를 참조합니다.
< h6 > 장학금 < 기간 수업 = '배지 배지-보조' > 새로운 < / 기간 >< / h6 >
관련 제목에 두 개의 배지가 추가된 것을 볼 수 있습니다.
컨텍스트 정보에 부트스트랩 배지를 사용하는 방법은 무엇입니까?
부트스트랩 배지는 '와 같은 컨텍스트 정보를 제공하는 데에도 사용할 수 있습니다. 배지 위험 ” 배지를 빨간색으로 표시하고 취소, 유효하지 않음 등과 같은 일부 실패한 메시지를 표시하는 데 사용할 수 있습니다. “ 배지 성공 ”는 성공 메시지를 표시하려는 경우에 사용됩니다.
예
논의된 시나리오를 이해하려면 주어진 코드를 살펴보십시오.
< 기간 수업 = '배지 배지 위험' >계정이 확인되지 않음< / 기간 >< 기간 수업 = '배지 배지 정보' >뱃지입니다< / 기간 >
< 기간 수업 = '배지 배지 경고' >계정 대기 중 ~을 위한 승인< / 기간 >
< 기간 수업 = '배지 배지-성공' >계정이 확인됨< / 기간 >
산출
부트스트랩 배지에 사용자 지정 스타일을 추가하는 방법은 무엇입니까?
CSS를 사용하여 부트스트랩 배지에 고유한 스타일을 추가할 수도 있습니다. 더 나은 이해를 위해 '라는 이름의 클래스 커스텀 '가 '안에 추가되었습니다. <스팬> ' 요소. 그런 다음 다음 속성이 적용됩니다.
< 기간 수업 = '배지 배지-위험 맞춤' >계정이 확인되지 않음 < / 기간 >< 기간 수업 = '배지 배지 정보 맞춤' >뱃지입니다< / 기간 >
< 기간 수업 = '뱃지 뱃지-경고 커스텀' >계정 대기 중 ~을 위한 승인< / 기간 >
< 기간 수업 = '배지 배지-성공 맞춤' >계정이 확인됨< / 기간 >
스타일 '커스텀' 클래스
.커스텀 {글꼴 크기 : 18픽셀 ;
글꼴 두께 : 100 ;
문자 간격 : 1px ;
심 : 8px 15픽셀 ;
}
“ .커스텀 '는 '에 액세스하는 데 사용됩니다. 커스텀 ' 수업. 다음 속성이 적용됩니다.
- “ 글꼴 크기 ” 글꼴 크기를 조정합니다.
- “ 글꼴 두께 '는 글꼴의 두께를 나타냅니다.
- “ 문자 간격 ” 문자 사이에 공백을 추가합니다.
- “ 심 ”는 요소 콘텐츠 주위에 공간을 제공합니다.
산출
Bootstrap 배지에 아이콘을 추가하는 방법은 무엇입니까?
배지에 다른 아이콘을 추가할 수도 있습니다. 이를 위해 이러한 원인에 활용할 수 있는 여러 클래스가 있습니다. 자세한 내용은 멋진 글꼴 웹사이트.
예
HTML에서 ' <스팬> ' 요소. 이 요소 내에 인라인 요소 ' ' 또는 ''을 배치하여 아이콘 클래스를 삽입합니다.
< 기간 수업 = '배지 배지-위험 맞춤' > 계정이 확인되지 않음< 나 수업 = '멀리 fa-times-circle' >< / 나 >
< / 기간 >
< 기간 수업 = '배지 배지-성공 맞춤' > 계정 확인됨
< 나 수업 = 'fas fa-user-check' >< / 나 >
< / 기간 >
산출
부트스트랩 배지를 다른 소스에 연결하는 방법은 무엇입니까?
Bootstrap 배지를 클릭할 수 있게 하려면 ' 배지 ' HTML 내의 클래스 ' <아> ” 태그를 추가하고 “ 헥사 ' 기인하다:
< ㅏ 헥사 = '#' 수업 = '배지 배지-위험 맞춤' >취소< / ㅏ >< ㅏ 헥사 = '#' 수업 = '배지 배지 정보 맞춤' >제출< / ㅏ >
산출
배지를 둥글게 만드는 방법?
배지 가장자리를 더 둥글게 만들려면 클래스 ' 배지 알약 '. 이 클래스는 더 큰 ' 경계 반경 ” 및 수평 “ 심 ' 속성:
< 기간 수업 = '배지 배지 알약 배지 위험 맞춤' >계정이 확인되지 않음 < / 기간 >< 기간 수업 = '배지 배지-알약 배지-경고 맞춤' >계정 대기 중 ~을 위한 승인< / 기간 >
< 기간 수업 = '배지 배지 알약 배지 성공 맞춤' >계정 확인됨 < / 기간 >
산출
부트스트랩 배지를 카운터로 사용하는 방법?
카운터가 있는 버튼을 만들려면 HTML ' <버튼> ” 유형이 있는 태그 “ 단추 ” 버튼 클래스를 지정하고 “ btn ' 그리고 ' btn-성공 '. 그런 다음 ' <스팬> ” 카운터를 배치하는 요소:
< 단추 유형 = '단추' 수업 = 'btn btn-성공' >알림 < 기간 수업 = '배지 배지 라이트' > 4 < / 기간 >
< / 단추 >
산출
Bootstrap 배지와 Bootstrap의 관련 레이블에 관한 모든 것입니다.
결론
부트스트랩 ' 배지 ” 클래스는 웹 사이트에 배지를 추가하는 데 활용됩니다. 예를 들어 ' 배지 위험 ”, “ 배지 정보 ” 등을 사용하여 배지에 컨텍스트 정보를 레이블로 추가할 수 있습니다. '와 같은 아이콘을 배지에 추가하기 위해 일부 클래스가 적용됩니다. 멀리 fa-times-circle ”를 클릭하여 교차 원 아이콘을 배치합니다. 이 게시물은 부트스트랩 배지 및 레이블에 대한 포괄적인 가이드를 제공했습니다.