Domingo, 05 Marzo 2017 23:04

Bootstrap desde Dreamweaver: Thumnails responsivos

Valora este artículo
(0 votos)

Cabecera thumbnails responsivos con Bootstrap desde Dreamweaver

Thumbnails responsivos con Bootstrap desde Dreamweaver CC

En esta entrada sobre el uso de Bootstrap desde Dreamweaver CC2017 veremos como insertar imágenes de miniatura (thumbnails) responsivas en tres niveles de dificultad creciente: Insertar el componente Thumbnail en su versión más sencilla, la repetición de cuatro de estos cuatro thumbnails, y la sustitución de la imagen que Dreamweaver inserta por defecto ("Thumbnail_Placeholder.png") por cuatro imágenes de muestra, modificando el comportamiento de algunas etiquetas y agregando otras. Veamos como:

a. Insertando el componente Thumbnail

Una vez que tenemos el punto de inserción en el lugar que insertaremos nuestro componente, el body en nuestro caso, seleccionaremos Insertar -> Componente de Bootstrap -> Thumbnails desde el menú principal de Dreamweaver:

Cabezal insertar el componente de Bootstrap Thumbnail con Dreamweaver

El código html generado es el siguiente:

<div class="row">
<div class="col-md-4">
<div class="thumbnail"><img src="/images/Thumbnail_Placeholder.png" alt="Thumbnail Image 1">
<div class="caption">
<h3>Thumbnail 1 label</h3>
<p>Optional content and buttons for Thumbnail #1</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>

Donde vemos que Dreamweaver ha colocado una fila (div con clase row), y dentro de éstas una columna responsiva (div con clase col-md-4) como contenedora de laa imagen de miniatura, su titular, texto descriptivo y botones.

Para ver el código en vivo hacer clic aquí; mientras que desde aquí podemos descargar el código de ejemplo completo.


b. Ejemplo con 4 thumbnails responsivos básicos

Replicando el procedimiento anterior podemos crear 4 columnas responsivas, lo que podemos lograr también si copiamos y pegamos el siguiente bloque de código la cantidad de veces que necesitemos:

   <div class="col-md-4">
<div class="thumbnail"><img src="/images/Thumbnail_Placeholder.png" alt="Thumbnail Image 1">
<div class="caption">
<h3>Thumbnail 1 label</h3>
<p>Optional content and buttons for Thumbnail #1</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

El código completo debe quedar de la siguiente forma:

<div class="row">
<div class="col-md-3">
<div class="thumbnail"><img src="/images/Thumbnail_Placeholder.png" alt="Texto alternativo para el thumbnail 1">
<div class="caption">
<h3>Título imagen 1</h3>
<p>Texto adicional opcional para la imagen 1</p>
<p><a href="#" class="btn btn-primary" role="button">Ampliar</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"><img src="/images/Thumbnail_Placeholder.png" alt="Texto alternativo para el thumbnail 2">
<div class="caption">
<h3>Título imagen 2</h3>
<p>Texto adicional opcional para la imagen 2</p>
<p><a href="#" class="btn btn-primary" role="button">Ampliar</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"><img src="/images/Thumbnail_Placeholder.png" alt="Texto alternativo para el thumbnail 3">
<div class="caption">
<h3>Título imagen 3</h3>
<p>Texto adicional opcional para la imagen 3</p>
<p><a href="#" class="btn btn-primary" role="button">Ampliar</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail"><img src="/images/Thumbnail_Placeholder.png" alt="Texto alternativo para el thumbnail 4">
<div class="caption">
<h3>Título imagen 4</h3>
<p>Texto adicional opcional para la imagen 4</p>
<p><a href="#" class="btn btn-primary" role="button">Ampliar</a></p>
</div>
</div>
</div>
</div>

Visualmente debemos tener un resultado similar al siguiente:

Vista 4 thumnails básicos 

Para ver el código en vivo hacer clic aquí; para descargar el código de ejemplo completo, clic aquí.


c. Ejemplo de edición de los 4 thumbnails

Editando el código anterior podemos fácilmente a un aspecto como el siguiente:

Ejemplo de edición de cuatro thumbnails

Podemos ver en vivo haciendo clic aquí, donde podemos ver que hemos centrado los elementos dentro de la columna responsiva, creando los siguientes estilos adicionales (dentro del código html únicamente para simplificar la estructura de archivos, y por tratarse de un html único):

<style type="text/css">
h1, h2, .thumbnail img, .thumbnail h3, .thumbnail p {
text-align:center;
}
</style>

Podemos descargar el ejemplo completo haciendo clic en este enlace.


Notas finales:

  • Por tratarse de un material de apoyo a temas vistos en cursos presenciales y remotos, se han omitido varios procedimientos para la inserción y edición de códigos, ya que estos se desarrollan durante las clases, o surgen de las consultas individuales de los alumnos.
  • Tanto en este como en otros tutoriales de la serie, cuando hablamos de "códigos generados", en la mayoría de los casos nos referimos a "códigos html generados", ya que queda claro que muchos otros códigos son necesarios, y en la mayoría los escribe el propio programa (por ejemplo, bootstrap.css).
  • Como siempre, para alumnos que estén llevando cualesquiera de los temas relacionados con este tema, pueden realizar sus consultas vía email o personalmente; a los demás visitantes de nuestro sitio los invitamos a utlizar el formulario de contacto dispuesto al pie de este minitutorial.

Saludos para todos!
Plácido Luna.

Visto 311 veces Modificado por última vez en Lunes, 06 Marzo 2017 00:35