Bootstrap: Introducción práctico en el Diseño Web

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Bootstrap: Introducción práctico en el Diseño Web"

Rosario Caballero Toledo
hace 10 años
Vistas:

1 Bootstrap: Introducción práctico en el Diseño Web Originalmente creado por Twitter, que permite crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta técnica de diseño y desarrollo se conoce como responsive design o diseño adaptativo. Para construir una página web se requiere del uso de tres tecnologías base, HTML, CSS y JavaScript. HTML es un leguaje de etiquetas que el navegador interpreta para mostrarnos la estructura de un sitio, CSS se encarga del formato y estilo de la página, mientras que JavaScript le imprime dinamismo y define el comportamiento de una página web. Escribir código para páginas web requiere muchas horas de trabajo y en algún punto nos lleva a identificar patrones típicos en el diseño de sitios web. Por lo tanto, existen algunas librerías que nos permiten reutilizar patrones de diseño ya estructurados e implementados a partir de un framework. Un framework es una librería de herramientas descargable que nos agrega estilo y funcionalidad a nuestro sitio web. Este tipo de herramientas disminuyen el tiempo de desarrollo y hacen más fácil el trabajo del desarrollador. En este artículo, explicaremos como utilizar el framework Bootstrap para construir sitios web desde cero. Bootstrap nos permite brincarnos los detalles de CSS y JavaScript en un principio, y enfocarnos en la construcción del sitio en HTML. Además de que nos permite crear sitios web responsivos y listos para dispositivos móviles. Para motivar un poco al uso de este framework podemos listar algunos sitios que lo utilizan como OpenDesk, Engine Yard, Meteor y Lyft entre otros. Para utilizar bootstrap debemos primero descargarlo de su sitio oficial:

Esta técnica de diseño y desarrollo se conoce como responsive design o diseño adaptativo. Para construir una página web se requiere del uso de tres tecnologías base, HTML, CSS y JavaScript.

y después seleccionar la versión compilada y minimizada como se muestra en la siguiente imagen: Descargaremos con esto un zip con 3 carpetas: css, fonts y js.

2 y después seleccionar la versión compilada y minimizada como se muestra en la siguiente imagen: Descargaremos con esto un zip con 3 carpetas: css, fonts y js. La carpeta css contiene los estilos, la de fonts contiene tipos de letras usadas por el framework y la carpeta js los archivos Javascript necesarios para su uso. Comenzaremos escribiendo una página simple como se muestra a continuación con el nombre de index.html, debemos de colocarlo dentro de la carpeta que descargamos de la web, es posible renombrar la carpeta si así lo deseamos.

La carpeta css contiene los estilos, la de fonts contiene tipos de letras usadas por el framework y la carpeta js los archivos

Esto nos dará como resultado la siguiente página: Para comenzar a utilizar Bootstrap dentro de nuestra página necesitamos agregar tres cosas, la hoja de estilo al encabezado y dos archivo JavaScript

3 Esto nos dará como resultado la siguiente página: Para comenzar a utilizar Bootstrap dentro de nuestra página necesitamos agregar tres cosas, la hoja de estilo al encabezado y dos archivo JavaScript antes de finalizar el cuerpo como se muestra enseguida: Como podemos observar en el paso 3 hemos agregado Jquery, que es una librería requerida por Bootstrap para funcionar, estamos usando una versión desde un servidor público de Google, si queremos usarlo localmente y no tenemos acceso a internet podemos descargarlo a nuestra computadora y referenciarlo localmente.

paso 3 hemos agregado Jquery, que es una librería requerida por Bootstrap para funcionar, estamos usando una versión desde un servidor

Inmediatamente después de haber agregado estas líneas de código, veremos algunos cambios, como el tipo y el tamaño de letra, y el estilizado de los botones.

4 Inmediatamente después de haber agregado estas líneas de código, veremos algunos cambios, como el tipo y el tamaño de letra, y el estilizado de los botones. Lo que haremos a continuación será ir agregando divisiones y clases alrededor de nuestros elementos HTML para estilizar, mediante el framework, nuestro sitio web. En primer lugar iniciaremos con la clase container que agrega márgenes, centrado y envuelve nuestro contenido para hacerlo responsivo. Para esto vamos a crear un div con la clase container que envuelva el contenido del body sin incluir los scripts finales: Si deseamos hacer que nuestra página se alargue al tamaño de la pantalla, especialmente útil si usamos pantallas grandes, podemos hacerlo con la clase container-fluid. Bootstrap está basado en un sistema de 12 columnas, la forma en la que indicamos cuantas columnas abarca cada elemento es mediante las clases.col-md-* donde el * se sustituye por el número de columnas que queremos que mida el elemento. En este caso vamos a estructurar nuestra página de la siguiente forma: col-md-12 col-md-6 col-md-6 col-md-4 col-md-4 col-md-4

