A brinde é como uma notificação de push ou uma espécie de caixa de alerta que aparece em uma tela por alguns segundos quando alguma ação é executada e desaparece automaticamente após 5 segundos. As torradas são construídas usando o FlexBox, o que significa que você pode alinhá -las e posicioná -las facilmente como seu requisito.

Este artigo foi projetado para fornecer o conhecimento sobre

• Criando torrada
• Posicionamento da torrada
• Torrada empilhada
• Atributos de dados para a torrada

Criando torrada

Para criar uma torrada, faça dois divs com a classe .Toast-header, .Toast-Body e embrulhe eles dentro de um com a classe .brinde, também dê um único eu ia Para esta div. Em seguida, use isso eu ia Para conectar um botão com torrada que acionará a torrada.

Código

Restra básica

<Brinde

Cabeçalho de torrada

Este artigo é sobre Bootstrap 5 Toasts.

É assim que uma torrada básica é criada.

Posicionando a torrada

Para posicionar uma torrada em qualquer lugar da tela, você pode simplesmente usar propriedades de posicionamento CSS para mostrar sua torrada em qualquer lugar da tela.

Código

Cabeçalho de torrada

Este artigo é sobre Bootstrap 5 Toasts.

Como você vê no exemplo acima, coloquei minha torrada no canto inferior direito usando CSS embutido.

Brindes empilhados

No bootstrap 5, você também pode empilhar as torradas se houver mais de uma torrada. Para empilhar uma torrada simplesmente

Adicione vários brindes em um único e dê posição de acordo com sua escolha.

Código

Cabeçalho de torrada

Este artigo é sobre Bootstrap 5 Toasts.

Cabeçalho de torrada

Este artigo é sobre Bootstrap 5 Toasts.

É assim que você empilha torradas.

Atributos de dados para torradas

Se você não quiser esconder sua torrada automaticamente, use atributo de dados-autohide = "false" com .Toast Class e se você deseja que sua torrada fique mais tempo, use atributo de dados de dados = “valor em milissegundos” Como 3000 = 3seg. Por padrão, o valor do atraso é de 1000 milissegundos, mas você pode mudar usando o atributo de atraso de dados.

Código

Cabeçalho de torrada

Este artigo é sobre Bootstrap 5 Toasts.

Cabeçalho de torrada

Este artigo é sobre Bootstrap 5 Toasts.

Ao ver claramente a diferença no exemplo acima, a primeira torrada se esconde automaticamente após 3.5 segundos, enquanto a segunda torrada permanece devido a atributo de dados-autohide = "false".

Conclusão

As torradas são criadas usando um com .Classe de torrada, Em seguida, envolva -se .Div e .Div do corpo de torrada lá dentro .brinde div. Para abrir uma torrada que você pode usar .mostrar classe com .Classe de torrada Ou você pode escrever um código JavaScript para abri -lo dando eu ia para o .Classe de torrada.Torradas estão ocultos por padrão, é por isso que usamos .Mostrar aula.