부트 스트랩 목록의 색상을 변경하는 방법은 무엇입니까?

부트 스트랩 목록의 색상은 클래스 이름으로 지정할 수 있으며 텍스트-프라이팬과 같은 부트 스트랩과 함께 제공되는 실제 도구 클래스를 사용하여 색상을 설정할 수 있습니다. 사전 설정 색상을 덮어 쓰야하는 경우 CSS를 사용하여 부트 스트랩 스타일을 직접 덮어 쓰거나 사용자 정의 클래스 이름을 추가하고 CSS 스타일을 설정할 수 있습니다. 의사 클래스 선택기 및 미디어 쿼리와 같은 고급 CSS 기술을 통해보다 복잡한 목록 색상 효과를 달성 할 수 있습니다.

부트 스트랩 목록이 색상 변경? 이 질문은 간단 해 보이지만 실제로 비밀이 있습니다. CSS 속성 만 변경하는 것이 너무 쉽다고 생각하십니까? Humph, 나는 당시에 너무 순진했다. 이 게시물에서는 염색 예술의 부트 스트랩 목록에 깊이 들어가서 더 이상 귀를 긁지 않고 색상 문제를 해결할 것입니다. 그것을 읽은 후에, 당신은 부트 스트랩의 스타일 메커니즘과 CSS를 사용하여 유연하게 기술을 더 깊이 이해하고, 그것으로부터 배우고 더 많은 스타일 문제를 해결할 수 있습니다.

기본 사항에 대해 먼저 이야기 해 봅시다. 부트 스트랩은 클래스 이름을 사용하여 스타일을 제어하므로이를 이해해야합니다. 일부 프레임 워크만큼 화려하지 않으므로 사전 정의 된 색상 클래스를 직접 제공합니다. 부트 스트랩의 목록 스타일은 실제로 주로 <ul></ul> , <ol></ol> 및 <li> 태그 및 클래스 이름으로 정의되어 있음을 알아야합니다. 색상을 변경하려면 가장 직접적인 방법은 부트 스트랩과 함께 제공되는 실제 도구를 사용하는 것입니다.

예를 들어, 목록 항목이 파란색으로 바뀌려면 다음을 수행 할 수 있습니다.

 <code class="html"><ul class="list-group"> <li class="list-group-item text-primary">Item 1</li> <li class="list-group-item text-primary">Item 2</li> <li class="list-group-item text-primary">Item 3</li> </ul></code>

text-primary Bootstrap에서 제공하는 파란색 스타일 클래스입니다. text-secondary , text-success , text-danger 등과 같은 다른 색상 클래스를 검색 할 수 있습니다. 단순하고 원유는 있지만 효과적입니다.

그러나 Bootstrap의 사전 설정된 색상이 충분하지 않을 수 있습니다. 어떻게해야합니까? 현재 CSS 기술을 사용해야합니다. 부트 스트랩 스타일을 직접 우선 할 수 있습니다.

 <code class="css">.list-group-item { color: #FF69B4; /* Pink! */ }</code>

이 코드는 모든 목록 항목의 텍스트 색상을 분홍색으로 변경합니다. 이 방법은 비교적 거칠고 모든 목록 항목에 영향을 미칩니다. 특정 목록 항목의 색상을 변경하려면 더 세분화 된 제어가 필요합니다. 목록 항목에 사용자 정의 클래스 이름을 추가 할 수 있습니다.

 <code class="html"><ul class="list-group"> <li class="list-group-item my-pink-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul> <style> .my-pink-item { color: #FF69B4; } </style></code>

이런 식으로 my-pink-item 클래스가있는 항목 만 분홍색으로 변합니다. CSS 우선 순위가 중요하며 사용자 정의 스타일이 부트 스트랩의 기본 스타일을 무시해야합니다.

이것은 빙산의 일각 일뿐입니다. 의사 클래스 선택기, 미디어 쿼리 등과 같은 고급 CSS 기술을 사용하여보다 복잡한 목록 색상 효과를 달성 할 수 있습니다. 예를 들어, 목록 항목의 상태 (예 : 마우스 호버)에 따라 색상을 변경할 수 있습니다.

마지막으로, 작은 조언 : 프레임 워크와 함께 제공되는 스타일에 너무 의존하지 마십시오. CSS를 유연하게 사용하는 법을 배우는 것만으로도 프론트 엔드의 본질을 진정으로 마스터 할 수 있습니다. 프레임 워크는 단지 도구 일 뿐이며 궁극적 인 제어는 여전히 당신의 손에 있습니다. 코드의 우아함이 또한 미학적이라는 것을 잊지 마십시오.

위 내용은 부트 스트랩 목록의 색상을 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!