Wie kann ich das Design der Bootstrap-Dropdown-Taste ändern

Question

Ich bin neu im Front-End. Ich möchte wie dieser Entwurf der Bootstrap-Drop-Down-Taste ändern: picture

Bootstrap Drop-Down-Code:

<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> 

Wie kann ich es ändern nach oben Bild?

Answer 1

siehe meinen Code unten oder diese fiddle für

Demo arbeiten

.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

Es gibt viele Möglichkeiten, ..

1. Erstellen Sie eine neue CSS-Klasse mit Ihren eigenen Stil und dann die Klasse zu Ihrem Standard jquery hinzufügen Drop-Down-
2. Overide jquery Klasse

Ex für Nummer 1: neue CSS-Klasse erstellen:

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

dann .newDropdown zu Ihrem 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 für die Nummer 2 hinzufügen:

Gerade overide die Klasse:

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

.dropdown-menu li { 
    padding: 10px 
} 

Oder Sie können diese Antwort als Referenz lesen (selbst wenn sie ausgewählt haben): How to style a <select> dropdown with CSS only without JavaScript?