Twitter 부트 유효성 검사 Nav-Pills의 색상 변경

Twitter 부트 유효성 검사 Nav-Pills의 색상 변경

---

(클릭 한 후에도 유지 된 연한 파란색으로 유지).

 <ul class="nav nav-pills">
   <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
   <li><a href="#tab2" data-toggle="tab">Sample</a></li>
   <li><a href="#tab3" data-toggle="tab">Sample</a></li>
 </ul>

(어떻게) CSS에서 사용할 수 있습니까?

---

nav-pills활성 링크에 대한 사용자 정의 색상으로 컨테이너에 고유 한 클래스를 제공 할 수 있습니다. 이렇게하면 기본 색상을 수정할 수 있습니다. 원하는만큼 많은 색상을 만들 수 있습니다. 이 시도 :

마크 업

<ul class="nav nav-pills red">
    <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
    <li><a href="#tab2" data-toggle="tab">Sample</a></li>
    <li><a href="#tab3" data-toggle="tab">Sample</a></li>
</ul>

다음은 사용자 정의 색상에 대한 CSS입니다.

.red .active a,
.red .active a:hover {
    background-color: red;
}

또한 .active항목 의 기본 개 색상을 바꾸 려면 nav-pills다음과 같이 원본을 수정할 수 있습니다.

.nav-pills > .active > a, .nav-pills > .active > a:hover {
    background-color: red;
}

---

가장 많이 뽑힌 솔루션이 저에게 효과가 없었습니다. (Bootstrap 3.0.0) 그러나 이것은 다음과 같은 결과를 가져 왔습니다 .

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color:black;
    background-color:#fcd900;
    }

페이지 <style></style>태그 에 포함하면 페이지별로 잘 작동합니다.

두 가지 음영으로 혼합하면 다음과 같은 화려한 효과가 나타납니다.

<style>
    .nav-pills > li.active > a, .nav-pills > li.active > a:focus {
        color: black;
        background-color: #fcd900;
    }

        .nav-pills > li.active > a:hover {
            background-color: #efcb00;
            color:black;
        }
</style>

---

Bootstrap 4.0의 경우 (입력하는 순간 알파로) 요소에 .active클래스를 지정해야합니다 a.

나를 위해 다음과 같은 일만 일했습니다.

.nav-pills > li > a.active {
    background-color: #ff0000!important;
}

은 또한 !important필요했다.

---

이것은 Bootstrap 4.0에 해당됩니다.

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link nav-link-color" href="#about">home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link nav-link-color"  href="#contact">contact</a>
  </li>
</ul>

CSS

.nav-pills > li > a.active {
  background-color: #ffffff !important;
  color: #ffffff !important;
}

.nav-pills > li > a:hover {
  color: #ffffff !important;
}

.nav-link-color {
  color: #ffffff;
}

---

부트 유효성 4.0 솔루션

.nav-pills .nav-link.active {
    background-color: #ff0000!important;
}

---

이 snipped를 사용하여 동일한 ul의 모든 알약에 대한 활성 클래스를 변경합니다 (문서 준비시 적용됨).

$('ul.nav.nav-pills li a').click(function() {           
    $(this).parent().addClass('active').siblings().removeClass('active');           
});

---

다음 코드가 저에게 있었다.

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: rgba(0,123,255,.5);
}

참고 :-이것은 Bootstrap 4를 사용하여 나를 위해 일했습니다.

---

1 단계 : applycolor선택한 색상을 적용하는 데 사용할 수있는 이름 이 지정된 클래스를 정의 합니다.

2 단계 : 호버링 할 때 발생하는 동작을 정의합니다. 양식 배경이 흰색이면 마우스를 가져갈 때 탭이 흰색으로 바뀌지 않는지 확인해야합니다. 이를 달성하려면 !important절을 사용하여 hover 속성에이 기능을 적용합니다. 부트 스트랩의 기본 동작을 재정의하기 위해이 작업을 수행합니다.

3 단계 : 대상으로하는 탭에 클래스를 적용합니다.

CSS 섹션 :

<style>
    .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
        color: #fff;
        background-color: #337ab7 !important;
    }

    .nav > li > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: none !important;
    }

    .applycolor {
        background-color: #efefef;
        text-decoration: none;
        color: #fff;
    }

    .applycolor:hover {
        background-color: #337ab7;
        text-decoration: none;
        color: #fff;
    }
</style>

탭 섹션 :

<section class="form-toolbar row">
    <div class="form-title col-sm-12" id="tabs">
        <ul class="nav nav-pills nav-justified">
            <li class="applycolor"><a data-toggle="pill" href="#instance" style="font-size: 1.8rem; font-weight: 800;">My Apps</a></li>
            <li class="active applycolor"><a data-toggle="pill" href="#application" style="font-size: 1.8rem; font-weight: 800;">Apps Collection</a></li>
        </ul>
    </div>
</section>

---

이 문제에 대한 해결책은 경우에 따라 약간 씩 다릅니다. 이를 해결하는 일반적인 방법은 다음과 같습니다
. 1.) 부트 스트랩 알약을 마우스 오른쪽 버튼으로 클릭하고 firefox 인 경우 검사 또는 검사 요소를 선택합니다
. 2.) 색상을 변경하는 규칙에 대한 CSS 선택기를 복사합니다.
3.) 다음과 같이 사용자 정의 CSS 파일에서 수정합니다. 그래서...

.TheCssSelectorYouJustCopied{
    background-color: #ff0000!important;//or any other color
}

참고 URL : https://stackoverflow.com/questions/10560786/changing-color-of-twitter-bootstrap-nav-pills