Arranque 4 | Insignias

Posted on by Rudeus Greyrat

La clase .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.
Ejemplo: 
 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Badges</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
    <div class="container">
        <h4>Notifications heading
            <span class="badge badge-secondary">
                4
              </span>
        </h4>
        <h4>Updates
            <span class="badge badge-secondary">
                2
              </span>
        </h4>
        <h4>Messages
            <span class="badge badge-secondary">
                1
              </span>
        </h4>
        <h4>Request
            <span class="badge badge-secondary">
                0
              </span>
        </h4>
    </div>
</body>
</html>

Producción: 
 

Insignias contextuales: las clases contextuales ( .badge-* ) se utilizan para cambiar el color de las insignias. Las insignias se pueden usar como parte de enlaces o botones para proporcionar un contador. Dependiendo de cómo se usen, las insignias deben ser confusas para los usuarios. Para este propósito, se utilizan diferentes colores de variaciones para que el usuario no se confunda.
Ejemplo: 
 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Badges</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
    <div class="container">
        <h4>Notifications heading
            <span class="badge badge-primary">
                4
              </span>
        </h4>
        <h4>Updates
            <span class="badge badge-warning">
                2
              </span>
        </h4>
        <h4>Messages
            <span class="badge badge-success">
                1
              </span>
        </h4>
        <h4>Request
            <span class="badge badge-danger">
                0
              </span>
        </h4>
    </div>
</body>
</html>

Producción: 
 

Pill Badges: la clase .badge-pill se usa para hacer que las esquinas de las insignias sean más redondeadas.
Ejemplo: 
 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Badges</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
    <div class="container">
        <h4>Notifications heading
            <span class="badge badge-primary badge-pill">
                4
              </span>
        </h4>
        <h4>Updates
            <span class="badge badge-warning badge-pill">
                2
              </span>
        </h4>
        <h4>Messages
            <span class="badge badge-success badge-pill">
                1
              </span>
        </h4>
        <h4>Request
            <span class="badge badge-danger badge-pill">
                0
              </span>
        </h4>
    </div>
</body>
</html>

Producción: 
 

Insignia dentro de un elemento: las insignias se pueden crear dentro de un elemento.
Ejemplo: 
 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Badges</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
    <div class="container">
        <button type="button" class="btn btn-primary">
            <h4>Notifications heading
                <span class="badge badge-primary badge-danger">4</span>
            </h4>
        </button><br><br>
        <button type="button" class="btn btn-warning">
            <h4>Updates
                <span class="badge badge-light">2</span>
            </h4>
        </button><br><br>
        <button type="button" class="btn btn-primary">
            <h4>Messages
                <span class="badge badge-success">1</span>
            </h4>
        </button><br><br>
        <button type="button" class="btn btn-danger">
            <h4>Request
                <span class="badge badge-primary">0</span>
            </h4>
        </button>
    </div>
</body>
</html>

Producción: 
 

Navegadores compatibles:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *