Выпадающее меню Bootstrap striped

Question

Каков наилучший способ достижения «полосатых» пунктов меню в раскрывающемся меню Bootstrap? Я хочу, чтобы чередующиеся пункты меню имели слегка отличающееся фоновое затенение, чтобы создавать элементы выпадающего списка, которые охватывают несколько строк, более явно один элемент.

Answer 1

Вы можете использовать Pseudo Classes. См пример

.dropdown-menu > li:nth-child(odd) { 
 
    background: #f5f5f5; 
 
} 
 
.dropdown-menu > li:nth-child(even) { 
 
    background: #a94442; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<hr> 
 
<div class="container"> 
 
    <!-- Single button --> 
 
    <div class="btn-group"> 
 
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span> 
 

 
    </button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a> 
 

 
     </li> 
 
     <li><a href="#">Another action</a> 
 

 
     </li> 
 
     <li><a href="#">Something else here</a> 
 

 
     </li> 
 
     <li><a href="#">Something else here</a> 
 

 
     </li> 
 
     <li><a href="#">Something else here</a> 
 

 
     </li> 
 
     <li><a href="#">Something else here</a> 
 

 
     </li> 
 
     <li><a href="#">Something else here</a> 
 

 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<hr>