Как я могу изменить дизайн кнопки выгрузки бутстрапа

Question

Я новичок в интерфейсе. Я хочу изменить дизайн кнопки бутстраповской ниспадающей так: picture

Bootstrap кода выпадающего:

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 

Как я могу изменить его в соответствии с вышеупомянутой картиной?

Answer 1

увидеть мой код ниже или это fiddle для работы демо

.dropdown-menu>li>a{ 
    color: red; 
     padding: 3px 10px; 
} 
.dropdown-menu>li>a .fa{ 
     margin-right: 5px; 
} 

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li> 
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li> 
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li> 
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li> 
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li> 
    </ul> 
</div> 

Answer 2

Там же много способов ..

1. Создайте новый класс CSS с собственным стилем, а затем добавить класс в JQuery по умолчанию выпадающий
2. Overide JQuery класс

Ex для числа 1: Создать новый класс CSS:

.newDropdown { 
     background-color: #ddd; 
     color: #fff 
     border: 1px solid #000 
    } 

затем добавить .newDropdown в свой HTML

<ul class="dropdown-menu newDropdown" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 

Ex для числа 2:

Просто overide класс:

.dropdown-menu { 
    background-color: #777; 
} 

.dropdown-menu li { 
    padding: 10px 
} 

Или вы можете прочитать этот ответ для справки (даже если они используют select): How to style a <select> dropdown with CSS only without JavaScript?