Tutorial de Bootstrap 3: Elementos

Como te estarás dando cuenta, con Bootstrap agilizamos la creación de nuestro diseño gracias a la cantidad de opciones por defecto que trae.
 

Ahora vamos hablar de los elementos por defecto más interesantes que trae Bootstrap , veremos más a fondo los que actualmente nos sacan de más de un apuro a la hora de diseñar acorde a las tendencias actuales.

Imágenes

Como se suele decir, vale más una imagen que mil palabras . La imagen tiene más fuerza para comunicar que la palabra, y ahora se utiliza mucho en la web, vamos a ver como insertar imágenes con Bootstrap.
 

Lo primero que hay que saber, es que si insertamos correctamente las imágenes, éstas se adaptaran al tamaño con el dispositivo con el que accedemos. Supongo que a estas alturas ya no te sorprende. Con Bootstrap nuestro diseño se adapta a cualquier dispositivo.
 

Para insertar una imagen responsive, utilizamos la clase .img-responsive, así nuestra imagen tendrá ancho máximo: 100%, tendrá una altura automática y el display pasará block.

Ahora ya que sabemos insertar una imagen responsive, Bootstrap nos permite darle 3 tipos de formas a las imágenes:

Imágenes con bordes redondos
 

Si añadimos la clase .img-rounded , nuestra imagen aparecerá con unos bordes ligeramente redondos.
 

Imagen circular
 

Añadiendo la clase .img-circle , tendremos una imagen con un marco circular.
 

Imagen Thumbnail
 

Crea una borde muy fino alrededor de la imagen con la clase .img-thumbnail .
 

Si queremos centrar la imagen , lo único que tenemos que hacer es escribir la clase .center-block.

Jumbotron
 

Con Jumbotron conseguimos destacar una parte de nuestra Web , donde queremos llamar la atención del usuario y éste haga una acción.

Si quieres que tenga esquinas redondeadas y el tamaño de un contenedor, tendrás que meter el código dentro del .container que quieras.

Sin embargo, si quieres que ocupe todo el ancho del dispositivo, deberás asegurarte que no está dentro de ningún contenedor y crear uno, con .container dentro del Jumbotron.

Tranquilo, lo vemos en ejemplo para que te quede mucho más claro.
 

Jumbotron con tamaño del contenedor que queremos
 

Antes de insertar el código siguiente, debemos asegurarnos que está creado el contenedor donde queremos meter el Jumbotron. Veamos el código:
 

Jumbotron con ancho máximo

Imágenes y Texto
 

Ya sabemos como insertar textos, imágenes y botones, vamos a probar como mezclar todo esto, verás que bien queda.
 

Os animo que con lo que ya sabéis, hagáis pruebas como esta:
 

Paneles
 

Vamos a crear paneles en nuestra web fácilmente, para crear el panel, solo utilizaremos la clase .panel .
 

Como veis en muy fácil crear el panel anterior, si queremos crear un panel más complejo, su dificultad no es muy alta. Para añadir un título al panel, añadimos la clase .panel-heading, si le queremos dar cuerpo al panel usamos .panel-body y para que el panel tenga un pie, .panel-footer.
 

Para los que estáis atentos, habréis apreciado que he añadido la clase .panel-default, se utiliza para darle color a la cabecera del panel , os dejo con unos ejemplos con distintos colores.