Ahorra trabajo de diseño web con Bootstrap

El diseño web con Bootstrap permite ahorrar parte del trabajo de desarrollo y diseño de una página web

Ernesto BarrachinaApariencia Web, Desarrollo webDeja tu comentario

Contenido actualizado a fecha: 9 febrero 2021

4.2/5 - (15 votos)

Crear una página web desde cero es un trabajo más laborioso de lo que algunos imaginan, aunque lo cierto es que para ahorrar tiempo y esfuerzo, muchos profesionales recurrimos a las famosas plantillas de WordPress o al diseño web con Bootstrap.

Si te digo la verdad, yo nunca he sido amante de usar Bootstrap, porque en mis técnicas de diseño web Valencia me gusta utilizar mis propias id y class CSS (identificadores y clases).

Sin embargo, las circunstancias han hecho que Bootstrap se convierta en una herramienta de diseño web imprescindible, que me sigue permitiendo utilizar estilos CSS propios.

Ante todo, aclarar que esto no va a ser realmente un tutorial de Bootstrap, sino una introducción al framework, en la que resolveremos ciertas cuestiones que te ayuden a entenderlo lo suficiente como para comenzar a usarlo.

En el artículo veremos cómo se descarga Bootstrap, cómo se instala, cómo se usan sus plantillas y algunas de sus ventajas. Así, al terminar la lectura, tendrás claro cómo se utiliza Bootstrap.

Qué es Bootstrap

Esa fue primera pregunta que me vino a la cabeza cuando escuché su nombre hace algunos años.

¿Qué es eso de Bootstrap?

Había oído que el recién llegado (te hablo de 2012) facilitaba el trabajo de programación y que estaba pensado para el diseño web adaptativo (responsive).

Para no entrar en complejas explicaciones y convertir este artículo en no apto para principiantes, solo te diré que Bootstrap es un framework desarrollado y liberado por Twitter, que puedes usar gratis en el diseño de páginas web.

Tienes menos trabajo cuando diseñas páginas web con el framework Bootstrap

Bootstrap es un marco de trabajo formado por un conjunto de archivos de código que, proporcionan estilos y comportamientos predeterminados a los elementos de una página web.

Para que nos entendamos, te facilita las tareas de diseño y desarrollo.

De la misma forma en que lo ahorras cuando usas una plantilla WordPress, aunque en este caso no esperes editores visuales ni nada parecido.

Hasta te ayudará con el diseño de la página web en Photoshop.

Eso sí, aunque el framework te proporcione parte del trabajo, necesitas ciertos conocimientos de HTML y por supuesto de CSS para diseñar páginas web con Bootstrap.

Diseño web con Bootstrap

Trabajando el diseño web con Bootstrap evitarás gran parte del desarrollo, y prácticamente deberás centrarte en el propio diseño web.

Tendrás estilos, comportamientos y acciones preestablecidas, basados en un sistema de rejillas.

El sistema de rejillas

En Bootstrap la anchura del contenido se distribuye en 12 columnas, a las que se les aplica diferente comportamiento en cada uno de los puntos de ruptura o breakpoints, que coinciden con las diferentes medidas de resolución de los dispositivos.

Rejilla de 12 columnas en que se basa el diseño web con Bootstrap

Las columnas vienen con un espaciado por defecto entre ellas de 30px.

😎 ¡Ahora presta atención!

Bootstrap utiliza clases CSS para saber el comportamiento que tiene que darle a cada columna, en función del tamaño de la pantalla donde se muestra la web.

Un mismo elementos tendrá un comportamiento dinámico y diferente para cada resolución.

Y estará marcado por puntos de rotura o breakpoints y la clase asignada al elemento:

  • Pantallas extra grandes ⇒ ≥ 1200px ⇒  .col-xl-número de columnas.
  • Monitores grandes ⇒ ≥ 992px ⇒ .col-lg-número de columnas.
  • Pantallas medianas ⇒ ≥ 768px ⇒ .col-md-número de columnas.
  • Pantalla móviles ⇒ ≥ 576px ⇒ .col-sm-número de columnas.
  • Tamaño extra pequeño ⇒ < 576px ⇒ .col-número de columnas.

