domingo, 26 de diciembre de 2021

👨‍💻 Cómo crear badges en Bootstrap 4. | Parte 2

Portafolio de temas tratados en esta publicación:
  1. BADGES COMPONENTE EN BOOTSTRAP 4
  2. COLORES PARA LAS INSIGNIAS
  3. VARIACIONES DEL COMPONENTE BADGES
  4. CÓMO CREAR UNA INSIGNIA O BADGE
  5. ESCALABILIDAD DE LAS INSIGNIAS O BADGES
  6. INSIGNIAS O BADGES COMO PEQUEÑO CONTEO
  7. BADGES EN FORMA DE PÍLDORA
  8. ENLACES COMO INSIGNIA
  9. FUENTES | BIBLIOGRAFÍA


IR A PORTAFOLIO
Las insignias o badges en Bootstrap 4
IR A PORTAFOLIO

😎 BADGES COMPONENTE EN BOOTSTRAP 4


«El elemento badge (distintivo o insignia) es una etiqueta pequeña y adaptable que se agrega a casi cualquier contenido y son muy útiles para mostrar un pequeño mensaje, destacar nuevos elementos, mostrar un pequeño contador o etiquetar elementos.».

Puntualizando: Las insignias se utilizan para agregar información adicional a cualquier contenido.

Ejemplos visuales de badges son:



Un botón con un badge:


Un badge aplicado a un elemento de un control de tipo accordion:


Veamos como implementamos un "badge" en una página:

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 4</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1>Tutorial de Bootstrap 4 <span class="badge badge-warning">Nuevo</span></h1>
    <button type="button" class="btn btn-primary">
      Mensajes<span class="badge badge-light ml-1">4</span>
    </button>
  </div>
</body>
</html>
IR A PORTAFOLIO

😎 Colores para las insignias o badges


Bootstrap ya tiene preparadas varias clases para colorear las insignias.

A continuación puedes encontrar el código para agregarlas en tu página:

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Para conseguir como resultado:

Colores para los badges en Bootstrap 4




Esta muy bien tener estos colores por defecto pero quizá necesite agregar un color específico. En este caso, puedes crear tu propia clase CSS y agregarlo a tu <span>.

