Le meilleur didacticiel menu déroulant bouton Bootstrap en 2024, dans ce didacticiel, vous pouvez apprendre
Exemples,menu déroulant bouton Fractionner,Exemples,Taille pull-down bouton de menu,Exemples,bouton de menu vers le bas,Exemples,
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:
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:
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:
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: