I need something like this:
<input type="image" src="~/Images/meu-icone.png" style="max-height: 15px;" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<ul class="dropdown-menu">
<li><a href="#">5</a></li>
</ul>
</input>
This even works, but it gets broken, because a input can not have a ul inside. The idea is to click on the image and open the list below to select any option.
Actually, bootstrap does not require you to use only a button element to activate the dropdown. You can verify this by looking at the Twitter sources of Twitter Boostrap, so you will see that .dropdown classes are not subordinated to any specific element just because it can not always be a button that will activate the dropdown menu.
That said, here's the full code of what you want:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
img#dropdownMenu1 {
/* na verdade essa largura varia de acordo com o maiio link.
Defini isso apenas por estética. :)
*/
width: 172px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="dropdown">
<!-- Imagem como botão -->
<img src="http://s4.postimg.org/5i8je2bml/avatar.png"id="dropdownMenu1" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true">
<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><a href="#">Separated link</a></li>
</ul>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>