Os crachás em um site são usados ​​para fornecer algumas informações importantes ao usuário, como um aviso, contagem de notificações, promoção de um determinado programa, etc. O Bootstrap 5 fornece uma determinada classe que permite criar crachás em seu site. Além de sua criação, outras classes também estão disponíveis para estilizar os crachás. Este blog o orienta sobre como criar e estilizar crachás usando o bootstrap 5.

Como criar um crachá

Com o objetivo de criar um crachá, use o .aula de crachá junto com uma classe de cores de fundo que são .BG-Primary, .BG-success, .BG-secundário, .BG-Info, .BG-caules, .BG-Danger, .BG-Light, .BG-Dark.

Html

Clique aqui Importante

Clique aqui Importante

Para criar um crachá, o elemento é usado dentro de um

e

elemento. O elemento foi atribuído o .aula de crachá junto com uma aula de cores de fundo, .BG-Warning para dar ao crachá um fundo amarelo. Observe que um crachá por padrão tem uma forma retangular e escala para cima e para baixo para corresponder ao tamanho do elemento pai, se houver algum.

Saída

Os crachás na saída acima são usados ​​para chamar a atenção de um usuário.

Como dar uma cor de fundo para os crachás

Os crachás podem receber uma cor de fundo usando qualquer uma das classes de cores de fundo. Essas classes desempenham um papel importante na transmissão do significado de um crachá.

Html

Distintivo
Distintivo
Distintivo
Distintivo

Aqui criamos quatro crachás e cada um deles recebeu uma classe de cores de fundo diferente.

Saída

Cada crachá transmite um significado diferente.

Como criar crachás arredondados

Como já mencionado, os crachás por padrão têm uma forma retangular, no entanto, se você deseja dar a eles uma forma arredondada, use o .pilhagem arredondada aula.

Html

Distintivo
Distintivo
Distintivo
Distintivo

O código acima gerará quatro emblemas em forma de comprimidos, cada um com uma cor de fundo diferente.

Saída

Os crachás receberam uma forma arredondada com sucesso.

Como criar crachás de balcão

Os crachás de contador podem ser usados ​​para exibir a contagem de notificações de um determinado elemento. Com o objetivo de fazer tais crachás, você precisa aninhar o elemento dentro desse elemento em particular.

Html

Chamadas perdidas 8

Aqui, criamos um botão de "chamadas perdidas" com um certo estilo e depois aninhamos um elemento que também tem um certo estilo e mostra o número de chamadas perdidas, exibindo a contagem de notificações para as chamadas perdidas.

Saída

A saída acima mostra que há um total de 8 chamadas perdidas.

Conclusão

Com o objetivo de criar e modelar emblemas usando o bootstrap 5, use o .distintivo classe junto com uma das classes de cores de fundo que são .BG-Primary, .BG-success, .BG-secundário, .BG-Info, .BG-caules, .BG-Danger, .BG-Light, .BG-Dark Para dar a eles uma cor de fundo. Além disso, um crachá por padrão tem uma forma retangular, no entanto, eles podem receber uma forma arredondada usando o .pilhagem arredondada aula. Além disso, você faz um crachá de notificação aninhando o crachá dentro de um elemento.