Menu puxador
Declaração especial: Como o efeito de interação do componente do Bootstrap é baseado em plugins escritos pela biblioteca jQuery, você deve primeiro carregar jQuery.min.js antes de usar o bootstrap.min.js para produzir efeitos.
<div> <button type = "button" id = "suspenso Menu do menu suspenso DATA-TOGGLE =" Dropdown "> </span> </button> <ul role =" menu "aria-labelledby =" DropDownMenu1 "> <li role =" Apresentation "> <a" "MenAuTem" TabIndiMux = 1 "> <i) Role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> item de menu suspenso </a> </li> <li role = "Apresentação"> <a Role = "Menuitem" Tabindex = "-1" HREF = "#"> Drop Down Itens </a "</li> <li> href = "#"> itens de menu suspensos </a> </li> </ul> </div> <!-JQuery deve ser importado antes do bootstrap, o último é implementado com base no primeiro-> <script src = "http://libs.baidu.com/jquery/1.9.0/jQuery.JS" src = "// maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </sCript>
Imagem de reprodução:
Princípio de implementação:
No começo, havia uma exibição: nenhuma na classe; Dê uma olhada no CSS abaixo
.DropDown-Menu {Posição: Absoluto;/*Defina o posicionamento absoluto, em relação ao elemento pai Div.Dropdown*/TOP: 100%;/*Deixe o item de menu suspenso na parte inferior do item do menu pai. Se o elemento pai não define o posicionamento relativo, o elemento é relativo ao elemento corporal*/esquerda: 0; Z-Index: 1000;/*Defina o item de menu suspenso não será coberto por outros elementos*/exibição: nenhum;/*oculte o menu suspenso Item: 5px; #fff; clipe de fundo: caixa de preenchimento; borda: 1px sólido #ccc; borda: 1px RGBA sólido (0, 0, 0, .15); radio de borda: 4px; -webkit-box-shadow: 0 6px 12px rgba (0, 0, 0, .175); .175);}Em seguida, use o evento de clique para controlar a remoção e a adição da classe de tags para alcançar a exibição e ocultar
Através da tecnologia JS, adicione ou remova o nome da classe "Abrir" ao contêiner pai "Div.Dropdown" para controlar a tela ou o esconderijo do menu suspenso. Isto é, por padrão,
"Div.Dropdown" não tem o nome da classe "Open". Quando o usuário clicar pela primeira vez, o nome da classe "aberto" será adicionado ao nome da classe "Open"; Quando o usuário clicar novamente, o nome da classe "Abrir" no contêiner "Div.Dropdown" será removido novamente. Podemos ver todo o processo através do Firebug do navegador:
Padrão:
O usuário clica pela primeira vez:
O usuário clica novamente:
CSS aberto
.open> .DropDown-Menu {Display: Block;}Puxe o menu Split Line
Vamos dar uma olhada no exemplo acima e colar o código! Veja o efeito, você ainda precisa apresentar o arquivo JS! Não há muitas coisas depois!
<div> <button type = "button" id = "suspenso Menu do menu suspenso DATA-TOGGLE =" Dropdown "> </span> </button> <ul role =" menu "aria-labelledby =" DropDownMenu1 "> <li role =" Apresentation "> <a" "MenAuTem" TabIndiMux = 1 "> <i) Role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> menu suspenso Item </a> </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> menu suspenso </a> </li> <i> Role = "Menuitem" Tabindex = "-1" href = "#"> Drop Down Menu Item </a> </li> </ul> </div>
Imagem de reprodução:
Na verdade, há mais uma linha de código
<li role = "Apresentação"> </li>
Título do menu suspenso
Faça o upload diretamente do código
<div> <button type = "button" id = "suspenso Menu do menu do menu suspenso </span> </button> <ul role =" menu "aria-labelledby =" DropDownMenu1 "> <li role =" Apresentation "> Parte 1 Menu Header </Li> <li role =" Apresentação "> <li role =" Apresentation "> Parte 1 Menu 1 Item de menu suspenso </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> menu suspenso item </a> </li> <li role = "Apresentação"> <a "" Menuitem "Tabindex ="-1 "href =" Apresentation "> <a" = "menuM" Role = "Apresentação"> </li> <li role = "Apresentação"> Parte 2 Cabeçalho do menu </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> suspense o menu do menu </a> </li> <role = "apresentação"> <pur = "menuTem" TABINDEX "HOURNO" 1/A> </li> <role = "" Item </a> </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> retirar o menu do menu </a> </li> </ul> </div>
Imagem de reprodução:
De fato, há apenas um código adicionado:
<li role = "Apresentação"> Parte 2 Cabeçalho do menu </li>
Alinhamento do menu puxar
<H4> Use a classe de puxar-right para alinhar o menu suspenso com o lado direito do contêiner pai </h4> <div style = "float: esquerda;"> <botão, "botão" id = "suspensoMenu1" data-toggle = "suspenso">
Menu puxador
</span> </span> </butão> <ul role = "menu" aria-labelledby = "suspensoMenu1"> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> menu suspenso "Menor" MenuuT "MENUT" MENUT ">" HREF ">" HEUUTs "MenuuT" MenuuT "MenuuT"> "Href"> "Hrot" MenuUt "MenuuT" MenuuT "MenuuT" MenuuT "> Item </a> </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> retirar o menu do menu </a> </li> <li role = "apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> suspenso " Role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> retirar os itens do menu </a> </li> </ul> </div> <br/> <bra/> <h4> Use a classe suspensa-menu-right para alinhar o menu suspenso "LOFE DOIMENTO DO SUPERION> id = "suspensomenu1" data-toggle = "suspenso">
Menu puxador
</span> </span> </butão> <ul role = "menu" aria-labelledby = "suspensoMenu1"> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> menu suspenso "Menor" MenuuT "MENUT" MENUT ">" HREF ">" HEUUTs "MenuuT" MenuuT "MenuuT"> "Href"> "Hrot" MenuUt "MenuuT" MenuuT "MenuuT" MenuuT "> Item </a> </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> retirar o menu do menu </a> </li> <li role = "apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> suspenso " Role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> retirar itens de menu </a> </li> </ul> </div> <br/> <br/> <h4> o menu suspenso "Drop Down está alinhado com o lado esquerdo do contêiner pai </h4> <nysty>" FLOAT: LEADA; data-toggle = "suspenso">
Menu puxador
</span> </span> </butão> <ul role = "menu" aria-labelledby = "suspensoMenu1"> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> menu suspenso "Menor" MenuuT "MENUT" MENUT ">" HREF ">" HEUUTs "MenuuT" MenuuT "MenuuT"> "Href"> "Hrot" MenuUt "MenuuT" MenuuT "MenuuT" MenuuT "> Item </a> </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> retirar o menu do menu </a> </li> <li role = "apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> suspenso " Role = "Apresentação"> <A RUPE = "Menuitem" tabindex = "-1" href = "#"> menu suspenso item </a> </li> </ul> </div>
Na verdade, adicione um nome de classe "puxar-right" ou "menu-semenu-direita" em "menu suspenso", onde o código de estilo do CSS
.Dropdown-Menu.pull-right {direita: 0; esquerda: auto;}. Dropdown-menu-right {direita: 0; esquerda: auto;}Menu puxador (status do item do menu)
O estado padrão do item de menu suspenso (sem configuração) tem um estado suspenso (: pairar) e um estado de foco (: foco)
Além dos dois estados acima, os itens de menu suspensos também possuem o estado atual (.Active) e o estado desativado (.Disabled).
<div> <button type = "button" id = "suspenso Menu do menu suspenso DATA-TOGGLE =" Dropdown "> </span> </button> <ul role =" menu "aria-labelledby =" DropDownMenu1 "> <li role =" Apresentation "> <a" "MenAuTem" TabIndiMux = 1 "> <i) Role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> menu suspenso Item </a> </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> menu suspenso </a> </li> <i> Role = "Menuitem" Tabindex = "-1" href = "#"> Drop Down Menu Item </a> </li> </ul> </div>
Coloque o mouse nele e um sinal proibido será exibido no desativado. A captura de tela não pode ser inserida!
Botões (grupo de botões)
O uso de botões únicos em páginas da web às vezes não atende às nossas necessidades de negócios. Muitas vezes vemos vários botões combinados, como um conjunto de pequenos botões de ícone em um editor de texto rico.
<div><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type="button"><span></span></button><button><button type = "Button"> <pan> </span> </button> <botão tipo = "Button"> <pan> </span> </button> </div>
Imagem de reprodução:
Aqui você pode gerar botões diferentes de ícone de acordo com ícones diferentes! Você pode visualizá -lo neste site: http://getbootstrap.com/components/#glyphicons
Botões (barra de ferramentas do botão)
Em um editor de texto rico, os botões de grupo grunham, como copiar, cortar e colar um grupo; Alinhado à esquerda, alinhamento médio, alinhamento direito e um grupo final, como mostrado na figura abaixo:
Em seguida, a barra de ferramentas do botão de quadro de bootstrap também fornece esse método de fabricação. Você só precisa colocar o grupo de botões "BTN-GROUP" em grupos em um grande contêiner "BTN-Toolbar", como mostrado abaixo:
<div> <div> <button type = "button"> <pange> </span> </button> <button type = "button"> </span> </button> <butter type = "buttão"> </span> </span> </button> </div> <div> <butão <butter = "Button"> </span> </button> <//</div> </div> <div> <butter = "Button"> </span> </span> </button> <// type="button"><span></span></button></div><div><button type="button"><span></span></button></div><div><button type="button"><span></span></button><button><button></button><button></button><button></button></div><div><button type = "Button"> <panguer> </span> </butut> <but uma button> </button> <butter> <button type = "button"> <pan> </span> </button> <button type = "button"> <pangus> </span> </button> </div> <div> <butty typen ""> </span> <///Div> </div>
Imagem de reprodução:
O segundo conjunto de ícones na figura é adicionado com uma classe:
BTN-Group-LG: Grupo de botões grande
BTN-GROUP-SM: grupo pequeno de botões
BTN-GROUP-XS: Grupo de botão ultra-pequeno
Basta adicionar o nome da classe correspondente ao nome da classe ".btn-group" para obter grupos de botões de tamanhos diferentes.
Botões (agrupamento aninhado)
Muitas vezes, geralmente organizamos o menu suspenso e os grupos de botões comuns para obter um efeito semelhante ao menu de navegação.
Ao usá-lo, você só precisa substituir o contêiner que fez o "suspensão" que criou originalmente o menu suspenso com "BTN-Group" e colocá-lo no mesmo nível que o botão comum.
<div> <botão type = "button"> home </button> <button type = "button"> Exibição do produto </button> <button type = "button"> análise de caso </button> <button type = "button"> entre em contato com </button> <div> <butt-butggle = "suspenso" type = ""> sobre nós <pan> </span> </"<lul> <lul> <lul> <li> <li> <li-> <li> <liply> <liM> <lutgle =" Sollowdown "Type =" "> sobre nós <pan> </span> </" Perfil </a> </li> <li> <a href = "##"> cultura corporativa </a> </li> <li> <a href = "##"> estrutura organizacional </a> </li> <li> <a href = "##"> atendimento ao cliente </a> </li> </li> </div> <//"
Imagem de reprodução:
Botões (agrupamento vertical)
No exemplo visto anteriormente, o grupo de botões é exibido horizontalmente. Mas, no uso real, o efeito de exibição vertical sempre será encontrado. Esse estilo também é fornecido na estrutura do bootstrap. Só precisamos mudar o nome da classe "BTN-Grupo" do agrupamento horizontal para "BTN-Group-Vertical"
<div> <botão type = "button"> home </button> <button type = "button"> Exibição do produto </button> <button type = "button"> análise de caso </button> <button type = "button"> entre em contato com </button> <div> <butt-butggle = "suspenso" type = ""> sobre nós <pan> </span> </"<lul> <lul> <lul> <li> <li> <li-> <li> <liply> <liM> <lutgle =" Sollowdown "Type =" "> sobre nós <pan> </span> </" Perfil </a> </li> <li> <a href = "##"> cultura corporativa </a> </li> <li> <a href = "##"> estrutura organizacional </a> </li> <li> <a href = "##"> atendimento ao cliente </a> </li> </li> </div> <//"
Imagem de reprodução:
Botão (botão igual)
O efeito do botão de segmento igual é particularmente prático nos terminais móveis. A largura do grupo de botões inteira é 100% do contêiner e cada botão no grupo de botões divide toda a largura do contêiner. Por exemplo, se você tiver cinco botões em um grupo de botões, cada botão terá 20% de largura, se houver quatro botões, cada botão terá 25% de largura e assim por diante.
O botão de equalização também é chamado de botão de agrupamento adaptativo. O método de implementação também é muito simples. Você só precisa adicionar um nome de classe "BTN-Group-Justified" ao grupo de botões "BTN-GROUP", como mostrado abaixo:
<div> <div> <a href = "#"> home </a> <a href = "#"> exibição de produtos </a> <a href = "#"> análise de caso </a> <a href = "#"> entre em contato </a> </div> </div>
Altere a largura da tela
Declaração especial: Ao fazer o grupo de botões Aliquot, tente usar o elemento de tag <a> para criar botões, porque ao usar o elemento de tag <butter>, usando o display: tabela não é amigável para apoiá -lo em alguns navegadores.
O triângulo para cima para cima do botão
O triângulo descendente do botão, adicionamos um elemento de etiqueta "" ao rótulo e nomeie -o "Caret":
Às vezes, nosso menu suspenso será exibido (a próxima seção o apresentará). Neste momento, nossa direção do triângulo precisa ser exibida para cima. Método de implementação: você precisa adicionar o nome da classe "Dropup" à classe ".btn-group" (esse também é o nome da classe a ser usado para o menu suspenso Pop-up para cima).
<div> <botão Data-toggle = "suspenso" type = "button"> menu suspenso Button </span> </button> <ul> <li> <a href = "##"> botão suspenso item </a> </li> <li> <a href = "##"> itens de menu do botão </a> <li> <li> Item </a> </li> </ul> </div>
Imagem de reprodução:
Navegação (estilo básico)
A navegação não é estranha para uma pessoa de front-end. Pode -se dizer que a navegação é um dos elementos importantes de um site, que pode facilitar os usuários a encontrar os vários serviços funcionais fornecidos pelo site. O método de navegação também é muito diversificado e diversificado.
As barras de navegação são fabricadas principalmente na estrutura do bootstrap através do estilo ".nav". O estilo ".nav" padrão não fornece o estilo de navegação padrão. Outro estilo deve ser anexado a ele para ser eficaz, como "NAV-TABS", "NAV-PILLS", etc. Por exemplo, há um exemplo de uma barra de navegação de guias no editor de código à direita. Seu método de implementação é adicionar dois estilos de classe à tag UL.NAV e NAV-TABS.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> href = "##"> Responsivo </a> </li> </ul>
Navegação (navegação em forma de tag)
Navegação em forma de tag, também conhecida como navegação de guia. Especialmente quando muitos conteúdos são exibidos em pedaços, é muito adequado usar esta guia para agrupar -os.
A navegação em forma de etiqueta é implementada pelo estilo "NAV-TABS". Ao criar navegação em forma de tag, você precisa adicionar esse tipo de nome à navegação original "NAV"
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> href = "##"> Responsivo </a> </li> </ul>
De fato, o efeito do exemplo acima não é consistente com os efeitos da guia que geralmente vemos. Geralmente, a guia ensina uma seleção atual. De fato, a estrutura do bootstrap também é fornecida de acordo. Suponha que queremos que o item "Home" seja o item atualmente selecionado, basta adicionar o nome da classe "class =" attive "" à sua tag.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> href = "##"> Responsivo </a> </li> </ul>
Imagem de reprodução:
Além do item atual, algumas guias também têm um estado deficiente. Para alcançar esse efeito, você só precisa adicionar "class =" desativado "" ao item de tag:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> href = "##"> Responsivo </a> </li> </ul>
Imagem de reprodução:
Navegação (pílulas) Navegação)
A navegação da forma da cápsula (pílulas) soa um pouco estranha porque parece um pouco com a forma de cápsula. Mas é mais como a navegação em massa que geralmente vemos. O item atual é destacado com um efeito de canto arredondado. O método de implementação é semelhante a "NAV-TABS". Com a mesma estrutura, você só precisa substituir o nome da classe "NAV-TABS" por "Nav-Pills":
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> href = "##"> Responsivo </a> </li> </ul>
Imagem de reprodução:
O mesmo mencionado acima!
Navegação (navegação vertical empilhada)
No uso real, além da navegação horizontal, também há navegação vertical, assim como os botões de arranjo vertical introduzidos anteriormente. Fazer a navegação de pilha vertical requer apenas um nome de classe "empilhado em navegação" com base em "naves navais"
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> href = "##"> Responsivo </a> </li> </ul>
Imagem de reprodução:
Na seção de menu suspenso, há um divisor entre o grupo de menu suspenso e o grupo. De fato, a navegação vertical da pilha também tem esse efeito, você só precisa adicionar "
" Apenas:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> href = "##"> Responsivo </a> </li> </ul>
Imagem de reprodução:
Navegação adaptativa (uso)
A navegação adaptativa refere -se à navegação que ocupa toda a largura do contêiner, e os itens do menu podem se adaptar à largura como as células de uma tabela. A navegação adaptativa é a mesma que o grupo de botões adaptável fabricado usando "BTN-Group-justified". É só que, ao fazer navegação adaptativa, outro nome de classe "Justified". Obviamente, ele precisa ser usado com "varas de navegação" ou "pilhas de navegação". como:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> href = "##"> Responsivo </a> </li> </ul>
Imagem de reprodução:
Esta é uma tela diferente
Navegação mais menu suspenso (navegação secundária)
Os exemplos anteriores são sobre o uso da estrutura do Bootstrap para criar navegação de primeiro nível, mas em muitos casos, o efeito da navegação de segundo nível é inseparável na página da web. Então é mais fácil fazer navegação secundária na estrutura do bootstrap. Basta tratar Li como o contêiner pai, use o nome da classe "suspenso" e aninhe outra lista UL em LI e use o método introduzido no menu suspenso anterior:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "#" "data-toggle =" suspenso "> tutorial </span> </a> <ul> <li> <a href =" ### css3 </a> </li> <li> href = "##"> sass </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a href = "##"> responsivo </a> </li> </li> <li> <a href = "##"> sobre us </a> </a>
Imagem de reprodução:
Através da ferramenta de depuração do navegador, não é difícil descobrir que, clicando no item de menu com navegação secundária, o nome da classe "aberto" será adicionado automaticamente. Clicar novamente excluirá o nome da classe "aberto" adicionado e o princípio da implementação do menu suspenso é o mesmo!
Então, ao usar a linha divisória na navegação secundária, você só precisa adicionar uma tag vazia como "<li class =" nav-divider "> </li>".
Navegação de pão
Caramba, geralmente são usados para navegação, e sua principal função é dizer ao usuário o local atual da página (localização atual)
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> meu livro </a> </li> <li> "ilustrado css3" </li> </ar>
Imagem de reprodução: