Tutorial CSS: Intermedio

​Ya tenemos entendido el funcionamiento de CSS y en realidad conocer más etiquetas y combinación de atributos de estilo seria el próximo paso, pero pienso que es más importante conocer herramientas que sean de verdadera utilidad en el mundo real, es por eso que les presento a continuación Bootstrap CSS.

Este último es un framework de CSS que incluye varias clases de estilo que usamos a menudo para una página web, como por ejemplo la tradicional barra de navegación, muestra de items, la división de la página de una columna a la izquierda y derecha con contenido principal en el centro. No solo eso nos trae Bootstrap, ya que incluye herramientas para el desarrollo de páginas web en múltiples de resoluciones de pantalla.

1 - Hola Bootstrap

Lo primero que vemos es que para usar Bootstrap necesitamos un archivo de css y otro de javascript, estas librerías no las coloco en el código de arriba, pero pueden acceder a ellas en la página oficial de Bootstrap CSS o lo pueden descargar con todo el código bajo este link. Lo siguiente que muestro es que uso la clase container, esta ya la obtengo gracias a Bootstrap y permite desplegar mi contenido centrado y con un ancho predeterminado de 1140 píxeles para resoluciones grandes. Por defecto también se cambia la fuente del texto con Arial.

Además vemos la clase lead que esta en el párrafo, esta únicamente nos esta cambiando el tamaño de la fuente a uno que dependa de la resolución de la pantalla, en este momento es que quiero presentar lo mejor que nos incluye Bootstrap y es el manejo de múltiples resoluciones de pantalla. A continuación les muestro 3 imágenes de la página a distintas resoluciones.

Resolución grande

Resolución mediana

Resolución pequeña

Ahora bien el uso de Bootstrap no quiere decir que no pueda seguir agregando estilo a mi página, ya que puedo agregar más de una clase a una etiqueta, agregar un id, puedo incluso agregar comportamientos extras a las clases predeterminadas de Bootstrap.

Otro aspecto importante a notar es que se necesita Jquery para usar Bootstrap y el orden en que se incluyen los archivos importa ya que se puede garantizar los accesos correctos y velocidad de carga. Es una buena práctica colocar en el head los links de los archivos css y al final del body los links a los archivos de javascript.

2 - Columnas y offset


La clase de las columnas es una de las más utiles que encuentro en Bootstrap, ya que con ellas podemos dividir hasta en 12 partes una sección y a su vez subdividir, esto lo hace verdaderamente interesante gracias a que no necesitamos realizar muchos calculos. Otro aspecto interesante es la posibilidad que nos da de colocar tamaños a distintas resoluciones con tan solo nombrar la clase en la etiqueta.

Al incluir la etiqueta con la clase row la página automáticamente tiene la capacidad de disponer los elementos uno debajo del otro.

También se puede omitir una columna haciendo simplemente un offset con columnas con el tamaño que querramos, es decir agregar un relleno.

Resolución grande

Resolución mediana

Resolución pequeña

3 - Jumbotron


Jumbotron un elemento que permite colocar un contenido en una sección gris, con bordes redondeados. Es muy útil para colocar el contenido inicial dado que podemos llamar la atención y despertar el interés del visitante muy fácilmente.

Al igual que los otros elementos se adapta a la resolución automáticamente.

4 - Barra de navegación


Este elemento es algo que vemos presente ahora en buena cantidad de páginas hoy en día, realmente el código no es muy amigable, pero si se estudia bien cada elemento se darán cuenta que es muy bueno y les garantizo que es lo minimo para que funcione con Bootstrap.

Resolución grande y mediana

Resolución pequeña

Han de notar que el aspecto a resolución pequeña es muy diferente y muy elegante.

Página de presentación mejorada

Existen muchas otras clases que nos trae Bootstrap, pero quiero ahora mostrarles que tanto podemos mejorar nuestra página de presentación con lo nuevo que conocemos.


El aspecto de esta página es hecha casi totalmente con solo Bootstrap, por lo que un prototipo de una página para aquellos que no somos diseñadores se facilita en gran medida.

Resolución grande

Resolución mediana

Resolución pequeña

Para ver todas las clases que tiene esta poderosa herramienta les recomiendo visitar la página oficial de Bootstrap CSS y para encontrar varias plantillas de estilo pueden visitar esta página.

Si algo no queda muy claro siempre me pueden escribir a mi correo tonylattke@gmail.com o también pueden dejar comentarios al final de este post y trataré de ayudarles lo antes posible.

Descarga aquí todos los archivos fuente.