Blockquotes
Estos elementos se emplean para incluir en tus páginas trozos de contenidos de otras fuentes.
Puede ver este ejemplo en pantalla completa.
Podemos usar el elemento
Puede ver este ejemplo en pantalla completa.
Bootstrap también ofrece la posibilidad de modificar la alineación del elemento <blockquote> para ello tenemos que añadir al elemento la clase .pull-right.
Ejemplo:
Puede ver este ejemplo en pantalla completa.
Utiliza el elemento
Ejemplo:
<blockquote>
para encerrar el contenido que se va a incluir en la página. También se recomienda utilizar el elemento <p>
para encerrar el texto dentro del <blockquote>
. Ejemplo:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BlockQuote Bootstrap</title> <!-- CSS de Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- Librerias opcionales que activan el soporte de HTML5 para IE8 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <br/> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote> <!-- LibrerÃa jQuery requerida por los plugins de JavaScript --> <script src="http://code.jquery.com/jquery.js"></script> <!-- Todos los plugins JavaScript de Bootstrap --> <script src="js/bootstrap.min.js"></script> </body> </html>
Puede ver este ejemplo en pantalla completa.
Podemos usar el elemento
<small>
para mostrar la fuente original del contenido como podría ser una persona, sitio web, etc, este inclúyelo dentro de un elemento <cite>. Ejemplo:<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BlockQuote con fuente Bootstrap</title> <!-- CSS de Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- Librerias opcionales que activan el soporte de HTML5 para IE8 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <br/> <blockquote> <p>La imaginación es el ojo del alma. El tiempo, el pensamiento de las mentes necias.</p> <small>Frase célebre de <cite title="Anónimo">Anónimo</cite></small> </blockquote> <!-- Librería jQuery requerida por los plugins de JavaScript --> <script src="http://code.jquery.com/jquery.js"></script> <!-- Todos los plugins JavaScript de Bootstrap --> <script src="js/bootstrap.min.js"></script> </body> </html>
Puede ver este ejemplo en pantalla completa.
Bootstrap también ofrece la posibilidad de modificar la alineación del elemento <blockquote> para ello tenemos que añadir al elemento la clase .pull-right.
Ejemplo:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Alineación BlockQuote Bootstrap</title> <!-- CSS de Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- Librerias opcionales que activan el soporte de HTML5 para IE8 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <br/> <blockquote class="pull-right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Frase célebre de <cite title="Nombre Apellidos">Nombre Apellidos</cite></small> </blockquote> <!-- Librería jQuery requerida por los plugins de JavaScript --> <script src="http://code.jquery.com/jquery.js"></script> <!-- Todos los plugins JavaScript de Bootstrap --> <script src="js/bootstrap.min.js"></script> </body> </html>
Puede ver este ejemplo en pantalla completa.
Comentarios
Publicar un comentario