Me explico 😉

Si lo que pretendemos es una página web con barra lateral, usaremos la siguiente combinación de columnas que siempre deben sumar 12:

1 rejilla de 8 columnas + 1 rejilla de 4 columnas

Rejilla Bootstrap en diseño web en dos columnas para generar una barra lateral

Y en HTML tendrás que escribir:

<div class="col-md-8"></div>
<div class="col-md-4"></div>
Simplemente aplicando estas dos clases el diseño de la web cambiará en función de la resolución de forma predeterminada.

Cuando estemos por debajo de los 992px, o sea, dentro de los parámetros marcados por la clase .col-md-nº columnas ( ≥ 768px ), lo que antes mostraba la web en dos columnas pasará a verse en una sola.

Y esto es porque Bootstrap se ha adaptado a un tablet en vertical, haciendo que el contenido principal ocupe todo el ancho y pasando la barra lateral a la parte inferior.

Rejilla Bootstrap web con barra lateral responsive

En ese punto de corte, las rejillas han pasado de tener un float:left a un float:none sin que nosotros tengamos que hacer nada de nada.

Es la ventaja del diseño web con Bootstrap 😉

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

Ajustar el comportamiento de las columnas en el diseño

Como a nosotros también nos gusta tomar decisiones y no siempre querremos dejar todo en manos de Bootstrap, el framework nos permite afinar aún más en el comportamiento de las columnas.

Por ejemplo, para que en un tablet en vertical se sigan mostrando las dos columnas de antes, tan solo hay que añadir otra clase a las existentes, que indique otro punto de ruptura.

<div class="col-md-8 col-sm-8"></div>
<div class="col-md-4 col-sm-4"></div>

Con esto retrasaremos el punto de ruptura que sitúa a la barra lateral debajo del contenido hasta que el ancho de la pantalla está por debajo de los 767px.

Si esto te parece poco, aún se puede ahorrar más trabajo usando solo la clase en la que queremos aplicar el punto de ruptura.

Y hacia arriba siempre se mostrará el diseño de la página en dos columnas:

<div class="col-sm-8"></div>
<div class="col-sm-4"></div>

Hay una cosa importante que debes tener en cuenta.

Al añadir otro contenedor dentro de cualquier rejilla, también tendrá 12 columnas (aunque más pequeñas) y deberás seguir la mismas instrucciones que para los contenedores generales.

Rejilla con columnas anidadas en un diseño web con Bootstrap

Por si no te ha quedado claro, así sería la disposición de los elementos columna en un monitor y los mismos elementos en un teléfono (estirado para no perdernos nada).

Ejemplo de un diseño web realizado con Bootstrap

Diseño web con las clases Bootstrap

Las clases usadas por Bootstrap tienen aplicadas reglas CSS, que podrás modificar sobrescribiéndolas con otras para adaptarlas al diseño de tu web.

Por ejemplo la clase container define un div que no superará los 1200px, pero implementando la clase container-fluid ocupará todo el ancho de la pantalla.

Evidentemente, si escribes un elemento HTML y lo dejas tal cual, no ocurrirá nada hasta que le asignes una de esas clases exclusivas de Bootstrap.

Como te he dicho, esto no es un tutorial y la lista de clases Bootstrap es demasiado larga, porque afectan casi a cualquier tipo de elemento HTML.

Así que las tendrás que ir descubriendo poco a poco con el uso.

EL cheat sheet es una hoja de ayuda con todas las clases para diseñar webs con Bootstrap

Bien, y ahora que ya sabemos para qué sirve Bootstrap y hemos entendido su funcionamiento más o menos, vamos con el siguiente paso lógico, que es descargar Bootstrap.

Cómo descargar Bootstrap

Es posible que antes de resolver esto deba comentarte desde dónde descargar Bootstrap.

Está claro ¿no? desde su página oficial getbootstrap.com.

Página oficial desde donde descargar Bootstrap

Una vez en la página, verás dos botones, Download para descargar Bootstrap y otro con el nombre Getting started que nos lleva a una página informativa que te recomiendo leer.

