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">
it.
</ 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">
Menu a discesa (discesa) <span class = "cursore"> </ span>
</a>
<Ul class = "discesa-menu" role = "menu" aria-labelledby = "dlabel">
it.
</ 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:
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: