Una tarjeta es un contenedor de contenido flexible y extensible. Incluye opciones para encabezados y pies de página, una amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualización.
Reemplaza el uso de paneles, pozos y miniaturas. Como todo se puede usar en un solo contenedor llamado tarjeta .
Tarjeta básica: el componente básico de una tarjeta es el cuerpo de la tarjeta y con la tarjeta .
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Card</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.4.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> <div class="container"> <h2 style="color:green;">GeeksforGeeks</h2> <div class="card"> <div class="card-body"> A computer science portal for geeks </div> </div> </div> </body> </html>
Producción:
Encabezado y pie de página: el encabezado de tarjeta proporciona un encabezado para las tarjetas y el pie de página proporciona un pie de página para las tarjetas.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Card</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.4.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> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <div class="card"> <div class="card-header">Header</div> <div class="card-body">Content</div> <div class="card-footer">Footer</div> </div> </div> </body> </html>
Producción:
Título y enlaces de la tarjeta : El título de la tarjeta se usa para dar un título a la tarjeta y el enlace de la tarjeta se usa para proporcionar un enlace a la tarjeta si así lo requiere.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Card</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.4.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> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text"> Some example text. Some example text. </p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div> </body> </html>
Producción:
Imágenes de tarjeta: las imágenes en la tarjeta se insertan con card-img-top y con card-img-bottom con la ayuda de estos dos y se usa la etiqueta img para ingresar la imagen.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Card</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.4.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> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <div class="card" style="width:200px"> <img class="card-img-top" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190530183756/Good-Habits-for-developers-programmers.png" alt="Card image" style="width:100%"> <div class="card-body"> <h4 class="card-title">Developer Guy</h4> <p class="card-text"> Developer Guy love to develop front-end and back-end </p> <a href="#" class="btn btn-primary"> See Profile </a> </div> </div> </div> </body> </html>
Producción:
Ejemplo de imagen inferior:
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Card</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.4.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> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <div class="card" style="width:200px"> <div class="card-body"> <h4 class="card-title">Developer Guy</h4> <p class="card-text"> Developer Guy love to develop front-end and back-end </p> <a href="#" class="btn btn-primary"> See Profile </a> </div> <img class="card-img-bottom" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190530183756/Good-Habits-for-developers-programmers.png" alt="Card image" style="width:100%"> </div> </div> </body> </html>
Producción:
Superposiciones de imágenes: en esto, solo tenemos que usar una clase adicional llamada card-img-overlay en la misma línea de código que ha usado para las imágenes de tarjetas.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Card</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.4.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> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <div class="card" style="width:300px"> <img class="card-img-bottom" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190530183756/Good-Habits-for-developers-programmers.png" alt="Card image" style="width:100%"> <div class="card-img-overlay"> <div class="card-body"> <h4 class="card-title">Developer Guy</h4> <p class="card-text" style="color:red;"> Developer Guy love to develop front-end and back-end </p> <a href="#" class="btn btn-primary"> See Profile</a> </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo de grupo de tarjetas:
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Card</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.4.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> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <div class="card-deck"> <div class="card-text-white bg-primary"> <div class="card-body"> <h4 class="card-title">PRIMARY</h4> </div> </div> <div class="card-text-white bg-success"> <div class="card-body"> <h4 class="card-title">SUCCESS</h4> </div> </div> <div class="card-text-white bg-danger"> <div class="card-body"> <h4 class="card-title">DANGER</h4> </div> </div> </div> </div> </body> </html>
Producción:
Listar grupos: Crea una lista de contenidos en una ficha.
Ejemplo:
HTML
<html lang="en"> <head> <title>Bootstrap Card</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.4.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> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <div class="card"> <ul class="list-group list-group-flush"> <li class="list-group-item">Bootstrap</li> <li class="list-group-item">HTML</li> <li class="list-group-item">JavaScript</li> </ul> </div> </div> </body> </html>
Producción:
Fregadero de cocina: es el nombre que se le da al tipo de tarjeta que consiste en todo lo que contiene, es una mezcla y combinación de múltiples contenidos para hacer la tarjeta deseada.
Ejemplo:
HTML
<html lang="en"> <head> <title>Bootstrap Card</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.4.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> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <div class="card"> <ul class="list-group list-group-flush"> <li class="list-group-item">Bootstrap</li> <li class="list-group-item">HTML</li> <li class="list-group-item">JavaScript</li> </ul> <div class="card-block"> <a href="" class="class-link">Cart</a> <a href="" class="class-link">Add Item</a> </div> </div> </div> </body> </html>
Producción:
Navegación: Agrega barra de navegación a las tarjetas.
Ejemplo:
HTML
<html lang="en"> <head> <title>Bootstrap Card</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.4.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> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <div class="card-text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link active" href="#"> Active</a> </li> <li class="nav-item"> <a class="nav-link " href="#"> link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#"> Disabled</a> </li> </ul> </div> <div class="card-block"> <h4 class="card-title">Title</h4> <p class="card-text">This the th test area</p> <a href="#" btn-btn-primary>Click me</a> </div> </div> </div> </body> </html>
Producción:
Otro ejemplo en forma de píldoras:
Ejemplo:
HTML
<html lang="en"> <head> <title>Bootstrap Card</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.4.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> <div class="container"> <h1 style="color:green">GeeksforGeeks</h1> <div class="card-text-center"> <div class="card-header"> <ul class="nav nav-pills card-header-tabs"> <li class="nav-item"> <a class="nav-link active" href="#"> Active</a> </li> <li class="nav-item"> <a class="nav-link " href="#"> link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#"> Disabled</a> </li> </ul> </div> <div class="card-block"> <h4 class="card-title">Title</h4> <p class="card-text">This the th test area</p> <a href="#" btn-btn-primary>Click me</a> </div> </div> </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