Bootstrap | Insignias y etiquetas

Las insignias del sitio web suelen ser gráficos pequeños en cualquier aplicación. Las insignias también se conocen como botones del sitio web vinculados a otro sitio web o se usan para un propósito particular. En Bootstrap 3, había una clase separada para etiquetas, pero como estamos usando Bootstrap 4, la clase de etiqueta ha sido reemplazada por el "insignia" clase.

Este artículo cubrirá las siguientes perspectivas para demostrar el uso de insignias de arranque:

• Cómo usar la insignia de bootstrap para información adicional?
• Cómo usar la insignia de bootstrap para información contextual?
• Cómo agregar estilos personalizados a la insignia de arranque?
• Cómo agregar iconos a la insignia de bootstrap?
• Cómo vincular la insignia de arranque con otra fuente?
• Cómo hacer insignias redondeadas?
• Cómo usar la insignia de bootstrap como mostrador?

¿Qué son las insignias de bootstrap??

Las insignias son los componentes básicos que se utilizan para mostrar un indicador. Por ejemplo, se pueden usar como un contador numérico para mostrar el número de notificaciones o mensajes:

También se pueden utilizar para mostrar información adicional, como se muestra en la imagen dada:

Cómo usar la insignia de bootstrap para información adicional?

Las insignias de bootstrap se pueden agregar dentro de los elementos HTML para usar como información adicional. Mira el ejemplo mencionado a continuación para la demostración.

Ejemplo

Para usar la insignia de bootstrap para obtener información adicional, en primer lugar:

• Agregar "

  " y "

  "Elementos.

• Colocar el ""Elemento con el"insignia" y "insignia-*"Clases. La clase "Insignia-*" se refiere a la insignia con el color especificado:

EventosNuevo

Becas Nuevo

Se puede observar que se agregan dos insignias a los encabezados relevantes:

Cómo usar la insignia de bootstrap para información contextual?

Las insignias de bootstrap también se pueden usar para proporcionar información contextual como "amenazador"Muestra la insignia en color rojo y se puede usar para mostrar algunos mensajes fallidos como cancelar, inválido o más. El "insignia"Se usa donde queremos mostrar algún mensaje de éxito.

Ejemplo

Mire el código dado para comprender el escenario discutido:

Cuenta no verificada
esta es una insignia
Cuenta pendiente para su aprobación
Cuenta verificada

Producción

Cómo agregar estilos personalizados a la insignia de arranque?

También puede usar CSS para agregar un estilo único a las insignias de bootstrap. Para una mejor comprensión, una clase con el nombre "costumbre"Se agrega dentro del"" elemento. Luego, se aplican las siguientes propiedades:

Cuenta no verificada
Esta es una insignia
Cuenta pendiente para su aprobación
Cuenta verificada

Clase de estilo "personalizado"

.costumbre
tamaño de fuente: 18px;
Font-peso: 100;
Espaciado de letras: 1px;
relleno: 8px 15px;

El ".costumbre"Se usa para acceder al"costumbre" clase. Se aplican las siguientes propiedades:

• "tamaño de fuente"Ajusta el tamaño de la fuente.
• "pescado"Afirma el grosor de la fuente.
• "espaciado de letras"Agrega espacio entre las letras.
• "relleno"Proporciona espacio alrededor del contenido del elemento.

Producción

Cómo agregar iconos a la insignia de bootstrap?

También podemos agregar diferentes iconos a las insignias. Para hacerlo, hay varias clases que se pueden utilizar para esta causa. Para obtener más información, visite el sitio web de Font Awesome.

Ejemplo

En HTML, agregue un "" elemento. Dentro de este elemento, coloque el elemento en línea ""O" "para insertar la clase de icono:

Cuenta no verificada


Cuenta verificada

Producción

Cómo vincular la insignia de arranque con otra fuente?

Para hacer clic en las insignias de arranque, coloque el "insignia"Clases dentro del HTML""Etiqueta y proporcione la referencia de la página vinculada en el"href" atributo:

Cancelar
Entregar

Producción

Cómo hacer insignias redondeadas?

Para hacer que los bordes de la insignia sean más redondeados, agregue una clase "píldito". Esta clase admite una más grande "radio fronterizo"Y horizontal"relleno" propiedades:

Cuenta no verificada
Cuenta pendiente para su aprobación
Cuenta verificada

Producción

Cómo usar la insignia de bootstrap como mostrador?

Para crear un botón con un contador, agregue un HTML ""Etiqueta con tipo"botón"Y asignarlo las clases de botones"btn" y "btn-tucés". Luego, incluya el "El elemento para colocar un contador:

Notificaciones 4

Producción

Eso se trataba de insignias de bootstrap y sus etiquetas relevantes en bootstrap.

Conclusión

El bootstrap "insigniaLa clase se utiliza para agregar insignias al sitio web. Por ejemplo, clases como "amenazador","insignia-info", Y se pueden usar más para agregar información contextual a las insignias como su etiqueta. Algunas clases se aplican para agregar iconos a las insignias, como "lejano fa-times-circle"Para colocar un icono de círculo cruzado. Esta publicación ha proporcionado una guía completa sobre insignias y etiquetas de bootstrap.