O melhor tutorial menu suspenso Bootstrap (suspensa) Widget em 2024. Neste tutorial você pode aprender
uso,Exemplos,Exemplos,opções,caminho,Exemplos,
menu suspenso Bootstrap (suspensa) Widget
Bootstrap menu dropdown Este capítulo explica o menu drop-down, mas não relacionado com a parte de interação, este capítulo irá explicar em detalhe a interação do menu drop-down. Utilize o menu suspenso (drop-down) plug-in, você pode adicionar um menu drop-down para qualquer um dos componentes (tais como barra de navegação, guias, cápsulas, menus de navegação, botões, etc.).
Se você quiser para se referir às características individuais de plug-in, você precisa fazer referênciadropdown.js.Ou, como Bootstrap plug-in Overview capítulo mencionado, você pode se referir abootstrap.jsou versão comprimida debootstrap.min.js.
uso
Você pode alternar FECHAR suspensa (drop-down) plug-in:
- Através de atributos de dados: um link ou botão para adicionar dados-toggle = "dropdown"menu drop-down para mudar, como segue:
<Div class = "dropdown">
<a data-toggle="dropdown" menu drop-down href="#"> (suspensa) gatilho </a>
<Class Ul = "dropdown-menu" role = "menu" aria-labelledby = "dlabel">
pt.
</ Ul>
</ Div>
Se você precisa manter a ligação intacta (útil quando o navegador não está habilitado JavaScript), utilize oatributo-alvo dados em vez de href = "#":
<Div class = "dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page">
menu (suspensa) suspenso <span class = "acento circunflexo"> </ span>
</a>
<Class Ul = "dropdown-menu" role = "menu" aria-labelledby = "dlabel">
pt.
</ Ul>
</ Div>
- Por JavaScript: JavaScript chamando o menu drop-down para mudar, por favor use o seguinte método:
$ ( '. Dropdown-toggle "). Suspensa ()
Exemplos
Na barra de navegação
O exemplo a seguir demonstra o uso do menu drop-down barra de navegação:
Exemplos
<Nav class = "navbar navbar-default" role = "navegação">
<Div class = "recipiente de líquido">
<Div class = "navbar-header">
<A class = "navbar-brand" href = "#"> tutorial </ a>
</ Div>
<Div>
<Ul class = "nav navbar-nav" >
<Li class = "ativo"> <a href = "#"> iOS < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "dropdown">
<A href = "#" class = "dropdown-toggle" Dados-toggle = "dropdown"> Java <b class = "acento circunflexo"> </ b>
</ A>
<Ul class = "dropdown-menu">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Relatório Jasper </ a> </ li>
<Li class = "divisor"> </ li>
<Li> <a href = "#"> isolado ligação </ a> </ li>
<Li class = "divisor"> </ li>
<Li> <a href = "#"> outro link isolado </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
tente » Os resultados são os seguintes:
Em uma guia dentro
O exemplo a seguir demonstra o uso da guia no menu drop-down:
Exemplos
<P> tag com uma página menu suspenso </ p>
<Ul class = "nav nav-tabs" >
<Li class = "ativo">
<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 = "dropdown">
<A class = "dropdown-toggle" Dados-toggle = "dropdown" href = "#"> Java < extensão class = "acento circunflexo"> </ span> </ a>
<Ul class = "dropdown-menu">
<Li>
<A href = "#"> Balanço < / a> </ li>
<Li>
<A href = "#"> jMeter < / a> </ li>
<Li>
<A href = "#"> EJB < / a> </ li>
<Li class = "divisor"> </ li>
<Li>
<A href = "#"> isolado ligação </ a> </ li>
</ Ul>
</ Li>
<Li>
<A href = "#"> PHP < / a> </ li>
</ Ul>
tente » Os resultados são os seguintes:
opções
Não há opções.
caminho
Drop-down menu para alternar há uma maneira simples de exibir ou ocultar o menu drop-down.
$ (). Suspensa ( 'alternância')
Exemplos
O exemplo a seguir demonstra o método plug-in menu suspenso (drop-down):
Exemplos
<Nav class = "navbar navbar-default" role = "navegação">
<Div class = "recipiente de líquido">
<Div class = "navbar-header">
<A class = "navbar-brand" href = "#"> W3Cschool < / a>
</ Div>
<Div ID = "myExample">
<Ul class = "nav navbar-nav" >
<Li class = "ativo">
<A href = "#"> iOS < / a>
</ Li>
<Li>
<A href = "#"> SVN < / a>
</ Li>
<Li class = "dropdown">
<A href = "#" class = "dropdown-toggle" Dados-toggle = "dropdown"> Java <b class = "acento circunflexo"> </ b>
</ A>
<Ul class = "dropdown-menu">
<Li>
<A id = "action-1" href = "#"> jmeter < / a>
</ Li>
<Li>
<A href = "#"> EJB < / a>
</ Li>
<Li>
<A href = "#"> Relatório Jasper </ a>
</ Li>
<Li class = "divisor"> </ li>
<Li>
<A href = "#"> isolado ligação </ a>
</ Li>
<Li class = "divisor"> </ li>
<Li>
<A href = "#"> outro link isolado </ a>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
</ Div>
<Script> $ (function () {$ ( "dropdown-toggle".) Suspensa ( 'alternância') ;.}); </ script>
tente » Os resultados são os seguintes: