> 웹 프론트엔드 > CSS 튜토리얼 > 부트스트랩 도구 설명 색상을 어떻게 사용자 정의할 수 있나요?

부트스트랩 도구 설명 색상을 어떻게 사용자 정의할 수 있나요?

DDD
풀어 주다: 2024-12-07 11:34:13
원래의
238명이 탐색했습니다.

How Can I Customize Bootstrap Tooltip Colors?

Bootstrap 도구 설명 색상 사용자 정의

기본적으로 Bootstrap의 도구 설명은 단일 색상으로 제공됩니다. 그러나 다양한 색상 변형을 원하는 상황이 발생할 수 있습니다. 다음은 이 사용자 정의를 수행하기 위한 포괄적인 가이드입니다.

CSS 사용

도구 설명 색상을 변경하려면 도구 설명을 트리거하는 요소에 사용자 정의 클래스를 추가하세요.

<a href="#" data-toggle="tooltip" data-placement="bottom"
title="" data-original-title="Tooltip on bottom"
class="red-tooltip"></a>
로그인 후 복사

CSS에서 사용자 정의 스타일을 정의합니다. class:

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {
  background-color: #f00;
}
로그인 후 복사

빨간색 도구 설명 클래스가 있는 요소의 도구 설명 색상이 빨간색으로 변경됩니다.

특정 도구 설명 게재위치 타겟팅

툴팁 배치를 기반으로 색상 사용자 정의가 필요한 경우 다음을 고려하십시오. 다음:

부트스트랩 4 이전 버전의 경우

.red-tooltip + .tooltip.top > .tooltip-arrow {
  background-color: #f00;
}
로그인 후 복사

상단에 배치된 툴팁을 대상으로 하며 툴팁 화살표에 빨간색을 적용합니다.

부트스트랩 4 및 위

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00;
}
로그인 후 복사

하단에 배치되는 툴팁의 색상을 지정하는 코드입니다. x-placement 속성의 게재위치를 수정하여 다른 게재위치를 타겟팅할 수 있습니다.

추가 리소스 및 데모

위 방법을 사용해 보려면 다음 페이지를 방문하세요. jsFiddle:
[fiddle link]

다음 단계를 따르면 귀하의 디자인 요구사항에 맞게 맞춤형 툴팁 색상을 생성할 수 있습니다.

위 내용은 부트스트랩 도구 설명 색상을 어떻게 사용자 정의할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