Pulsa el botón para descargar Bootstrap.

Cómo los expertos en diseño y desarrollo web saben buscarse la vida por sí mismos, te lo voy a explicar en su forma más sencilla. Así que, haz clic sobre la primera opción de descarga, que te facilitará los archivos CSS y JavaScript básicos precompilados para el trabajo de diseño.

Una vez descargados los archivos ya tenemos el framework Bootstrap a nuestra entera disposición, y solo nos quedará escribir el HTML de nuestra página web y conectarlo con este.

Si prefieres partir de páginas gratuitas prediseñadas con Bootstrap, en el menú también verás esta opción, aunque es un tanto limitada porque como siempre, las completas son de pago.

Qué contienen las carpetas de Bootstrap

Las carpetas descargadas contienen unos archivo precompilados para el uso inmediato en una web.

Carpetas con contenido básico para el diseño web con Bootstrap

Y esos archivos contienen instrucciones que harán que tu trabajo de desarrollo web se reduzca considerablemente.

Porque como Bootstrap tiene sus propias reglas CSS y funciones JavasScript, solo tendrás que saber que existen para implementarlas en un HTML.

Es decir si planteas tu diseño web con Bootstrap te vas a ahorrar dar parte del estilo a contenedores, botones, textos, imágenes, etc.

En resumen, Bootstrap viene con comportamientos predefinidos para menús, desplegables, tooltips, acordeones y otros muchos elementos que utilizas en el diseño de cualquier página web.

Qué hacer con los archivos de Bootstrap

Te habrás dado cuenta de que aún no tenemos archivo HTML alguno asociado a las carpetas Bootstrap.

Ha llegado el momento de crearlo.

O mejor descargarlo, porque se trata de evitar esfuerzos desde el primer momento. Por tanto, descargaremos una de las demos que Bootstrap proporciona en su sección Examples.

Aunque podríamos usar una algo más básica, me gusta Carousel.

Nos complicará un poco el trabajo, porque necesita algún archivo que no está incluido en las carpetas descargadas. Pero estamos aquí para ir cogiendo algo de soltura en diseño web con Bootstrap.

Demos de páginas web diseñadas con Bootstrap

Descargar una página demo de Bootstrap

Verás que no existe opción de descarga para la demo , así que tendremos que descargarla una vez ejecutada.

Es muy fácil 😀

  1. Accede al demo Bootstrap.
  2. Sitúa el cursor en una parte de la pantalla que NO corresponda al carrusel inicial, ni a las imágenes circulares.
  3. Haz clic con el botón secundario y selecciona la opción Guardar como.

Descargar demo para implementar nuestro diseño web con Bootstrap

Fíjate que en las opciones de descarga y guarda solo el HTML.

Puedes descargar el HTML de cualquier demo para implementar el CSS y JS a Bootstrap

Con todos los archivo necesarios para crear una página web Bootstrap, aunque solo sea de una página, solo queda guardarlos en la misma carpeta.

Implementar Bootstrap en una página web

Para instalar o implementar Bootstrap en el HTML recién descargado, el primer paso es crear una carpeta que contendrá tanto las carpetas descargadas anteriormente, como este último HTML.

  • Crea una carpeta que hará las funciones de raíz del sitio web y llámala por ejemplo web-bootstrap.
  • Pega las carpetas sueltas descargadas del framework.
  • Coloca el archivo de la página de ejemplo.
  • Cambia el nombre del archivo a, por ejemplo index.html

La carpeta quedará con este contenido:

Contenido de la carpeta donde guardar los archivos Bootstrap para elaborar tu primera web Bootstrap

Ejecuta el archivo index.html, clicando dos veces sobre él, y verás que algo está pasando 😥

El diseño no tiene estilo, ni nada, y no es lo que esperamos.

Así es como se ve un HTML al que no le hemos conectado el CSS y el JS

¡Claro! Bootstrap no hace magia y no hemos conectado el framework con el archivo HTML.

Conectar Bootstrap con el archivo HTML

Supongo que sospecharás que en este momento hace falta un editor de código, y como siempre, te recomiendo descargar Notepad++.

