Este artigo abordará as seguintes perspectivas para demonstrar o uso de insígnias Bootstrap:
- Como usar o emblema do Bootstrap para obter informações adicionais?
- Como usar o emblema Bootstrap para informações contextuais?
- Como adicionar estilos personalizados ao emblema do Bootstrap?
- Como adicionar ícones ao emblema do Bootstrap?
- Como vincular o emblema do Bootstrap a outra fonte?
- Como fazer emblemas arredondados?
- Como usar o emblema do Bootstrap como um contador?
O que são emblemas do Bootstrap?
Os emblemas são os componentes básicos usados para mostrar um indicador. Por exemplo, eles podem ser usados como um contador numérico para mostrar o número de notificações ou mensagens:
Eles também podem ser utilizados para exibir informações adicionais, como mostrado na imagem fornecida:
Como usar o emblema do Bootstrap para obter informações adicionais?
Os emblemas do Bootstrap podem ser adicionados aos elementos HTML para serem usados como informações adicionais. Confira o exemplo mencionado abaixo para a demonstração.
Exemplo
Para usar o selo Bootstrap para informações de adição, primeiro:
- Adicionar ' ' e ' ” elementos.
- Coloque o '
” elemento com o “ distintivo ' e ' distintivo-* ' Aulas. A classe “badge-*” refere-se ao crachá com a cor especificada:
< h6 > bolsas de estudo < período classe = 'crachá crachá-secundário' > Novo < / período >< / h6 >
Pode-se observar que dois emblemas são adicionados aos cabeçalhos relevantes:
Como usar o emblema Bootstrap para informações contextuais?
Os emblemas do Bootstrap também podem ser usados para fornecer informações contextuais como “ crachá-perigo ” exibe o emblema na cor vermelha e pode ser usado para mostrar algumas mensagens com falha, como cancelar, inválido ou mais. O ' badge-sucesso ” é usado onde queremos mostrar alguma mensagem de sucesso.
Exemplo
Veja o código fornecido para entender o cenário discutido:
< período classe = 'crachá crachá-perigo' >Conta não verificada< / período >< período classe = 'informações do crachá' >isso é distintivo< / período >
< período classe = 'distintivo-aviso' >Conta Pendente para aprovação< / período >
< período classe = 'crachá crachá-sucesso' >Conta verificada< / período >
Saída
Como adicionar estilos personalizados ao emblema do Bootstrap?
Você também pode usar CSS para adicionar um estilo exclusivo aos emblemas do Bootstrap. Para um melhor entendimento, uma classe com o nome “ personalizadas ” é adicionado dentro do “
< período classe = 'crachá crachá-informações personalizadas' >Isto é distintivo< / período >
< período classe = 'distintivo personalizado de aviso de distintivo' >Conta Pendente para aprovação< / período >
< período classe = 'distintivo personalizado de sucesso' >Conta verificada< / período >
Classe de estilo “personalizada”
.personalizadas {tamanho da fonte : 18px ;
espessura da fonte : 100 ;
espaçamento entre letras : 1px ;
preenchimento : 8px 15px ;
}
O ' .personalizadas ” é usado para acessar o “ personalizadas ' classe. As seguintes propriedades são aplicadas a ele:
- “ tamanho da fonte ” ajusta o tamanho da fonte.
- “ espessura da fonte ” indica a espessura da fonte.
- “ espaçamento entre letras ” adiciona espaço entre as letras.
- “ preenchimento ” fornece espaço ao redor do conteúdo do elemento.
Saída
Como adicionar ícones ao emblema do Bootstrap?
Também podemos adicionar ícones diferentes aos emblemas. Para isso, existem diversas classes que podem ser utilizadas para esta causa. Para mais informações, visite o Fonte Incrível local na rede Internet.
Exemplo
Em HTML, adicione um “
< eu classe = 'far fa-times-circle' >< / eu >
< / período >
< período classe = 'distintivo personalizado de sucesso' > Conta verificada
< eu classe = 'fas fa-verificação do usuário' >< / eu >
< / período >
Saída
Como vincular o emblema do Bootstrap a outra fonte?
Para tornar os emblemas do Bootstrap clicáveis, coloque o “ distintivo ” classes dentro do HTML “ ” e forneça a referência da página vinculada no campo “ href ” atributo:
< uma href = '#' classe = 'crachá crachá-perigo personalizado' >Cancelar< / uma >< uma href = '#' classe = 'crachá crachá-informações personalizadas' >Enviar< / uma >
Saída
Como fazer emblemas arredondados?
Para tornar as bordas do emblema mais arredondadas, adicione uma classe “ pílula de distintivo ”. Esta classe suporta um maior “ raio da borda ” e horizontais “ preenchimento ” Propriedades:
< período classe = 'crachá crachá-pílula crachá-perigo personalizado' >Conta não verificada < / período >< período classe = 'distintivo distintivo-pílula distintivo-aviso personalizado' >Conta Pendente para aprovação< / período >
< período classe = 'distintivo distintivo-pílula distintivo-sucesso personalizado' >Conta verificada < / período >
Saída
Como usar o emblema do Bootstrap como um contador?
Para criar um botão com um contador, adicione um HTML “
Notificações < período classe = 'distintivo-luz' > 4 < / período >
< / botão >
Saída
Isso foi tudo sobre emblemas do Bootstrap e seus rótulos relevantes no Bootstrap.
Conclusão
O Bootstrap “ distintivo ” é utilizada para adicionar emblemas ao site. Por exemplo, classes como “ crachá-perigo ”, “ crachá-informações ”, e mais podem ser usados para adicionar informações contextuais aos crachás como seu rótulo. Algumas classes são aplicadas para adicionar ícones aos emblemas, como “ distante fa-times-circle ” para colocar um ícone de círculo cruzado. Esta postagem forneceu um guia abrangente sobre emblemas e etiquetas do Bootstrap.