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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!