Abre el archivo index.html y vamos a revisarlo.

Mirando el código, comprobarás que todos los archivos con los que conecta el HTML apuntan a la página de origen de la demo. De tal forma, necesitamos modificar las rutas de las URLs para que apunten a nuestra carpeta principal.

Además nos hará falta algún archivo extra para el funcionamiento del carrusel.

Lo haremos en dos partes, una en la que ajustaremos las url del archivo descargado y otra en la que conseguiremos los archivos que nos faltan para que funcione el carrusel.

Más tarde nos encargaremos de las imágenes que también tienen su truco.

Apuntar las url a nuestras carpetas Bootstrap

Todas las url del archivo apuntan a una dirección que no es nuestra carpeta, y deberían hacerlo.

Así que corregiremos todas las url de los tipos:

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

Por otras en las que simplemente recortaremos la ruta.

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

Ejecuta el archivo para comprobar que todo funciona correctamente, con excepción del carrusel, que necesita algún archivo más.

Encoje el navegador y verás que la página es responsive 😉

En este punto, para una demo sencilla tendríamos bastante, pero en este caso hacen falta los archivos complementarios del carrusel Bootstrap, que aunque vienen enlazados desde el HTML, no los tenemos en la carpeta.

Descargar archivos complementarios para el carrusel Bootstrap

Para acceder a los archivos necesarios hay que acudir de nuevo a la versión de la demo Carrusel, en la web Bootstrap.

Con las tecla Ctrl+U, accederemos al código fuente de la página.

Descargar los archivos necesarios para el carrusel Bootstrap desde el código fuente de a propia demo

Haz un clic sobre los enlaces siguientes para que se abran en una nueva ventana.

Descárgalos con la opción Guardar como, con el botón secundario del ratón.

<link href="carousel.css" rel="stylesheet">
<script src="../../assets/js/vendor/holder.min.js"></script>

Añádelos a sus correspondientes carpetas css y js, y asigna las urls correctas en el archivo index.

<link href="css/carousel.css" rel="stylesheet">
<script src="js/holder.min.js"></script>

Ejecutando de nuevo tu archivo, verás por un lado, que todo funciona correctamente, y por otro, que empiezas a entender en qué consiste lo del diseño web con Bootstrap un poco mejor.

Cambiar las imágenes del archivo demo de Bootstrap

Si observas las imágenes de la demo, verás que no son imágenes al uso. No obstante puedes sustituirlas por cualquiera, siempre del tamaño o proporciones adecuadas para que no se deformen.

Para terminar, aunque no es obligatorio, una vez tengas tus fotos, elimina el enlace y el archivo que proporcionaba las imágenes de la demo:

<script src="js/holder.min.js"></script>

Resultado de la implementación de Bootstrap en una página web

Quitando que las imágenes serán diferentes, el diseño de tu primera web con Bootstrap quedará así.

Diseño web con Bootstrap en vídeo

¿Qué te parece echarle un vistazo al vídeo y repasamos el proceso de diseño web con Bootstrap?

Todo hay que decirlo. El vídeo tiene su tiempo y la demo es de la versión anterior de Bootstrap, pero el procedimiento es exactamente el mismo, quitando que antes junto con los archivos CSS y JS, se descargaban unas fuentes.

Repasamos todo. Ya sabes, desde la descarga del framework, hasta cuando de verdad se comienza a diseñar con Bootstrap.

Espero que todo esto haya sido suficiente para despertar tu interés y que comiences a plantearte el diseño web con Bootstrap como una estrategia para ahorrar tiempo.

Si te ha gustado comparte

About the Author

Ernesto Barrachina

Facebook Twitter Google+

Me dedico al diseño web Valencia y tengo pasión por las herramientas de diseño gráfico, así como por compartir tips de diseño web en forma de consejos y tutoriales "para todos los públicos".

Deja una respuesta

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) Finalidad de los datos: Gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. Destinatarios: No se comunican los datos a nadie más. Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado. Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (mi proveedor de hosting) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Tu comentario quedará pendiente de moderación. Vuelve en dos o tres días para ver la respuesta y tu comentario publicados.

Muchas gracias por comentar ☺