Bootstrap 도구 설명의 색상을 어떻게 변경할 수 있습니까?

Bootstrap 도구 설명 색상을 변경하는 방법

Bootstrap에서 도구 설명 색상을 변경하면 웹사이트 디자인에 맞게 모양을 맞춤 설정할 수 있습니다. 이는 사용자 정의 CSS 스타일을 추가하면 가능합니다.

툴팁 색상을 변경하려면 먼저 툴팁을 사용하는 요소에 고유한 클래스를 할당하세요. 예:

<a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom" class="red-tooltip">Tooltip on bottom</a>

다음으로 다음 CSS 규칙을 추가합니다.

.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {
  background-color: #f00;
}

이렇게 하면 툴팁의 화살표와 내부 배경이 빨간색으로 변경됩니다. #f00을 원하는 색상 코드로 대체하여 툴팁 색상을 맞춤 설정할 수 있습니다.

Bootstrap 4에서는 기본 검정색을 제거하기 위해 하단 배치 화살표를 구체적으로 타겟팅해야 할 수도 있습니다.

.red-tooltip + .tooltip.top > .tooltip-arrow {
  background-color: #f00;
}

또한 Bootstrap 4의 경우 툴팁에 다음 CSS를 사용하세요.

.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #f00; /* Red */
}

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