Bootstrap как стиль навигационных списков

Question

Я использую меню начальной загрузки, как с двумя уровнями, с раскрывающимся списком. 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" in red ", 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 } 

Я надеюсь, что это помогает

Answer 3

Вы можете дать дополнительный класс для конкретных элементов списка, чтобы перезаписать дизайн по умолчанию в booststrap.

, например:

<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

Я пытался согл к WAHT вы sugest, но добавив класс и стиль dosn't работы.

например.

.red { 
    color:red; 
    } 

но

.red { 
    color:red !important; 
    } 

начало работ - Вы можете объяснить мне, почему ???