Veamos un ejemplo con el color púrpura: 

  
  <span class="badge  badge-purple">Púrpura #7D2181 </span>
 
  <style>
 .badge-purple{color:#FFFFFF;background-color: #7D2181}
  </style>
Resultando:

Púrpura #7D2181

IR A PORTAFOLIO

😎 Variaciones del componente badges



🔎 El componente badges tiene ocho posibles variaciones en el class todas ellas añadiendo la class badge.

Aqui esta lista: badge-primary, badge-secondary, badge-success, badge-info, badge-warning, badge-dark, badge-danger, badge-light.

El uso del color para añadir significado solo proporciona una indicacion visual, que no se transmitira a los usuarios de las tecnologias de asistencia, como los lectores de pantalla.

Asegúrese de que la informacion denotada por el color sea obvia del propio contenido (por ejemplo, el texto visible), o que se incluya a traves de medios alternativos, como texto adicional oculto con la class .sr-only

Componentes de insignia de insignia de bootstrap4

Visión general de la insignia CSS

Clase de CSS Descripción Color
.badge Obligatorio, forma cuadrada. predeterminado.
.badge-pill Forma de pastilla según componente
.badge-primary azul marino color:#fff;background-color:#007bff
.badge-secondary gris color:#fff;background-color:#6c757d
.badge-success verde color:#fff;background-color:#28a745
.badge-danger rojo predeterminado.
.badge-warning amarillo color:#fff;background-color:#fcc107
.badge-info Azul claro color:#fff;background-color:#17a2b8
.badge-light gris claro color:#fff;background-color:#f8f9fa
.badge-dark negro color:#fff;background-color:#1d2124
IR A PORTAFOLIO

😎 Como crear una insignia o badge


En Bootstrap 4 se puede utilizar la clase .badge junto con una clase contextual dentro de los elementos <span> para crear insignias rectangulares.

En un título.

Generalmente se utiliza en elementos intra-line, como los elementos de intervalo, un elemento; anidado en los componentes del botón.

Un badge dentro de un título lo agregamos mediante la etiqueta "span" y le asociamos las clases badge con algpun tipo de badge contextual: 


    <h1>Tutorial de Bootstrap 4 <span class="badge badge-warning">Nuevo</span></h1>

Para conseguir el siguiente resultado:

Tutorial de Bootstrap 4 Nuevo



Puede observarse que la insignia aparece en forma rectangular, por defecto. Más adelante se explica el procecimiento para asignar forma redondeada.

Por ejemplo, puedes crear el siguiente título para una página agregándole al lado una etiqueta llamada «Nuevo»:

<h1>Ejemplo cabecera con badge <span class="badge badge-secondary">Nuevo</span></h1>

Para conseguir el siguiente resultado:

Cabecera badge nuevo con Bootstrap 4

En un botón.

De forma similar asociamos un badge a un botón:

    <button type="button" class="btn btn-primary">
      Mensajes<span class="badge badge-primary ml-1">4</span>
    </button>


«Para que el badge no aparezca pegado al texto del botón definimos un margen con la clase "ml-1".».



IR A PORTAFOLIO

😎 Escalabilidad de las insignias o badges


Las insignias son escalables y se ajustan al tamaño del elemento primario inmediato mediante el uso del tamaño de fuente relativo.

Por ejemplo, si utilizas las etiquetas h1, h2, h3, h4, h5 y h6 de la siguiente forma:

<h1>Ejemplo cabecera con badge <span class="badge badge-secondary">Nuevo</span></h1>
  <h2>Ejemplo cabecera con badge <span class="badge badge-secondary">Nuevo</span></h2>
<h3>Ejemplo cabecera con badge <span class="badge badge-secondary">Nuevo</span></h3>
<h4>Ejemplo cabecera con badge <span class="badge badge-secondary">Nuevo</span></h4>
<h5>Ejemplo cabecera con badge <span class="badge badge-secondary">Nuevo</span></h5>
<h6>Ejemplo cabecera con badge <span class="badge badge-secondary">Nuevo</span></h6>

Consigues como resultado:

IR A PORTAFOLIO

😎 Insignias o badges como pequeño conteo


En un botón.

Las insignias se pueden usar como parte de enlaces o botones con el objetivo principal de mostrar un contador.

Por ejemplo, puedes crear un botón o barra de notificaciones como la siguiente:

<button type="button" class="btn btn-primary">
    Notificaciones <span class="badge badge-light">25</span>
</button>

Para conseguir como resultado:

Botón con badge de conteo en Bootstrap 4

< IR A PORTAFOLIO

😎 Badges en forma de píldoras


Si queremos que las insignias o badges aparezcan con forma de píldoras, es decir con los vértices redondeado (con un radio de borde mas grande y un relleno horizontal adicional), debemos hacer la modificación en el div agregando la clase badge-pill a la etiqueta "span".

Por defecto, las insignias tienen un redondeo de .25rem.

En el ejemplo que sigue, el código solo cambia que debemos agregar la clase "badge-pill": 

  <h1>Tutorial de Bootstrap 4 <span class="badge badge-pill badge-primary">Nuevo</span></h1>
    <button type="button" class="btn btn-primary">
      Mensajes<span class="badge badge-pill badge-primary ml-1">4</span>
    </button>

Resultando

Tutorial de Bootstrap 4 Nuevo





Bootstrap dispone de la clase .badge-pill para agregar un redondeo más grande, precisamente de 10rem.

De esta forma, puedes conseguir visualizar las insignias tal y como se muestran a continuación:

Badges con más borde redondeado en Bootstrap 4

Si necesitas agregar un redondeo específico siempre puedes crear tu propia clases y aplicarle la propiedad border-radius con el valor que necesites.

En una lista.

Ejemplo: 

 
<button><span class="badge badge-pill badge-primary ml-1">1</span></button> Agudas 
  
  <span class="badge badge-pill badge-primary ml-1">2 </span> Graves  
  
  <span class="badge  badge-primary ml-1">3</span> Esdrújulas

Resultando lo siguiente:

Agudas

2 Graves

3 Esdrújulas

Puede apreciarse la utilidad de los badges para resaltar componentes en una lista. Y, en el ejemplo se expusieron tres casos:

En el caso el badge estaba contenido dentro de un botón.

En el caso 2 igual que en el anterior, se aplicó el elemento badge-pill para asignar la redondez.

En el 3 fue el único donde no se aplicó el elemento badge-pill y se observa la forma rectangular sobre el dígito. Puede apreciarse la diferencia visual entre ambos, ante la ausencia del elemento badge-pill.

El ejemplo 4, expone un badge con contorno negro:

<div class="col-sm-6 border border-light rounded">
		
				<span class="badge badge-dark display-5">4</span>
			</div>

El resultado es:

4


IR A PORTAFOLIO

😎 Enlaces como insignias


De forma rápida puedes crear enlaces con formato badge simplemente agregando la clase badge al elemento <a>.

Por ejemplo:

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

El resultado es el siguiente:

Primary Secondary Success Danger Warning Info Light Dark

Enlaces con Badges



ENLACE 1 5


ENLACE 2 10


ENLACE 3 2

⁂



IR A PORTAFOLIO


http://www.musikawa.es/7-herramientas-online-para-crear-insignias-o-badges-musikawa/

https://rosalieledda.com/2014/12/15/herramientas-para-crear-badges-o-insignias/

https://rosalieledda.com/2015/12/02/herramientas-para-crear-insignias-badges/

Complementarios,

https://www.hostinger.mx/tutoriales/que-es-bootstrap/#Glyphicons

https://www.glyphicons.com/sets/basic/

https://programmerclick.com/article/66832041781/

https://www.jose-aguilar.com/blog/las-insignias-o-badges-en-bootstrap-4/#codesyntax_2

https://www.jose-aguilar.com/blog/las-insignias-o-badges-en-bootstrap-4/

https://www.tutorialesprogramacionya.com/bootstrap4ya/detalleconcepto.php?punto=62&codigo=62&inicio=60

http://www.w3bai.com/es/bootstrap/bootstrap_badges_labels.html


a la/s
Etiquetas: ,