Como nidificar grupos de botões e criar menus suspensos no bootstrap 5?
Os grupos de botões podem desempenhar um papel significativo se você deseja envolver botões inter -relacionados que representam ações múltiplas e conectadas juntas. Além disso, esses grupos de botões podem ser aninhados para gerar menus suspensos que se mostram úteis em situações quando você deseja fornecer ao seu usuário várias opções.
Antes de saltarmos sobre como gerar menus suspensos por ninhos de botões, vamos entender rapidamente como os botões podem ser agrupados juntos.
Como criar grupos de botões usando o bootstrap 5
Com o objetivo de agrupar botões que você deve atribuir um .BTN-Grupo Class para o contêiner Div, envolvendo os botões. Além disso, se você deseja estilizar esses grupos de botões, use o .classe BTN junto com aulas de cores contextuais. O .btn A classe fornece um estilo básico aos grupos, enquanto as classes de cores contextuais são usadas para fornecer uma cor de fundo para os grupos de botões.
Html
O snippet de código gerará quatro botões agrupados, cada botão com um preenchimento definitivo, um fundo verde e uma cor de texto branco.
Saída
É assim que você pode agrupar os botões usando o bootstrap 5.
Agora, passaremos para o tópico principal em discussão, conforme indicado pelo título do artigo, que é como os grupos de botões podem ser aninhados para gerar menus suspensos.
Como nidificar botões agrupados para gerar menus suspensos
Você gostaria de nidificar grupos de botões para fazer um menu suspenso em vários cenários, como quando você deseja fornecer várias opções ao usuário para escolher. O exemplo demonstrado abaixo mostra como você pode executar esta tarefa.
Html
Exemplo explicado
O código acima gera dois grupos de botões, cada um consistindo em um único botão e cada botão tem um menu suspenso associado a ele.
O primeiro grupo de botões tem um menu suspenso associado a ele que foi criado atribuindo o .classe suspensa a uma lista não ordenada e foi alterado atribuindo o .suspenso-toggle classe e para o elemento e define seu data-bs-toggle = "suspenso". Para inserir várias opções dentro da tag de menu suspenso
O segundo suspensão vinculado ao segundo grupo de botões também foi criado de maneira semelhante.
Saída
Usando esta técnica, você pode criar um menu suspenso agrupando botões.
Conclusão
Para criar um menu suspenso, grupos de botões de ninho, vincule um menu suspenso com um (s) grupo (s) de botões, atribuindo o .classe suspensa para
- elemento e para inserir itens dentro da etiqueta de ninho de menu dentro
- elemento e fornecer o .suspenso-item Classe para a tag Anchor. Além disso, para tornar o menu alternável, atribuir o .Classe suspensa para o elemento e defina seu data-bs-toggle = "suspenso". Seguindo estas etapas, você poderá gerar facilmente menus suspensos por grupos de botões de ninho.