Como usar Bootstrap para adaptar paginas web a móviles

Un par de post atrás, en el artículo «Ejemplos de páginas web en HTML y CSS + Tutorial de edición», hice una breve introducción a Bootstrap y prometí explicarlo con mas detenimiento en otro momento. Como en este blog cumplimos con las promesas, traigo esta guía paso a paso sobre como usar Bootstrap para adaptar paginas web a móviles. 🙂

Te recomiendo que antes de meterte a lleno con Bootstrap, aprendas a manejar correctamente el HTML y CSS de una página web. Hay mucha info en internet sobre esto, por lo que no te costará informarte, de igual forma te dejo estos post que te ayudarán.

• Códigos HTML para páginas web.

• Códigos CSS para páginas web.

• Ejemplos de páginas web en HTML y CSS + Tutorial de edición.

En dichos artículos explico como usar HTML y CSS de forma muy sencilla, por lo que no te vendrá mal leerlos. 😉

¿Que es Bootsptap?

Bootstrap es un framework desarrollado y liberado por Twitter que tiene como objetivo facilitar el diseño web. Su objetivo principal es facilitarle el trabajo a los desarrolladores webs, a la hora de lograr diseño adaptable a cualquier dispositivo. Es Open Sourse, por lo que usarlo para tus proyectos web es totalmente gratuito.

Su objetivo principal es facilitarle el trabajo a los desarrolladores webs, a la hora de lograr diseño adaptable a cualquier dispositivo.

Su uso otorga al programador la certeza de saber que los elementos que elija no generarán conflictos entre ellos, es decir todo encaja a la perfección.

El ser muy completo su gratuidad y fácil uso, hacen de este framework uno de los más populares. O como indica en su página web «the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web».

Ventajas de usar Bootstrap en diseño web responsive

Algunos de los beneficios que otorga el uso de este framework son los siguientes:

• Es Open Source, por lo que no debes pagar ni un centavo para adaptar tu pagina web a moviles.

• Soporta las últimas versiones de HTML y CSS.

• Cuenta con componentes como botones, menús, tablas, íconos, etc pre-diseñados en su hoja de estilos CSS.

• Funciona con el procesador de escritura CSS LESS, con el cual escribir es mucho mas rápido.

• Altamente compatible con los navegadores más populares (Google Chrome, Mozilla Firefox, Internet Explorer, etc.)

• Si entiendes como funciona el CSS en una web, manejaras facilente este framework.

• El haber sido creado por desarrolladores de Twitter, nos da la garantía que seguirá teniendo las actualizaciones necesarios en el futuro.

Como funciona Bootstrap

Sistema de rejillas

El diseño adaptativo es logrado mediante el uso de un sistema de rejillas (Grid) de 12 columnas.

Le queda al programador definir cuantas columnas ocupara un elemento en cada tipo de dispositivo. Para que eso pueda ser llevado a cabo, cada resolución tiene asociada una clase CSS:

• Extra small devices – Phones (<768px) : .col-xs-
• Small devices – Tablets (≥ 768px): .col-sm
• Medium devices – Desktops (≥992px): .col-md-d
• Large devices – Desktops (≥1200px): .col-lg

Luego en el HTML se deberá colocar un número de 1 a 12 por cada resolución, dando así el ancho que tomará el elemento. Por ejemplo si colocas 6, tomará la mitad de la pantalla, mientas que con 12 el ancho total.

Veámoslo con mas detenimiento en el siguiente ejemplo:

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">Un ejemplo</div>

• .col-xs-12: significa que para smartphones el div tomará todo el ancho del Grid.
• .col-sm-12: para tablets ocupa todo el ancho también.
• .col-md-8: en desktops medianos tomará 8 columnas.
• .col-lg-6: en desktops grandes ocupará justamente la mitad.

Elementos .container y .row

El sistema de rejillas debe ser usado dentro de uno de los dos elementos contenedor que provee Bootstrap:

• .container: usando esta etiqueta el contenido de la web es centrado en un ancho fijo.
• .container-fluid: al usar es etiqueta el contenido ocupa todo el ancho disponible de la pantalla.

A su vez la columnas irán agrupadas dentro de las filas, las cuales se definen mediante la etiqueta .row. Por lo tanto, se puede colocar una etiqueta .row tanto dentro de una etiqueta .container como una .container-fluid.

Dichos códigos nos dan el siguiente resultado:

Te recomiendo que analices el código que te acabo de dejar para familiarizarte con las etiquetas .container y .row.

Como usar Bootstrap para adaptar paginas web a móviles

En este apartado aprenderemos como crear desde cero una página web responsive, haciendo uso de Bootstrap.

Los pasos que seguiremos serán los siguientes:

1. Descarga de los archivos necesarios para utilizar Bootstrap
2. Enlazado de documento HTML con archivos de Bootstrap.
3. Familiarización con el uso de componentes de Bootstrap.
4. Si entiendes como funciona el CSS haciendo uso de Bootstrap.

Bueno creo que ya te he introducido bastante en la temática, podemos comenzar con lo importante. 🙂

1- Descarga de los archivos necesarios para utilizar Bootstrap

Para descargar el paquete de archivos necesitas dirigirte al siguiente link:

Ya descargado, tendrás un archivo comprimido. Al descomprimirlo te encontrarás dos carpetas.

El la carpeta css se encuentra los archivos .css de Bootstrap, mientras que en la js los java.

2. Enlazado de documento HTML con archivos de Bootstrap.

Para enlazar el archivo HTML, antes debemos crear un archivo formato .html. Por practicidad lo alojaré en la misma carpeta donde tengo los archivos Bootstrap.

Ya con el archivo creado podemos proceder a escribir las primeras líneas de código. En mi caso usaré NotePad++, pero tu puedes usar el editor que prefieras. 😉

Necesitaras conectar dos archivos para el correcto funcionamiento, estos son bootstrap.css y bootstrap.js. El primero contiene el paquete css y el segundo el java de Bootstrap.

Te explicaré dos formas de realizar la conexión, una el la que necesitas tener descargados y almacenados los archivos Bootstrap y otra mediante CDN.

2.1 Conexión con archivos descargados

Necesitaras colocar las siguientes líneas de código, en el <head> de tu documento HTML para la vinculación.

<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.js"></script>

Como toda web en HTML necesitarás crear un archivo de estilos .css (aparte del Bootstrap.css el cual no editarás en ningún momento). Con él, en muchos casos, realizaremos ediciones sobre códigos de Bootstrap. Si te fijas, debajo de los códigos de conexión con Bootstrap, realice la vinculación con el archivo de estilos style.css.

2.2 Conexión mediante CDN

En la  conexion CDN no necesitas descargar los archivos, sino que accedes a ellos de forma remota en servidores del mismo Bootstrap.

Los códigos para la vinculación son los siguientes:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

El uso de este método cuenta con la ventaja de no tener que descargar los archivos, pero tiene una desventaja. Si los servidores que usa Bootstrap para alojar estos archivos se caen, tu web perderá todos los estilos que te dan ellos, es decir, no se verá nada bien. 🙁

Con este método, si los servidores de Bootstrap se caen, tu web perderá todos los estilos. 

Personalmente prefiero la primera opción, donde tu mismo das el alojamiento, pero ambas son válidas. 😉

3- Familiariazación con el uso de componentes Bootstrap.

Bootstrap incluye numerosos componentes CSS listos para utilizar que cubren las necesidades más habituales de los diseños actuales para webs adaptables.

Para hacer uso de los componentes de Bootsrap 4.1 acceder al siguiente link:

La barra de herramientas izquierda te muestra los componentes disponibles.

Si haces click en alguno de ellos, te encontraras con los codigos necesarios para hacer uso de ellos.

Un ejemplo son los botones (Buttons).

Como ves en la parte superior te muestra el resultado (botones de diferentes colores), y debajo el código HTML de cada uno.

Ahora, para utilizar estos códigos Bootstrap debes llevarlo a un documento HTML correctamente redactado. Eso lo sabes hacer dado que lo acabamos de ver. 😉

En la imagen anterior, no incluí las primeras líneas del documento, recuerda en ellas hacer las vinculación que vimos en el apartado 2 (puedes usar el 2.1 o 2.2).

Fíjate que lo primero que hago es contener los códigos en una etiqueta .container. De esa forma estoy centrando en un ancho limitado el contenido. Luego creo una fila .row, donde colocaré códigos de dos componentes diferentes.

Dado que quiero que cada componente ocupe mitad de pantalla en escritorios de tamaño medio, los colocaré dentro una clase «col-md-6». El 6 hace que se tomen 6/12 columnas, es decir la mitad. Estas etiquetas hacen la magia para que tu pagina web sea adaptable a móviles.

El siguiente es el resultado de colocar un formulario y una alerta (componente Form y alert).

Como era de esperar cada componente ocupa mitad de la página. Como estas viendo, hacer uso de Bootstrap y sus componentes no es nada difícil. 😉

4- Escritura de la pagina en HTML haciendo uso de Bootstrap.

Considero que con lo que te explique hasta aquí, ya eres capaz de crear una web adaptable mediante Bootstrap. De igual forma te ayudaré con ello. 🙂

Aquí escribiremos una web bien sencilla, la cual tendrá la siguiente estructura. La misma tendrá secciones bien definidas.

Para ser ordenado realizaré una explicación de la escritura de cada una de ellas.

4.1 Header

En esta sección de la página colocare el menú de navegación de la página. Para ello seleccioné el siguiente componente de Bootstrap (Navbar).

Necesitaré hacer algunos cambios para dejarlo como lo necesito. El más importante dentro del código será el reemplazo del texto Navbar (a la izquierda del menú) por el logo de la web.

En la siguiente imagen, donde te muestro las primeras líneas del documento HTML, he marcado con un recuadro verde el cambio que realice. Es sencillo, dentro de la etiqueta <a> elimine el texto Navbar, y agregue una etiqueta <img> con la url del logo.

