menu déroulant Bootstrap (Dropdown) un widget
Bootstrap Menu déroulant Ce chapitre explique le menu déroulant, mais pas liée à la partie d'interaction, ce chapitre vous expliquera en détail l'interaction du menu déroulant. Utilisez le menu déroulant (Dropdown) plug-in, vous pouvez ajouter un menu déroulant à l'un des composants (tels que la barre de navigation, les onglets, les capsules, les menus de navigation, boutons, etc.).
Si vous voulez faire référence à des caractéristiques individuelles de plug-in, vous devez référencerdropdown.js.Ou, comme Bootstrap plug - in Présentation du chapitre mentionné, vous pouvez vous référer àbootstrap.jsou version compressée debootstrap.min.js.
usage
Vous pouvez activer le menu déroulant hide (Dropdown) plug-in:
- Grâce à des données attributs:un lien ou un bouton pour ajouter desdonnées-toggle = "dropdown"menu déroulant pour passer, comme suit:
<Class Div = "déroulant">
<a data-toggle="dropdown" menu déroulant href="#"> (Dropdown) trigger </a>
<Class Ul = "liste déroulante-menu" role = "menu" aria-labelledby = "dlabel">
fr.
</ Ul>
</ Div>
Si vous avez besoin de garder le lien intact (utile lorsque le navigateur est pas activé JavaScript), s'il vous plaît utiliser l' attribut au lieu dehref = "#" data-cible:
<Class Div = "déroulant">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page">
Menu déroulant (Dropdown) <span class = "caret"> </ span>
</a>
<Class Ul = "liste déroulante-menu" role = "menu" aria-labelledby = "dlabel">
fr.
</ Ul>
</ Div>
- Par JavaScript: JavaScript en appelant le menu déroulant pour passer, s'il vous plaît utiliser la méthode suivante:
$ ( '. Dropdown-toggle'). Dropdown ()
Exemples
Dans la barre de navigation
L'exemple suivant illustre l'utilisation du menu déroulant barre de navigation:
Exemples
<Nav class = "navbar navbar-default" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tête">
<A class = "navbar-marque" href = "#"> tutoriel </ a>
</ Div>
<Div>
<Ul class = "nav navbar-nav" >
<Li class = "active"> <a href = "#"> iOS < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "déroulant">
<A href = "#" class = "liste déroulante-toggle" données-toggle = "déroulant"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "liste déroulante-menu">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Jasper Report </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> isolé lien </ a> </ li>
<Li class = "diviseur"> </ li>
<Li> <a href = "#"> un autre lien isolé </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
Essayez » Les résultats sont les suivants:
Dans un onglet à l'intérieur
L'exemple suivant illustre l'utilisation de l'onglet dans le menu déroulant:
Exemples
<P> avec une page Menu déroulant </ p>
<Ul class = "nav nav-onglets" >
<Li class = "active">
<A href = "#"> Accueil < / a> </ li>
<Li>
<A href = "#"> SVN < / a> </ li>
<Li>
<A href = "#"> iOS < / a> </ li>
<Li>
<A href = "#"> VB.Net < / a> </ li>
<Li class = "déroulant">
<A class = "liste déroulante-toggle" données-toggle = "déroulant" href = "#"> Java < durée class = "caret"> </ span> </ a>
<Ul class = "liste déroulante-menu">
<Li>
<A href = "#"> Balançoire < / a> </ li>
<Li>
<A href = "#"> jMeter < / a> </ li>
<Li>
<A href = "#"> EJB < / a> </ li>
<Li class = "diviseur"> </ li>
<Li>
<A href = "#"> isolé lien </ a> </ li>
</ Ul>
</ Li>
<Li>
<A href = "#"> PHP < / a> </ li>
</ Ul>
Essayez » Les résultats sont les suivants:
options de
Il n'yapasd'options.
manière
Menu déroulant pour passer il y a un moyen simple pour afficher ou masquer le menu déroulant.
$ (). Dropdown ( 'toggle')
Exemples
L'exemple suivant illustre le menu déroulant (Dropdown) méthode plug-in:
Exemples
<Nav class = "navbar navbar-default" role = "navigation">
<Div class = "container fluide">
<Div class = "navbar-tête">
<A class = "navbar-marque" href = "#"> W3Cschool < / a>
</ Div>
<Div id = "myexample">
<Ul class = "nav navbar-nav" >
<Li class = "active">
<A href = "#"> iOS < / a>
</ Li>
<Li>
<A href = "#"> SVN < / a>
</ Li>
<Li class = "déroulant">
<A href = "#" class = "liste déroulante-toggle" données-toggle = "déroulant"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "liste déroulante-menu">
<Li>
<A id = "action 1" href = "#"> jmeter < / a>
</ Li>
<Li>
<A href = "#"> EJB < / a>
</ Li>
<Li>
<A href = "#"> Jasper Report </ a>
</ Li>
<Li class = "diviseur"> </ li>
<Li>
<A href = "#"> isolé lien </ a>
</ Li>
<Li class = "diviseur"> </ li>
<Li>
<A href = "#"> un autre lien isolé </ a>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
</ Div>
<Script> $ (function () {$ ( "liste déroulante-bascule.") Dropdown ( 'toggle') ;.}); </ script>
Essayez » Les résultats sont les suivants: