Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de Bootstrap: Explicación de la tarjeta Bootstrap 4

 En este tutorial de Bootstrap, aprenderemos sobre el nuevo componente Card introducido en Bootstrap 4 que reemplaza muchos componentes antiguos en Bootstrap 3, y se puede usar para crear diseños web de estilo moderno sin reinventar el pozo o ser un diseñador CSS con deep Conocimiento de CSS. Ahora, y gracias a Bootstrap 4, puede, como desarrollador con poco conocimiento de CSS, crear diseños modernos y profesionales basados ​​en tarjetas.

Las tarjetas Bootstrap proporcionan contenedores flexibles para mostrar una combinación de contenido (texto, imágenes, enlaces, etc.) de forma agrupada. Se pueden crear agregando solo un montón de clases CSS al marcado HTML y se pueden diseñar y personalizar fácilmente para presentar un aspecto nuevo y distinguido.

Las tarjetas se utilizan para crear diseños avanzados como Albañilería. Encontrará tarjetas en muchas plataformas web importantes, como sitios web de comercio electrónico, paneles de análisis y blogs, etc.

Para los usuarios de Bootstrap, las tarjetas son un reemplazo de los componentes populares: paneles, miniaturas y pozos (todos estos ahora se pueden crear con tarjetas)

Antes de empezar a ver cómo crear diferentes tipos de tarjetas. Estos son un resumen de la información sobre Bootstrap 4 Cards

  • Las tarjetas se utilizan para presentar una combinación de contenido de una manera elegante y compacta.
  • Las tarjetas se construyen sobre Flexbox
  • Las tarjetas no tienen margen por defecto
  • Las cartas se pueden organizar fácilmente en grupos, mazos o columnas de mampostería
  • Las tarjetas tienen encabezado, pie de página y 1 o más cuerpos
  • Las tarjetas se pueden alinear fácilmente y mezclar bien con los otros componentes de Bootstrap, etc.

En este tutorial, se le presentará el nuevo componente de la tarjeta, luego verá diferentes elementos de una tarjeta y, finalmente, creará un diseño similar a la mampostería utilizando tarjetas y columnas de tarjetas.

Primero comience creando un archivo HTML y luego copie la siguiente plantilla de inicio de los documentos de Bootstrap en el nuevo archivo

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Bootstrap 4 Card Example</title>
  </head>
  <body>
    <div class="container">   
    <!-- Our Simple Card Goes Here -->
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Ahora comencemos creando una tarjeta básica. Agregue un <div>con la clase .cardpara crear el contenedor externo del componente de su tarjeta

A continuación, dentro del contenedor exterior, agregue un encabezado, cuerpo de tarjeta y pie de página

Puede agregar un encabezado creando un elemento de encabezado <div>o y <h*>luego agregue la .card-headerclase

Puede crear un cuerpo de tarjeta agregando una .card-bodyclase a un<div>

Para el pie de página, debe agregar un <div>con la clase.card-footer

<div class="card">
    <div class="card-header">
        Card Header    
    </div>
    <div class="card-body">
        Card Body
    </div>  
    <div class="card-footer">
        Card Footer
    </div>            
</div>

Tutorial de Bootstrap

Tenga en cuenta que puede agregar uno o varios cuerpos de tarjeta a su tarjeta y también puede envolver el contenido dentro del cuerpo en otras etiquetas como <p>

<div class="card-body">
    <p>
        You can also add a second body
    </p>
</div> 

Tutorial de Bootstrap

Utilice un cuerpo de tarjeta cuando desee crear una sección acolchada dentro de una tarjeta.

Usando .card-img-topcard-img-bottomcrea tapas de imagen que son imágenes que existen en la parte superior e inferior del cuerpo / cuerpos de la tarjeta

<img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top">
<div class="card-body"></div>

<img class="card-img-bottom" src="https://source.unsplash.com/daily" alt="Card image bottom">

Tutorial de Bootstrap

Puede ver que el componente de la tarjeta está tomando todo el ancho de su división de contenedor, pero puede controlar el ancho con diferentes medios:

  • usando las propiedades widthmax-widthCSS
<div class="card"  style="width:20rem;">...</div>

Tutorial de la tarjeta Bootstrap

  • usando Bootstrap 4 Grid

También puede configurar la altura, pero en la mayoría de los casos, la altura debe ajustarse a la alineación vertical del contenido de la tarjeta, por lo que rara vez tendrá que configurarla.

