탐색 목록 스타일 지정 방법 부트 스트랩

Question

드롭 다운 메뉴가있는 2 단계 목록과 같이 부트 스트 램 메뉴를 사용하고 있습니다. 코드의 Exemple :

<ul class="nav navbar-nav">     

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Item0<span> class="caret"></span></a> 
    <ul class="dropdown-menu"> 
        <li><a href="#Item1">Item1</a></li> 
        <li><a href="#Item2">Item2</a></li> 
        <li><a href="#Item3">Item3</a></li> 
        <li><a href="#Item4">Item4</a></li> 
        <li><a href="#Item5">Item5</a></li> 

    </ul> 
</li> 
<li> 
    <ul class="nav navbar-nav"> 
        <li><a href="#Item1">Item13</a></li> 
    <ul class="dropdown-menu"> 
        <li><a href="#Item1">Item131</a></li> 
        <li><a href="#Item2">Item132</a></li> 
        <li><a href="#Item3">Item133</a></li> 
        <li><a href="#Item4">Item134</a></li> 
        <li><a href="#Item5">Item135</a></li> 

    </ul> 
        <li><a href="#Item2">Item23</a></li> 
        <li><a href="#Item3">Item33</a></li> 
    </ul> 
</li> 

CSS는 내가 색상의 일부 modyfications을하고 싶다 부트 스트랩입니다. 그러나 변경 한 경우 :

.navbar-default .nav li a{ 
... 
} 

모든 목록 요소 색상이 변경됩니다. 레벨 업 목록이 다른 반면 다른 색상으로 중첩 목록을 스타일화할 수 있습니까?

"Item0, Item13 Item23 Item33"빨간색, "Item1 .. Item5"파란색 ... 등등 ...

Answer 1

확실 : 색상을 다르게하고 배경 스타일을 지정하려는 요소에 클래스를 추가하십시오. 예

<ul class="dropdown-menu"> 
       <li><a href="#Item1" class='red'>Item131</a></li> 
       <li><a href="#Item2" class='red'>Item132</a></li> 
       <li><a href="#Item3" class='blue'>Item133</a></li> 
       <li><a href="#Item4">Item134</a></li> 
       <li><a href="#Item5">Item135</a></li> 

</ul> 

과 CSS

.red { 
... 
} 
.blue { 
... 
} 

나는이

Answer 2

당신이 클래스를 추가하여 요소의 특정 그룹 스타일을 지정할 수 있습니다 도움이되기를 바랍니다 :

<li class="yourclass"><a href="#Item1">Item1</a></li> 

를 다음에 CSS를 사용 스타일 모든 요소는 같은 클래스 :

.yourclass { color: red } 

나는이 당신은 booststrap의 기본 디자인을 덮어 특정 목록 항목에 추가 클래스를 제공 할 수 있습니다

Answer 3

도움이되기를 바랍니다. 예를 들어

:

<ul class="dropdown-menu"> 
       <li><a href="#Item1" class="custom">Item1</a></li> 
       <li><a href="#Item2">Item2</a></li> 
       <li><a href="#Item3" class="custom">Item3</a></li> 
       <li><a href="#Item4">Item4</a></li> 
       <li><a href="#Item5" class="custom">Item5</a></li> 

</ul> 

다음 새 CSS 파일의 기본 사용자 정의 디자인을 덮어 씁니다.

.custom{ 
    ..... 
} 

Answer 4

나는 sugest에 동의했지만 수업을 추가하고 스타일링 작업을하지 않았다.

.red { 
    color:red; 
    } 

하지만

.red { 
    color:red !important; 
    } 

시작 작품에 - 왜 나를 설명 할 수 ???