Latest web development tutorials

miniatura bootstrap

En este capítulo se explicará miniaturas de archivos de inicio. La mayoría de los sitios requieren el diseño de imagen, vídeo, texto, etc., en la red. miniatura de arranque para que esto proporciona una manera fácil. Para utilizar Bootstrap crear imágenes en miniatura de la siguiente manera:

  • Añadir <a> alrededor de la imagen con el .thumbnailclase.
  • Esto añadirá el relleno (padding) cuatro píxeles y un borde gris.
  • Cuando se pasa el ratón sobre la imagen, la animación mostrará el contorno de una imagen.

El siguiente ejemplo ilustra la miniatura predeterminada:

Ejemplos

<Div class = "fila"> <Div class = "col-SM-6 col-MD-3"> <A href = "#" class = "miniatura"> <img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "genérico miniatura marcador de posición"> </ A> </ Div> <Div class = "col-SM-6 col-MD-3"> <A href = "#" class = "miniatura"> <img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "genérico miniatura marcador de posición"> </ A> </ Div> <Div class = "col-SM-6 col-MD-3"> <A href = "#" class = "miniatura"> <img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "genérico miniatura marcador de posición"> </ A> </ Div> <Div class = "col-SM-6 col-MD-3"> <A href = "#" class = "miniatura"> <img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "genérico miniatura marcador de posición"> </ A> </ Div> </ Div>

Trate »

Los resultados son los siguientes:

miniaturas

Añadir contenido personalizado

Ahora que tenemos una miniatura de base, se puede añadir una gran variedad de contenido de miniaturas HTML, como encabezamientos, párrafos, o botones. Los pasos específicos son los siguientes:

  • La etiqueta <a> con .thumbnailclase cambiado <div>.
  • En el <div> dentro, se puede añadir lo que desee agregar. Dado que este es un <div>, podemos usar el nombre predeterminado de la normativa en base a palmo para ajustar el tamaño.
  • Si desea agrupar varias imágenes, por favor ponerlos en una lista desordenada, y cada elemento de la lista dejó flotando.

El siguiente ejemplo ilustra este punto:

Ejemplos

<Div class = "fila"> <Div class = "col-SM-6 col-MD-3"> <Div class = "miniatura"> <img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "genérico miniatura marcador de posición"> <Div class = "subtítulo"> pestaña <H3> Vistas </ h3> <P> Un texto de ejemplo. Un texto de ejemplo. </ P> <P> <A href = "#" class = "btn btn-primaria" role = "botón"> botón </ a> <A href = "#" class = "btn btn-default" role = "botón"> botón </ a> </ P> </ Div> </ Div> </ Div> <Div class = "col-SM-6 col-MD-3"> <Div class = "miniatura"> <img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "genérico miniatura marcador de posición"> <Div class = "subtítulo"> pestaña <H3> Vistas </ h3> <P> Un texto de ejemplo. Un texto de ejemplo. </ P> <P> <A href = "#" class = "btn btn-primaria" role = "botón"> botón </ a> <A href = "#" class = "btn btn-default" role = "botón"> botón </ a> </ P> </ Div> </ Div> </ Div> <Div class = "col-SM-6 col-MD-3"> <Div class = "miniatura"> <img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "genérico miniatura marcador de posición"> <Div class = "subtítulo"> pestaña <H3> Vistas </ h3> <P> Un texto de ejemplo. Un texto de ejemplo. </ P> <P> <A href = "#" class = "btn btn-primaria" role = "botón"> botón </ a> <A href = "#" class = "btn btn-default" role = "botón"> botón </ a> </ P> </ Div> </ Div> </ Div> <Div class = "col-SM-6 col-MD-3"> <Div class = "miniatura"> <img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "genérico miniatura marcador de posición"> <Div class = "subtítulo"> pestaña <H3> Vistas </ h3> <P> Un texto de ejemplo. Un texto de ejemplo. </ P> <P> <A href = "#" class = "btn btn-primaria" role = "botón"> botón </ a> <A href = "#" class = "btn btn-default" role = "botón"> botón </ a> </ P> </ Div> </ Div> </ Div> </ Div>

Trate »

Los resultados son los siguientes:

Las miniaturas