Arranque | Tarjetas

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

Deja una respuesta

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