En primer lugar iniciaremos con la clase container que agrega márgenes, centrado y envuelve nuestro contenido para hacerlo responsivo.

Vamos a agregar una imagen en la segunda columna del segundo renglón, y acomodar nuestros elementos en sus respectivas divisiones, de manera que nuestro código HTML quedaría de la siguiente forma:

5 Vamos a agregar una imagen en la segunda columna del segundo renglón, y acomodar nuestros elementos en sus respectivas divisiones, de manera que nuestro código HTML quedaría de la siguiente forma: Obtendremos como resultado la página que se muestra a continuación: Para tener una mejor lectura de código vamos a agrupar los elementos por filas mediante la clase row. Recordemos que como es un sistema de 12 columnas todas las filas deben sumar 12.

resultado la página que se muestra a continuación: Para tener una mejor lectura de código vamos a agrupar los

Ahora utilizaremos las clases lead y text-*, donde el * puede ser left, right, center, justify o nowrap, para resaltar el texto y modificar su alineación respectivamente.

6 Ahora utilizaremos las clases lead y text-*, donde el * puede ser left, right, center, justify o nowrap, para resaltar el texto y modificar su alineación respectivamente. En la siguiente imagen se muestra el código para aplicar el centrado al texto de la última fila y a sus tres columnas respectivamente, solo basta con agregar la clase text-center al div con la clase row. Con esto dos cambios la página se debe ver de la siguiente forma:

En la siguiente imagen se muestra el código para aplicar el centrado al texto de la última fila y a sus tres

Bootstrap también nos provee de iconografía, para poder utilizarlos debemos agregar un elemento i con las clases glyphicon y glypicon-* donde el * es el nombre del ícono, para ver todos los iconos

7 Bootstrap también nos provee de iconografía, para poder utilizarlos debemos agregar un elemento i con las clases glyphicon y glypicon-* donde el * es el nombre del ícono, para ver todos los iconos disponibles consulte: Vamos nosotros a agregar un icono para cada y al mismo tiempo agregaremos otra clase a esa fila en particular llamada courses de manera que el código se debe ver así: Como queremos que estos iconos sean un poco mas grandes que el tamaño actual, vamos a utilizaremos la clase courses agregada a la fila para cambiar el tamaño por defecto de estos iconos a 32px por medio de CSS. Adicionalmente podemos usar un archivo CSS externo si así lo necesitamos y hacer otros cambios personalizados. Con estos cambios ya tenemos una página más presentable pero nos hacen falta algunos cambios en los estilos para mejorar su visualización:

Vamos nosotros a agregar un icono para cada y al mismo tiempo agregaremos otra clase a esa fila en particular llamada courses de manera que el código se debe ver así: Como queremos que estos iconos

Agregamos text-right a la columna de la imagen para alinearla a la derecha. Vamos a utilizar la clase well para darle un fondo gris y bordes redondeados a la parte superior de nuestra página.

8 Agregamos text-right a la columna de la imagen para alinearla a la derecha. Vamos a utilizar la clase well para darle un fondo gris y bordes redondeados a la parte superior de nuestra página. Luego estilizamos los botones adicionando la clase btn a cada uno y al primer botón usamos btn-default y al segundo btnprimary. Opcionalmente podemos usar la clase btn-lg en los botones para hacerlos un poco más grandes. Cuando hacemos mas pequeño el navegador la imagen salta a la siguiente línea y queda desajustada, en este caso podemos hacer que la imagen se oculte para los dispositivos con pantallas chicas como es el caso de los teléfonos móviles. Para esto utilizamos la clase hidden-xs. La siguiente imagen muestra como se vería la página en un dispositivo móvil.

Opcionalmente podemos usar la clase btn-lg en los botones para hacerlos un poco más grandes.

9 Para saber un poco más acerca de diseño responsivo podemos consultar el artículo de Ethan Marcotte a quien se le atribuye este concepto en Al final nuestra página quedo de la siguiente forma:

atribuye este concepto en http://alistapart.

10 Bootstrap es aún más extenso sin embargo en un solo artículo no nos alcanzaría el espacio para poder explicarlo por completo, esto es solo una muestra de lo mucho que este framework nos facilita el desarrollo de aplicaciones web. Existen algunas alternativas a esta herramienta como es el caso de Foundation, sin embargo Bootstrap es el más popular entre los desarrolladores.

nos facilita el desarrollo de aplicaciones web.

Documentos relacionados

MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn

MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn Tegucigalpa M. D. C., Junio de 2009 Que es un CMS Un sistema de administración de contenido (CMS por sus siglas en ingles) es un programa para organizar