Para agregar contenido dentro del cuerpo de la tarjeta, también tiene .card-title, .card-subtitle, .card-textvarias clases ( ) que facilitan el estilo de diferentes tipos de contenido, como el título, el subtítulo y el texto de la tarjeta.

Puede usar etiquetas HTML estándar para diseñar texto dentro de la .card-textclase

<div class="card-body">
         <h3 class="card-title">Card title</h3>
         <h4 class="card-subtitle">Card subtitle</h4>
          <p class="card-text">This is a card body 1</p></div>

¿Quiere utilizar la imagen de la tapa como superposición? simplemente puede cambiar la .card-bodyclase con la .card-img-overlayclase

<div class="card">

<img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">  
    <div class="card-img-overlay">
         <h3 class="card-title">Card 2 title</h3>
         <h4 class="card-subtitle">Card 2 subtitle</h4>
          <p class="card-text">This is a card 2 body </p>
    </div>
    </div>

Tutorial de la tarjeta Bootstrap

Puede agregar pestañas de navegación y píldoras al encabezado de su tarjeta usando navnav-tabsnav-pillscard-header-tabscard-header-pillclases con <ul>etiquetas

            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Tab 1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Tab 2</a>
                        </li>
                </ul>        
            </div>

Tutorial de la tarjeta Bootstrap

Puede agregar enlaces al contenido de la tarjeta usando la .card-linkclase con un <a>elemento

 <div class="card">

<img class="card-img-top" src="https://source.unsplash.com/daily?rock" alt="Card image top">  
    <div class="card-img-overlay white">
         <h3 class="card-title">Card title</h3>
         <h4 class="card-subtitle">Card  subtitle</h4>
          <p class="card-text">You can add links to card body</p>
                    <a href="#" class="card-link">Link 1</a>
                <a href="#" class="card-link">Link 2</a>
    </div>
    </div>  

Tutorial de la tarjeta Bootstrap

Puede utilizar la lista como contenido del cuerpo. Por ejemplo, así es como puede crear dos listas elegantes sin ningún CSS personalizado adicional

  <div class="card text-primary border-primary">
  <ul class="list-group">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item">Item 3</li>
  </ul>

    </div>   
    <br>
  <div class="card text-primary border-primary">
    <div class="card-body">
      <h2 class="card-title"> My List</h2>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item">Item 3</li>
  </ul>
    </div>

Tutorial de la tarjeta Bootstrap

¿Cómo crear diseños complejos basados ​​en tarjetas?

Las tarjetas individuales son una excelente manera de mostrar una combinación de contenido, pero generalmente es necesario mostrar una colección de tarjetas para crear diseños complejos, como diseños de mampostería.

Grupos de tarjetas Bootstrap

Puede crear una sola unidad de varias tarjetas usando Tarjetas. Las columnas de la unidad tendrán el mismo ancho y alto (esto se logra usando Flexbox).

Este es un ejemplo de un grupo de 3 cartas Ejemplo de tarjeta Bootstrap

Barajas de cartas Bootstrap

Los mazos de cartas son similares a los grupos de cartas, excepto que las cartas individuales dentro de un mazo no están adjuntas

Ejemplo de tutorial de Bootstrap 

Columnas de tarjetas Bootstrap

Cards Columns proporciona una agrupación que organiza las tarjetas en un diseño de mampostería (estilo Pinterest). No necesita proporcionar código CSS o JavaScript / jQuery adicional, simplemente envuelva sus tarjetas dentro de un <div>con .card-columnsy Bootstrap 4 le presentará un diseño de mampostería. Pero tenga en cuenta que esto es solo CSS, no código JavaScript involucrado, por lo que el diseño de mampostería es simple, las tarjetas se ordenan desde arriba a la izquierda, desde abajo a la derecha y no hay una manera fácil de cambiar este comportamiento a menos que esté usando un complemento de Mosonry.

Vea el siguiente lápiz para ver un ejemplo

Tutorial de Bootstrap

## Conclusión

En este tutorial, presentamos el componente Tarjeta.

Gracias a Bootstrap 4, ya no se sentirá intimidado cuando desee crear diseños modernos basados ​​en tarjetas y estilos, incluso si recién está comenzando con HTML y CSS o si es un desarrollador sin amplios conocimientos de CSS.

Publicar un comentario

0 Comentarios