Los demás cambios sobre el HTML son solo reemplazo de textos (Coloque las pestañas Blog y Acerca de).

Ahora lo que quiero es darle algunos pequeños cambios en los estilos. Los mismos los realizaré en el documento style.css, el cual sobrescribirá los estilos de bootstrap.css.

En dicha hoja de estilo definí un color de fondo del header (#F0F1F3 gris claro). Luego cambié el color del texto de las pestañas (Home, Blog, Acerca de) y las resalté con un estilo bold. El resultado es el siguiente:

4.2 Llamado a la acción

En el caso de esta parte de la página, usaré un componente Card de Bootstrap. Más específicamente el siguiente :

Las ediciones que haré en el HTML son varías. Míralas primero haber si te das cuanta cuales son. 🙂

En primer lugar elimine el style=»width:18rem», dado que estos estilos prefiero controlarlos desde el CSS. Luego cambien la etiqueta <h5> por <h1>, y eliminé las clases "card-tittle" y "card-text" de las etiquetas <h1> y <p> respectivamente. Esto último lo realice dado que daré estilos al titulo h1 y al texto p desde el CSS.

Y ya que hablo tanto de las ediciones desde el style.css aquí te las dejo. 🙂

No te explicaré una por una las adiciones de estilo que realicé aquí dado que son muy sencillas (tamaño de texto, background, color, etc).

Quiero que veas como le dí estilo a las etiquetas <h1> y <p>, primero definí que busque la ID #call-action, luego la clase .card-body para terminar en las etiqueta<h1> y <p>.

El resultado final del llamado a la acción es el siguiente:

Te estoy tirando parte por parte la web, pero no te preocupes al final podrás ver todo el conjunto. 😉 

4.3 Blog

Para el caso del blog, volveré a hacer uso de componentes Card. Pero en este caso será el turno de este:

La edición mas relevante en el HTML es la adición de la siguiente líena de código (fundamental para un diseño web adaptable a moviles):

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>

Esto es para conseguir lo siguiente:

• Móviles (<768px) : cada elemento toma todo el ancho de la pantalla.
• Tablets (≥ 768px): cada elemento toda mitad de la pantalla, es decir 2 artículos por fila.
• Monitor (≥992px) : cada elemento toma un tercio de la pantalla, quedando así 3 artículos por fila.
• Monitor (≥1200px): igual al anterior.

El código de la imagen anterior debe repetirse tantas veces como artículos quieras que tenga la sección.

Es en esta sección donde volvemos a tener la clase .card-body, a la cual dí unos estilos diferentes a los usados en el apartado anterior (padding y alineación). Puedes verlo aquí.

El resultado final de esta seccion blog usando Bootstrap es la siguiente:

Cabe aclarar que la vista anterior, es con una resolución del tipo tablet.

Otro elemento interesante que he añadido en esta sección son los botones de paginación. El mismo es un bloque de botones numerados que permiten ir hacia artículos antiguos o mas recientes. Le he hecho muy pocas  modificaciones, por lo que considero suficiente con hacerte saber que existen componentes de paginación en Bootstrap.

4.4 Acerca del autor

Para este caso no tome ningún componente para escribir este sencillo elemento.

El elemento es bien fácil. Creé una etiqueta <section> con un id que llame #info (esto para facilitar el trabajo desde el CSS). Luego un título <h2> el cual centre con la clase .text-center.

Para terminar, dentro de un .container y un .row, coloqué una imagen (sisi ese de la imagen soy yo.. jajaja) y un texto que habla un poco de mi.

Vuelve un segundo al HTML y fíjate como distribuí el espacio entre la imagen y el texto. Para dispositivos pequeños (móviles y tablets), ambos tomarán todo el ancho quedando uno debajo del otro. Mientras que para monitores la distribución será 4 para la imagen y 8 el texto.

Los estilos CSS con los que trabaje esta sección son los que siguen:

4.5 Footer

Bueno en el pie de la página los códigos son más que sencillos.

Con CSS le di un color diferente al texto <p> y al link <a>.

Luego con las últimas líneas de CSS definí otro color para el link cuando pase el cursor sobre él.

Resultado final

Espero haber dejado en claro, que lograr diseñar una página web adaptable a móviles usando Bootstrap, no es demasiado complicado. Es más, si sabes usar HTML y CSS son pocos los conceptos nuevos para aprender. Lo básico es entender el uso de las etiquetas .contanier, .row y las .col, y no mucho más. 🙂

Para terminar, te dejo una imagen de la página web responsive que acabamos de crear.

Obvio que se puede mejorar mucho el diseño. Pero como te dejo los archivos HTML y CSS, ese trabajo es todo tuyo. 😉

Bueno espero que hayas sacado provecho a toda la info que deje en el post. De ser así ya puedes comenzar a escribir tu página web adaptable a móviles con Bootstrap. 😉