Bootstrap | Crachás e rótulos

Os crachás de sites geralmente são pequenos gráficos em qualquer aplicativo. Os crachás também são conhecidos como botões do site vinculados a outro site ou usados ​​para um propósito específico. No Bootstrap 3, havia uma classe separada para rótulos, mas como estamos usando o bootstrap 4, a classe de etiquetas foi substituída pelo “distintivo" aula.

Este artigo abordará as seguintes perspectivas para demonstrar o uso de crachás de bootstrap:

• Como usar o emblema de bootstrap para obter informações adicionais?
• Como usar o emblema de bootstrap para obter informações contextuais?
• Como adicionar estilos personalizados ao emblema de bootstrap?
• Como adicionar ícones ao emblema de bootstrap?
• Como vincular o emblema de bootstrap a outra fonte?
• Como fazer com que os distintivos sejam arredondados?
• Como usar o emblema de bootstrap como balcão?

O que são emblemas de bootstrap?

Os crachás são os componentes básicos que são 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 especificada:

Como usar o emblema de bootstrap para obter informações adicionais?

Os emblemas de bootstrap podem ser adicionados dentro dos elementos HTML a serem usados ​​como informações adicionais. Confira o exemplo mencionado abaixo para a demonstração.

Exemplo

Para usar o emblema de bootstrap para obter informações de adição, primeiro:

• Adicionar "

  " e "

  ”Elementos.

• Coloque o "”Elemento com o“distintivo" e "distintivo-*" Aulas. A classe "crachá-*" refere-se ao crachá com a cor especificada:

EventosNovo

Bolsas de estudo Novo

Pode -se observar que dois emblemas são adicionados aos títulos relevantes:

Como usar o emblema de bootstrap para obter informações contextuais?

Os emblemas de bootstrap também podem ser usados ​​para fornecer informações contextuais como “Danger de crachá”Exibe o crachá em cor vermelha e pode ser usada para mostrar algumas mensagens com falha, como cancelamento, inválido ou mais. O "crachá-sucesso”É usado onde queremos mostrar alguma mensagem de sucesso.

Exemplo

Veja o código fornecido para entender o cenário discutido:

Conta não verificada
Isso é crachá
Conta pendente para aprovação
Conta verificada

Saída

Como adicionar estilos personalizados ao emblema de bootstrap?

Você também pode usar CSS para adicionar algum estilo exclusivo aos emblemas de bootstrap. Para uma melhor compreensão, uma aula com o nome “personalizado"É adicionado no"" elemento. Então, as seguintes propriedades são aplicadas:

Conta não verificada
Isso é crachá
Conta pendente para aprovação
Conta verificada

Classe de estilo "personalizado"

.personalizado
Size da fonte: 18px;
Peso da fonte: 100;
Espacamento de cartas: 1px;
preenchimento: 8px 15px;

O ".personalizado"É usado para acessar o"personalizado" aula. As seguintes propriedades são aplicadas a ele:

• ““tamanho da fonte”Ajusta o tamanho da fonte.
• ““espessura da fonte”Afirma a espessura da fonte.
• ““espaçamento de cartas”Adiciona espaço entre as letras.
• ““preenchimento”Fornece espaço em torno do conteúdo do elemento.

Saída

Como adicionar ícones ao emblema de bootstrap?

Podemos adicionar ícones diferentes aos emblemas também. Para fazer isso, existem várias classes que podem ser utilizadas para esta causa. Para mais informações, visite o site incrível da fonte.

Exemplo

Em html, adicione um “" elemento. Dentro deste elemento, coloque o elemento embutido “"Ou" "para inserir a classe de ícones:

Conta não verificada


Conta verificada

Saída

Como vincular o emblema de bootstrap a outra fonte?

Para tornar os emblemas de bootstrap clicáveis, coloque o “distintivo”Classes dentro do HTML“”Tag e forneça a referência da página vinculada na“Href”Atributo:

Cancelar
Enviar

Saída

Como fazer com que os distintivos sejam arredondados?

Para tornar as bordas do crachá mais arredondadas, adicione uma aula “pilão de crachá”. Esta classe suporta um maior “Radio de fronteira”E horizontal“preenchimento”Propriedades:

Conta não verificada
Conta pendente para aprovação
Conta verificada

Saída

Como usar o emblema de bootstrap como balcão?

Para criar um botão com um contador, adicione um html “”Tag com o tipo“botão”E atribua as classes de botão“btn" e "Btn-success”. Então, inclua o “”Elemento para colocar um contador:

Notificações 4

Saída

Isso era tudo sobre emblemas de bootstrap e seus rótulos relevantes em bootstrap.

Conclusão

O bootstrap “distintivo”A classe é utilizada para adicionar crachás ao site. Por exemplo, classes como “Danger de crachá","crachá-info”, E mais pode ser usado para adicionar informações contextuais aos crachás como seu rótulo. Algumas classes são aplicadas para adicionar ícones aos emblemas, como “Far Fa-times-Circle”Para colocar um ícone de círculo cruzado. Este post forneceu um guia abrangente sobre emblemas e etiquetas de bootstrap.