Composant Dropdowns de Bootstrap v3

Question

GrosQuick

12 Sep 2013 à 14:49

Bonjour à tous,
J'ai un problème d'utilisation du composant Dropdowns de Bootstrap v3.
Voilà le code de ma page :

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Ma page Web</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="assets/js/html5shiv.js"></script>
	<script src="assets/js/respond.min.js"></script>
	<![endif]-->
</head>
<body>
<div class="dropdown">
	<a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Truc</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Machin</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chose</a></li>
		<li role="presentation" class="divider"></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Bidule</a></li>
	</ul>
</div>
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script src="dist/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

Je ne vois pas mon composant. En analysant le code généré, je vois que la classe .dropdown-menu à un

display: none;

.
Voici le CSS complet :

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid 
rgba(0,0,0,0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
box-shadow: 0 6px 12px rgba(0,0,0,0.175);
background-clip: padding-box;
}

Par contre si j'utilise la classe .open dans

<div class="dropdown open">

, le sélecteur CSS change et me met :

.open > .dropdown-menu {
display: block;
}

Donc cela s'affiche bien. Mais ce que je ne comprends pas, c'est que ce n'est pas le code montrer dans la page d'exemple de Bootstrap : Dropdown.
Et en plus, initialement j'ai fait un "bête" Copier/Coller pour comprendre comment cela fonctionnait !

Est-ce que quelqu'un aurait une idée ?
Merci d'avance pour votre aide.

Sujet clos

CSS et mise en forme, CSS3

Composant Dropdowns de Bootstrap v3