Artículos
Bootstrap

Citas en Bootstrap

23/Jun/2015

Ya vimos en un artículo como podemos poner una cita en el lenguaje HTML mediante el elemento blockquote. Normalmente los navegadores interpretan este elemento como un bloque identado, el cual tiene una separación superior e inferior con los elementos que lo representan. Es por ello por lo que se mal utilizó para ejecutar identaciones de información en las páginas web.

Mediante el framework Bootstrap podemos dar un formato a las citas de una forma muy sencilla y utilizando el elemento blockquote. Si seguimos una serie de estructuras podremos ver que las citas en Bootstrap se representan con estilos asociados.

Lo primero será poner una cita. Vamos a utilizar una cita de Groucho Marx. Simplemente tendremos que poner el texto de la cita entre el elemento blockquote.

No tengo respuestas para casi nada y sin embargo tengo preguntas para casi todo.

Es importante destacar que el texto de la cita está dentro del elemento blockquote, pero que de igual forma lo hemos recubierto de un elemento párrafo.

Visualmente veremos que el texto aparece con una identación, cambio de tipografía y la fuente es ligeramente distinta a la del texto normal.

Ahora pondremos el autor de la cita. El autor irá en un siguiente bloque dentro del blockquote, pero recubierto de un elemento footer.

No tengo respuestas para casi nada y sin embargo tengo preguntas para casi todo.

Groucho Marx

En este caso la cita en Bootstrap nos mostrará el autor con una tipografía más pequeña, el texto en gris y con un guión por delante.

Otra cosa que podemos hacer a la hora de crear una cita en Bootstrap es alinear la cita a la derecha. Para ello deberemos de utilizar la clase «blockquote-reverse» la cual aplicaremos al elemento blockquote.

No tengo respuestas para casi nada y sin embargo tengo preguntas para casi todo.

Groucho Marx

Por último podemos hacer citas en Bootstrap en las que incluyamos información de dónde encontramos la cita. Es decir, si es de algún libro, película,.. Para ello dentro del elemento footer utilizamos el elemento cite indicando dónde está referenciada la cita.

Podría quedar de esta forma para, por ejemplo, una cita de Miguel Delibes.

“Yo nací en Ávila, la vieja ciudad de las murallas, y creo que el silencio y el recogimiento casi místico de esta ciudad...

Miguel Delibes en La sombra del ciprés es alargada

Vemos que el elemento cite tiene un atributo title que complementa la información del origen de la cita.

Lo mejor es que visualices el resultado para que veas el efecto de poner citas en Bootstrap.

Código Fuente

Descárgate el código fuente de Citas en Bootstrap
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Bootstrap

Disfruta también de nuestros artículos sobre Bootstrap en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Bootstrap

¿Te atreves a probar tus habilidades y conocimiento en Bootstrap con nuestro test?

Test Bootstrap
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios