Latest web development tutorials

menu déroulant bouton Bootstrap

Ce chapitre explique comment utiliser la classe Bootstrap pour ajouter le bouton de menu déroulant. Pour ajouter à la touche de menu déroulant, les boutons simplement placés et des menus déroulants dans un.btn-groupe peut être.Vous pouvez également utiliser le </ span> <span class = "caret"> pour indiquer un menu déroulant.

L'exemple suivant montre un menu de base simple bouton déroulant:

Exemples

<Div class = "btn-groupe"> <Bouton type = "button" class = "btn btn-default déroulant -toggle" données-toggle = "déroulant"> Par défaut <span class = "caret"> </ span> </ Button> <Ul class = "liste déroulante-menu" role = "menu"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Une autre caractéristique </ a> </ Li> <Li> <A href = "#"> Autre </ a> </ Li> <Li class = "diviseur"> </ li> <Li> <A href = "#"> isolé lien </ a> </ Li> </ Ul> </ Div> <Div class = "btn-groupe"> <Bouton type = "button" class = "btn btn-primaire déroulante -toggle" données-toggle = "déroulant"> originale <span class = "caret"> </ span> </ Button> <Ul class = "liste déroulante-menu" role = "menu"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Une autre caractéristique </ a> </ Li> <Li> <A href = "#"> Autre </ a> </ Li> <Li class = "diviseur"> </ li> <Li> <A href = "#"> isolé lien </ a> </ Li> </ Ul> </ Div>

Essayez »

Les résultats sont les suivants:

Bouton de base Menu déroulant

menu déroulant bouton Fractionner

boutons Split et des menus déroulants en utilisant le bouton déroulant à peu près le même style, mais le menu déroulant pour ajouter à la fonction d'origine. bouton Split est à gauche des éléments d'origine, le droit est le menu déroulant pour basculer l'affichage.

Exemples

<Div class = "btn-groupe"> <Bouton type = "button" class = "btn btn-default" > par défaut </ button> <Bouton type = "button" class = "btn btn-default déroulant -toggle" données-toggle = "déroulant"> <Span class = "caret"> </ span> <Span class = "sr-only"> menu déroulant commutateur </ span> </ Button> <Ul class = "liste déroulante-menu" role = "menu"> <Li> <a href = "#"> function </ a> </ li> <Li> <a href = "#"> Une autre caractéristique </ a> </ li> <Li> <a href = "#"> Autre </ a> </ li> <Li class = "diviseur"> </ li> <Li> <a href = "#"> isolé lien </ a> </ li> </ Ul> </ Div> <Div class = "btn-groupe"> <Bouton type = "button" class = "btn-primaire btn" > originale </ button> <Bouton type = "button" class = "btn btn-primaire déroulante -toggle" données-toggle = "déroulant"> <Span class = "caret"> </ span> <Span class = "sr-only"> menu déroulant commutateur </ span> </ Button> <Ul class = "liste déroulante-menu" role = "menu"> <Li> <a href = "#"> function </ a> </ li> <Li> <a href = "#"> Une autre caractéristique </ a> </ li> <Li> <a href = "#"> Autre </ a> </ li> <Li class = "diviseur"> </ li> <Li> <a href = "#"> isolé lien </ a> </ li> </ Ul> </ Div>

Essayez »

Les résultats sont les suivants:

menu déroulant bouton Fractionner

Taille pull-down bouton de menu

Vous pouvez utiliser le menu déroulant avec une variété detaille des boutons:.btn-large, .btn-sm ouxs-.btn.

Exemples

<Div class = "btn-groupe"> <Bouton type = "button" class = "btn btn-default déroulant -toggle btn-lg" données-toggle = "déroulant"> Par défaut <span class = "caret"> </ span> </ Button> <Ul class = "liste déroulante-menu" role = "menu"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Une autre caractéristique </ a> </ Li> <Li> <A href = "#"> Autre </ a> </ Li> <Li class = "diviseur"> </ li> <Li> <A href = "#"> isolé lien </ a> </ Li> </ Ul> </ Div> <Div class = "btn-groupe"> <Bouton type = "button" class = "btn btn-primaire déroulante -toggle btn-sm" données-toggle = "déroulant"> originale <span class = "caret"> </ span> </ Button> <Ul class = "liste déroulante-menu" role = "menu"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Une autre caractéristique </ a> </ Li> <Li> <A href = "#"> Autre </ a> </ Li> <Li class = "diviseur"> </ li> <Li> <A href = "#"> isolé lien </ a> </ Li> </ Ul> </ Div> <Div class = "btn-groupe"> <Bouton type = "button" class = "btn btn-succès déroulant -toggle btn-xs" données-toggle = "déroulant"> succès <span class = "caret"> </ span> </ button> <Ul class = "liste déroulante-menu" role = "menu"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Une autre caractéristique </ a> </ Li> <Li> <A href = "#"> Autre </ a> </ Li> <Li class = "diviseur"> </ li> <Li> <A href = "#"> isolé lien </ a> </ Li> </ Ul> </ Div>

Essayez »

Les résultats sont les suivants:

Taille pull-down bouton de menu

bouton de menu vers le bas

Menu peut également être établi, il suffit d' ajouter.dropup .btn-groupedu conteneur parent.

Exemples

<Div class = "ligne" style = "margin-left: 50px ; margin-top: 200px"> <Div class = "btn-groupe dropup" > <Bouton type = "button" class = "btn btn-default déroulant -toggle" données-toggle = "déroulant"> Par défaut <span class = "caret"> </ span> </ Button> <Ul class = "liste déroulante-menu" role = "menu"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Une autre caractéristique </ a> </ Li> <Li> <A href = "#"> Autre </ a> </ Li> <Li class = "diviseur"> </ li> <Li> <A href = "#"> isolé lien </ a> </ Li> </ Ul> </ Div> <Div class = "btn-groupe dropup" > <Bouton type = "button" class = "btn btn-primaire déroulante -toggle" données-toggle = "déroulant"> originale <span class = "caret"> </ span> </ Button> <Ul class = "liste déroulante-menu" role = "menu"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Une autre caractéristique </ a> </ Li> <Li> <A href = "#"> Autre </ a> </ Li> <Li class = "diviseur"> </ li> <Li> <A href = "#"> isolé lien </ a> </ Li> </ Ul> </ Div> </ Div>

Essayez »

Les résultats sont les suivants:

bouton de menu vers le bas