La clase .w3-badge se usa para agregar información adicional al contenido. Por ejemplo, algunos sitios web asocian una serie de notificaciones al enlace. El número de notificación se ve cuando se inicia sesión en un sitio web en particular que indica los números de noticias o notificaciones para ver al hacer clic en él. Esta clase ayuda a los desarrolladores a agregar insignias circulares a su sitio web, el color predeterminado es negro.
Ejemplo: agregar insignias en la página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element --> <!-- w3-center is used to set the content of the element to the center --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Badges in W3.CSS --> <div class="w3-container"> <h5>Notifications heading <!-- Adding Badge with value 4 --> <span class="w3-badge">4</span> </h5> <h5>Updates <!-- Adding Badge with value 2 --> <span class="w3-badge">2</span> </h5> <h5>Messages <!-- Adding Badge with value 1 --> <span class="w3-badge">1</span> </h5> <h5>Request <!-- Adding Badge with value 0 --> <span class="w3-badge">0</span> </h5> </div> </body> </html>
Producción:
Las insignias se pueden usar en cualquier parte de la página HTML. Se pueden usar dentro de botones, tablas, párrafos, listas, etc. Son muy útiles ya que se pueden usar en cualquier parte de la página. Incluso podemos colorearlos o cambiar su tamaño usando W3.CSS para otras clases.
Ejemplo: agregar insignias de colores en la página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Colored Badges in W3.CSS --> <div class="w3-container"> <h5>Notifications heading <!-- Adding Badge with value 4 --> <span class="w3-badge w3-pink">4</span> </h5> <h5>Updates <!-- Adding Badge with value 2 --> <span class="w3-badge w3-orange">2</span> </h5> <h5>Messages <!-- Adding Badge with value 1 --> <span class="w3-badge w3-purple">1</span> </h5> <h5>Request <!-- Adding Badge with value 0 --> <span class="w3-badge w3-blue">0</span> </h5> </div> </body> </html>
Producción:
Ejemplo: Agregar insignias de varios tamaños.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Badges with different sizes using W3.CSS --> <div class="w3-container"> <h5>Notifications heading <!-- Adding Badge with value 4 --> <span class="w3-badge w3-pink w3-tiny">1</span> </h5> <h5>Updates <!-- Adding Badge with value 2 --> <span class="w3-badge w3-orange w3-large">2</span> </h5> <h5>Messages <!-- Adding Badge with value 1 --> <span class="w3-badge w3-purple w3-xxlarge">10</span> </h5> <h5>Request <!-- Adding Badge with value 0 --> <span class="w3-badge w3-blue w3-jumbo">20</span> </h5> </div> </body> </html>
Producción:
Aunque el valor predeterminado es una insignia circular y no hay una clase para insignias cuadradas, también podemos crear una insignia cuadrada usando la clase w3-round para reducir su radio de borde.
Ejemplo: agregar insignias cuadradas en la página HTML.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Square Badges in W3.CSS --> <div class="w3-container"> <h5>Notifications heading <!-- Adding Badge with value 4 --> <span class="w3-badge w3-pink w3-round">1</span> </h5> <h5>Updates <!-- Adding Badge with value 2 --> <span class="w3-badge w3-orange w3-round">2</span> </h5> <h5>Messages <!-- Adding Badge with value 1 --> <span class="w3-badge w3-purple w3-round">10</span> </h5> <h5>Request <!-- Adding Badge with value 0 --> <span class="w3-badge w3-blue w3-round">20</span> </h5> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA