Latest web development tutorials

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">
    ...
  </ 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.html">
    Menu déroulant (Dropdown) <span class = "caret"> </ span>
  </a>


  <Class Ul = "liste déroulante-menu" role = "menu" aria-labelledby = "dlabel">
    ...
  </ 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:

Tabs avec menu déroulant

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:

Fixe vers le haut