Bootstrap 4: Introduccion a las Cards o Tarjetas
Las cards o tarjetas en Bootstrap 4 son un nuevo componente que ayuda a mostrar contenido de una mejor manera. Tambien complementa y sustituye otros componentes de la version 3.
Descargar Bootstrap 4
Antes que nada debemos descargar los archivos css y js de Bootstrap 4 para ello, vamos a la pagina http://getbootstrap.com y en la sección de descargas seleccionamos la opcion “compiled css y js”
Una vez descargado, descomprimimos y copiamos los archivos a una carpeta donde trabajaremos con esos archivos.
En este tutorial solo usaremos el archivo bootstrap.min.css, por lo que mas adelante explicaremos el tema del js.
Plantilla Inicial
[code language=”html”]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>.: Bootstrap 4 :.</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!– Insertar codigo aqui –>
</body>
</html>
En esta plantilla se puede ver los elementos basicos de una pagina web e incluimos el archivo bootstrap.min.css
Contenedor, Filas y Columnas
Seria lo mismo que, container, rows y cols.
En el apartado “Insertar codigo aqui ” debemos agregar el contenido de nuestra pagina o ejemplo, vamos a empezar agregando una fila con 3 columnas, tal como vemos a continuacion:
[code language=”html”]<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
[/code]Como se puede ver el manejo de contenedores, filas y columnas es igual en bootstrap 3 y 4.
El código de las tarjetas las vamos a insertar dentro de una columna.
Anatomía de las Tarjetas
Tal y como les comentaba las tarjetas son un componente nuevo y agregan nuevo funcionamiento y también sustituyen a los paneles.
Y a continuación el codigo de la tarjeta mas básica.
[code language=”html”]<div class="card">
<img class="card-img-top" src="imagen.jpg" alt="Mi Imagen">
<div class="card-body">
<h4 class="card-title">Titulo de la tarjeta</h4>
<p class="card-text">Texto de ejemplo</p>
<a href="#" class="btn btn-primary">Ir a …</a>
</div>
</div>
Para este ejemplo sencillo, se incluye una imagen, un titulo, texto y un boton.
Tu puedes personalizar como quieras, puedes quitar por ejemplo, la imagen y el boton y obtener otro resultado.
Codigo completo
Este es el código completo:
[code language=”html”]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>.: Bootstrap 4 :.</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br><br><br>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="02-reino-unido.jpg" alt="Mi Imagen">
<div class="card-body">
<h4 class="card-title">Titulo de la tarjeta</h4>
<p class="card-text">Texto de ejemplo</p>
<a href="#" class="btn btn-primary">Ir a …</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="03-india.jpg" alt="Mi Imagen">
<div class="card-body">
<h4 class="card-title">Titulo de la tarjeta</h4>
<p class="card-text">Texto de ejemplo</p>
<a href="#" class="btn btn-primary">Ir a …</a>
</div>
</div> </div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="04-china.jpg" alt="Mi Imagen">
<div class="card-body">
<h4 class="card-title">Titulo de la tarjeta</h4>
<p class="card-text">Texto de ejemplo</p>
<a href="#" class="btn btn-primary">Ir a …</a>
</div>
</div> </div>
</div>
</div>
</body>
</html>
Resultado
Este es el resultado con mis imagenes, ustedes agreguen las suyas.
No olviden suscribirse a mi blog.
Gracias muy buen aporte amigo