Insignias:
Las insignias son números asociados con el enlace para indicar la cantidad de artículos asociados con el enlace. El número de notificación se ve cuando se inicia sesión en un sitio web en particular e indica los números de noticias o notificaciones para ver al hacer clic en él.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>badge example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>
.container {
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<a href="#">UPDATES
<span class="badge badge-secondart">
4
</span>
</a>
<br>
<a href="#">NOTIFICATIONS
<span class="badge badge-secondart">
10
</span>
</a>
<br>
<a href="#">MESSAGES
<span class="badge badge-secondart">
4
</span>
</a>
<br>
</div>
</body>
</html>
Producción:
Variaciones contextuales: 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>
<head>
<title>badge example</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.1.0/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.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<style>
.container {
font-size: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary">
NOTIFICATIONS
<span class="badge badge-light">2</span>
</button>
<br>
<br>
<button type="button" class="btn btn-default">
MESSAGES
<span class="badge badge-warning">2</span>
</button>
<br>
<br>
<button type="button" class="btn btn-info">
UPDATES
<span class="badge badge-danger">2</span>
</button>
<br>
<br>
<button type="button" class="btn btn-light">
NEWS
<span class="badge badge-success">2</span>
</button>
</div>
</body>
</html>
Producción:
Pill Badges: las insignias que usan class = «badge-pill» para hacer que la esquina sea más redondeada.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>badge example</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.1.0/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.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<style>
.container {
font-size: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary">
NOTIFICATIONS
<span class="badge badge-pill badge-light">2</span>
</button>
<br>
<br>
<button type="button" class="btn btn-default">
MESSAGES
<span class="badge badge-pill badge-warning">2</span>
</button>
<br>
<br>
<button type="button" class="btn btn-info">
UPDATES
<span class="badge badge-pill badge-danger">2</span>
</button>
<br>
<br>
<button type="button" class="btn btn-light">
NEWS
<span class="badge badge-pill badge-success">2</span>
</button>
</div>
</body>
</html>
Producción:
Insignias como enlace: las insignias también se pueden usar como un enlace directo a la nueva página.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>badge example</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.1.0/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.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<style>
.container {
font-size: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<a href="#"><button type="button"
class="btn btn-primary">
NOTIFICATIONS
<span class="badge badge-pill badge-light">
2
</span>
</button>
</a>
<br>
<br>
<a href="#">
<button type="button"
class="btn btn-default">
MESSAGES
<span class="badge badge-pill badge-warning">
2
</span>
</button>
</a>
<br>
<br>
<a href="#">
<button type="button"
class="btn btn-info">
UPDATES
<span class="badge badge-pill badge-danger">
2
</span>
</button>
</a>
<br>
<br>
<a href="#">
<button type="button"
class="btn btn-light">
NEWS
<span class="badge badge-pill badge-success">
2
</span>
</button>
</a>
</div>
</body>
</html>
Producción:
Migas de pan:
Se utiliza para indicar la ubicación de la página actual con una jerarquía de navegación. Agrega separadores automáticamente usando CSS. Proporciona un vínculo de retroceso a cada página anterior por la que navega el usuario.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>badge example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <nav aria-label="breadcrumb" role="navigation"> <ol class="breadcrumb"> <li class="breadcrumb-item active" aria-current="page"> GeeksforGeeks </li> </ol> </nav> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>badge example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <nav aria-label="breadcrumb" role="navigation"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#"> GeeksforGeeks </a> </li> <li class="breadcrumb-item active" aria-current="page"> Library </li> </ol> </nav> </div> </body> </html>
Producción:
Ejemplo 3:
HTML
<!DOCTYPE html> <html> <head> <title>badge example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <nav aria-label="breadcrumb" role="navigation"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#"> GeeksforGeeks </a> </li> <li class="breadcrumb-item"> <a href="#"> Library </a> </li> <li class="breadcrumb-item"> <a href="#"> Books </a> </li> <li class="breadcrumb-item"> <a href="#"> Subject </a> </li> <li class="breadcrumb-item active" aria-current="page"> Computer Science </li> </ol> </nav> </div> </body> </html>
Producción:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por MrinalVerma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA