Latest web development tutorials

menu a discesa Bootstrap (discesa) widget di

Bootstrap menu a discesa Questo capitolo illustra il menu a discesa, ma non legato alla parte di interazione, capitolo spiegherà in dettaglio l'interazione del menu a discesa. Utilizzare il menu a discesa (discesa) plug-in, è possibile aggiungere un menu a discesa per uno dei componenti (come barra di navigazione, le schede, le capsule, menu di navigazione, pulsanti, ecc).

Se si vuole fare riferimento alle singole funzioni di plug-in, è necessario fare riferimentodropdown.js.O, come Bootstrap plug Panoramica capitolo citato, è possibile fare riferimento abootstrap.jso versione compressa delbootstrap.min.js.

uso

È possibile passare CHIUDI discesa (discesa) plug-in:

  • Attraverso gli attributi dei dati: un link o pulsante per aggiungere dati a commutazione = "discesa"menu a discesa per passare, come segue: 
    <Div class = "discesa">
  <a data-toggle="dropdown" menu a discesa href="#"> (discesa) grilletto </a>
  <Ul class = "discesa-menu" role = "menu" aria-labelledby = "dlabel">
    ...
  </ Ul>
</ Div>

    Se è necessario mantenere il legame intatto (utile quando il browser non è abilitato JavaScript), si prega di utilizzare l'attributodata-obiettivo al posto del href = "#":

    <Div class = "discesa">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Menu a discesa (discesa) <span class = "cursore"> </ span>
  </a>


  <Ul class = "discesa-menu" role = "menu" aria-labelledby = "dlabel">
    ...
  </ Ul>
</ Div>
  • Con JavaScript: per passare JavaScript richiamando il menu a discesa, si prega di utilizzare il seguente metodo:
    $ ( '. Discesa-Toggle'). Discesa ()

Esempi

Nella barra di navigazione

L'esempio seguente dimostra l'uso del menu a discesa barra di navigazione:

Esempi

<Nav class = "navbar navbar-default" role = "navigazione"> <div class = "contenitore-fluida"> <div class = "navbar-header"> <A class = "navbar-brand" href = "#"> esercitazione </ a> </ Div> <Div> <ul class = "nav navbar-nav" > <Li class = "attiva"> <a href = "#"> iOS < / a> </ li> <LI> <a href = "#"> SVN < / a> </ li> <Li class = "discesa"> <A href = "#" class = "discesa-Toggle" Dati-Toggle = "discesa"> Java <b class = "cursore"> </ b> </ A> <ul class = "discesa-menu"> <LI> <a href = "#"> jmeter < / a> </ li> <LI> <a href = "#"> EJB < / a> </ li> <LI> <a href = "#"> Jasper Rapporto </ a> </ li> <Li class = "divider"> </ li> <LI> <a href = "#"> isolato legame </ a> </ li> <Li class = "divider"> </ li> <LI> <a un altro collegamento isolato href = "#"> </ a> </ li> </ Ul> </ Li> </ Ul> </ Div> </ Div> </ Nav>

Prova »

I risultati sono i seguenti:

In una scheda all'interno

L'esempio seguente dimostra l'uso della scheda nel menu a discesa:

Esempi

<P> tag con un menu a tendina pagina </ p> <ul class = "nav nav-tabs" > <Li class = "attiva"> <A href = "#"> Home < / a> </ li> <LI> <A href = "#"> SVN < / a> </ li> <LI> <A href = "#"> iOS < / a> </ li> <LI> <A href = "#"> VB.Net < / a> </ li> <Li class = "discesa"> <A class = "discesa-Toggle" Dati-Toggle = "discesa" href = "#"> Java < arco class = "cursore"> </ span> </ a> <ul class = "discesa-menu"> <LI> <A href = "#"> Altalena < / a> </ li> <LI> <A href = "#"> jMeter < / a> </ li> <LI> <A href = "#"> EJB < / a> </ li> <Li class = "divider"> </ li> <LI> <A href = "#"> isolato legame </ a> </ li> </ Ul> </ Li> <LI> <A href = "#"> PHP < / a> </ li> </ Ul>

Prova »

I risultati sono i seguenti:

Schede con menu a discesa

Opzioni

Non ci sono opzioni.

modo

Menu a discesa per passare c'è un modo semplice per visualizzare o nascondere il menu a discesa. 

$ (). Discesa ( 'Toggle')

Esempi

L'esempio seguente mostra il menu a tendina (discesa) metodo di plug-in:

Esempi

<Nav class = "navbar navbar-default" role = "navigazione"> <div class = "contenitore-fluida"> <div class = "navbar-header"> <A class = "navbar-brand" href = "#"> W3Cschool < / a> </ Div> <div id = "myExample"> <ul class = "nav navbar-nav" > <Li class = "attiva"> <A href = "#"> iOS < / a> </ Li> <LI> <A href = "#"> SVN < / a> </ Li> <Li class = "discesa"> <A href = "#" class = "discesa-Toggle" Dati-Toggle = "discesa"> Java <b class = "cursore"> </ b> </ A> <ul class = "discesa-menu"> <LI> <A id = "action-1" href = "#"> jmeter < / a> </ Li> <LI> <A href = "#"> EJB < / a> </ Li> <LI> <A href = "#"> Jasper Rapporto </ a> </ Li> <Li class = "divider"> </ li> <LI> <A href = "#"> collegamento isolato </ a> </ Li> <Li class = "divider"> </ li> <LI> <A href = "#"> un altro link isolato </ a> </ Li> </ Ul> </ Li> </ Ul> </ Div> </ Div> </ Nav> </ Div> <Script> $ (function () {$ ( "discesa-Toggle".) Discesa ( 'Toggle') ;.}); </ script>

Prova »

I risultati sono i seguenti:

Fisso all'inizio