O menu suspenso é usado para exibir um menu contextualizado e alternável da lista de links.
1. Case
Enrole o menu suspenso e o menu suspenso no .Dropdown e adicione o código HTML que compõe o menu.
<div> <button type = "button" id = "suspensomenu1" data-toggle = "suspenso"> suspenso <pan> </span> </button> <ul role = "menu" aria-labelledby = "suspense <suMenu1"> <li role = "Apresentação"> <a "" Menuitem "TabiNDex =" 1 "href) Role = "Apresentação> <a role =" menuitem "tabindex ="-1 "href ="#"> outra ação </a> </li> <li role =" Apresentação "> <a role =" menuitem "tabindex ="-1 "href ="#"> algo aqui </a> </li> <li> role =" Apresentação "" tabindex = "-1" href = "#"> link separado </a> </li> </ul> </div>
Você pode encontrar através do código acima que pode haver muitas classes ou atributos de estilo desconhecido.
Há um botão suspenso e um pequeno ícone cuidador no lado direito. Obviamente, o texto deste pequeno ícone e botão é do mesmo nível.
Primeiro, vamos ver que existe um tagarela suspenso no botão do botão e um atributo Data-Toggle. A lista será exibida com base neste atributo.
Imediatamente depois, o menu suspenso do rótulo UL deve ser usado em conjunto com o toggle suspenso da classe de estilo do botão acima e vincular o botão acima através do ARIA-Labelledby.
Em seguida, há um divisor na quarta etiqueta Li que é na verdade uma classe de estilo para dividir linhas.
Talvez eu entenda dessa maneira, mas definitivamente não entendo corretamente.
2. Opções de alinhamento
Adicione .Text-Right ao menu suspenso.Dropdown-Menu para alinhar o texto à direita.
<div> <button type = "button" id = "suspensomenu1" data-toggle = "suspenso"> suspenso <pan> </span> </button> <ul role = "menu" aria-labelledby = "suspense <suMenu1"> <li role = "Apresentação"> <a "" Menuitem "TabiNDex =" 1 "href) Role = "Apresentação> <a role =" menuitem "tabindex ="-1 "href ="#"> outra ação </a> </li> <li role =" Apresentação "> <a role =" menuitem "tabindex ="-1 "href ="#"> algo aqui </a> </li> <li> role =" Apresentação "" tabindex = "-1" href = "#"> link separado </a> </li> </ul> </div>
Basta adicionar uma classe de estilo de texto direto à tag UL no código acima.
3. Título
Um conjunto de ações pode ser marcado adicionando um título em qualquer menu suspenso.
<H1> menu suspenso menu </h1> <div> <button type = "button" id = "suspensomenu1" data-toggle = "suspenso"> suspenso <span> </span> </button> <ul papes = "menu" ARIA-Labelledby = "DropWoDDownsen1"> <li role = "Apresentação"> DropDown Header <labelledby = "Li li> <li> <li) <li role =" Apresentação "> DropDown Header <labelledby =" li> <li> <li> <li> <li "> role =" Apresentação "> DropDower <labelledBy =" LiM> <li> <li> <li "> <li role =" Apresentação "> DropDow tabindex = "-1" href = "#"> ação </a> </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> outra ação </a> </li> <li role = "Apresentação"> <a "" Menuitem "TABINDEX = 10 Role = "Apresentação"> </li> <li role = "Apresentação"> Cabeçalho suspenso </li> <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> link separado </a> </li> </ul> </div>
O principal é adicionar uma classe de estilo .Dropdown em <li role = "Apresentação"> cabeçalho suspenso </li>.
4. Itens de menu desabilitados
Adicione. Disabled ao <li> No menu suspenso para desativar o link.
Continue a modificar o código acima para substituir o código na linha de outra coisa aqui
Copie o código da seguinte forma: <li role = "Apresentação"> <a role = "menuitem" tabindex = "-1" href = "#"> outra coisa aqui </a> </li>
Adicione principalmente classes de estilo. Disabled na tag Li.
Depois de executá -lo, você pode ver o efeito. De fato, o efeito é semelhante ao estilo de título acima. Quando você clicar, um ícone desativado será exibido.
5. Casos básicos
1) menu suspenso do tipo botão
Coloque qualquer botão no .btn-Group e adicione a marca de menu correta para fazer um gatilho do menu suspenso.
Menu suspenso de botão único
Basta alterar algumas marcas básicas e transformar o botão em um interruptor de menu suspenso.
<div> <button type = "button" data-toggle = "suspenso"> ação <pan> </span> </button> <ul role = "menu"> <li> <a href = "#"> ação </a> </li> <li> <a href = "#" outra ação </a> </li> <li> <li> <a href = "#"> link separado </a> </li> </ul> </div>
Botão dividido Menu puxador
Da mesma forma, o menu suspenso Split Button requer a mesma marca de alteração, mas apenas mais um botão separado.
<div> <button type = "button"> ação </butut> <div> <button type = "button" data-toggle = "suspenso"> <pan> </span> <span> alternar o menu suspenso </span> </button> <l role = "Menu"> <li> <a href = "#"> ação </a> </li> <li> <li> href = "#"> outra coisa aqui </a> </li> <li> </li> <li> <a href = "#"> link separado </a> </li> </div> </div
Você só pode clicar no pequeno ícone para aparecer.
2) tamanho
O botão menu suspenso se aplica a botões de todos os tamanhos.
<div> <button type = "button" data-toggle = "suspenso"> Botão grande </span> </button> <ul> ... </ul> </div> <!-grupo de botão pequeno-> <div> <butão tipo = "Button" Button ""-Button "-Button"-Button "-"-Button "<l) ... data-toggle = "suspenso"> botão pequeno <span> </span> </butut> <ul> ... </ul> </div>
Controle o tamanho do botão através das classes de estilo .btn-lg, .btn-sm e .btn-xs.
3) menu pop-up ascendente
Adicionar .Dropup ao elemento pai fará com que o menu suspenso acionado acima do elemento.
<div> <button type = "button"> Dropup </button> <button type = "button" data-toggle = "suspenso"> <pan> </span> <span> alternar suspenso </span> </button> <ul> <!-Links do menu suspenso-> </ul> </liv>
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
Este artigo apresenta principalmente o conteúdo relevante do menu suspenso e depois apresenta a combinação de botões e menus suspensos. Há muitas mudanças e o estilo também é bom. Espero que todos gostem.