En este artículo, aprenderemos cómo usar insignias en una celda de tabla usando Bootstrap. Primero aprenderemos a usar Bootstrap Badges y luego los agregaremos dentro de las celdas de una tabla.
Insignias de Bootstrap: las insignias receptivas se incluyen con la versión más reciente de Bootstrap. Las insignias agregan información adicional como recuento o etiqueta a cualquier contenido. El estilo de las insignias proporciona una pista visible de su propósito. Estas insignias pueden aparecer al final de una oración, enlace o botón. El siguiente ejemplo muestra las insignias de Bootstrap.
Ejemplo: Aquí usaremos los bafges en forma normal, en el próximo ejemplo lo usaremos en una celda de tabla.
HTML
<!DOCTYPE html> <html> <head> <script src= "https://code.jquery.com/jquery-3.4.1.slim.min.js"> </script> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </script> </head> <body class="container pt-4"> <h5>Button</h5> <button type="button" class="btn btn-success"> Public Celebrity <span class="badge badge-light">7</span> </button> <br><br> <h5>Headings</h5> <h1>GFG Classic <span class="badge badge-secondary"> Krishna K </span> </h1> <h2>GFG Classic <span class="badge badge-secondary"> Krishna K </span> </h2> <h3>GFG Classic <span class="badge badge-secondary"> Krishna K </span> </h3> <br> <h5>Pill Badges</h5> <span class="badge badge-pill badge-success"> GFG S </span> <span class="badge badge-pill badge-danger"> GFG D </span> <span class="badge badge-pill badge-warning"> GFG W </span> <br><br> <h5>Links</h5> <a href="#" class="badge badge-primary"> GFG P </a> <a href="#" class="badge badge-info"> GFG I </a> <a href="#" class="badge badge-light"> GFG L </a> </body> </html>
Producción:
Insignias en una celda: las insignias se pueden colocar en una celda de la tabla simplemente incluyendo la división que contiene la insignia en una de las celdas de la tabla. Esto se puede usar para resaltar algún texto en la tabla. Los siguientes ejemplos demuestran el uso de insignias dentro de una celda de tabla.
Ejemplo 1: En este ejemplo, mostraremos las insignias en la primera columna y otro texto en la segunda columna.
HTML
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"> </script> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container pt-4"> <h2>Badge inside cell Example 1</h2> <table class="table table-responsive"> <thead> <tr> <th>Badge</th> <th>Content</th> </tr> </thead> <tbody> <tr> <td><span class="badge badge-success text-uppercase"> Success </span> </td> <td>This is the success content</td> </tr> <tr> <td><span class="badge badge-warning text-uppercase"> Warning </span> </td> <td>This is the warning content</td> </tr> <tr> <td><span class="badge badge-danger text-uppercase"> Danger </span> </td> <td>This is the danger content</td> </tr> <tr> <td><span class="badge badge-dark text-uppercase"> Dark </span> </td> <td>This is the dark content</td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, mostraremos las insignias junto al contenido de la celda de la tabla.
HTML
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"> </script> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container pt-4"> <h2>Badge inside cell Example 2</h2> <table class="table table-responsive"> <thead> <tr> <th>S.No</th> <th>Policy Name</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Spring Sale <span class="badge badge-primary text-uppercase">new </span> </td> </tr> <tr> <td>2</td> <td>Summer Special 21 <span class="badge badge-primary text-uppercase">new </span> </td> </tr> <tr> <td>3</td> <td>Winter Wardrobe 19 <span class="badge badge-danger text-uppercase">expired </span> </td> </tr> <tr> <td>4</td> <td>All Day Bonanza <span class="badge badge-danger text-uppercase">expired </span> </td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por KrishnaKripa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA