1. Home
  2. menu déroulant Bootstrap (Dropdown) un widget

Le meilleur didacticiel menu déroulant Bootstrap (Dropdown) un widget en 2024, dans ce didacticiel, vous pouvez apprendre usage,Exemples,Exemples,options de,manière,Exemples,

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:

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

Hot Didacticiel

Nous contacter

menu déroulant Bootstrap (Dropdown) un widget
10/30