Ahorra trabajo de diseño web usando Bootstrap

Diseño web con Bootstrap para ahorrar tiempo de desarrollo

Hacer un diseño web desde cero es un trabajo sumamente laborioso en el que debes estar pendiente del aspecto y comportamiento de multitud de elementos HTML. Realizar tu diseño web con Bootstrap puede ahorrarte bastante tiempo en la fase de desarrollo web. Igual que cuando usas una plantilla.

La verdad es que yo nunca he sido amante de usar Bootstrap porque en mis diseños de páginas web me gusta utilizar mis propias id y class CSS. Sin embargo las circunstancias han hecho que se convierta en una herramienta de diseño web casi imprescindible, que me sigue permitiendo usar mis estilos CSS.

Ante todo esto no va a ser un tutorial de Bootstrap, sino una introducción en la que resolveremos algunas cuestiones que te ayuden a entenderlo y a comenzar a usarlo.

Durante el artículo revisaremos sus ventajas, cómo se descarga e instala y cómo se usan sus plantillas demo. Cuando terminemos tendrás claro cómo se utiliza Bootstrap.

Qué es Bootstrap

La primera pregunta que se me vino a la cabeza cuando escuché este nombre hace ya algunos años, fue precisamente esa ¿qué es Bootstrap?

Había escuchado 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, y que puedes usarlo en el diseño de tu página web de manera gratuita.

Menos trabajo si diseñas webs con 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 la misma forma en que lo hace una plantilla cuando usas WordPress, aunque en este caso no esperes editores visuales ni nada parecido.

Si por ejemplo tienes que pasar el diseño de una página web desde Photoshop a código, Bootstrap te facilitará la vida.

Por supuesto debes tener nociones de HTML y conocer el código CSS para poder diseñar webs con Bootstrap.

Diseño web con Bootstrap

Trabajando mediante esta vía ya sabes que evitarás gran parte del desarrollo y prácticamente deberás centrarte en el diseño de la página web. Recuerda que vas a tener estilos,  comportamientos y acciones predeterminados basados en un sistema de rejillas.

El sistema de rejillas

En la pantalla el contenido se distribuye en 12 columnas a las que les aplica distinto comportamiento en cada uno de los puntos de rotura (breakpoints), que coinciden con diferentes medidas de dispositivo.

Rejilla Bootstrap para el diseño de una web

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

Las medidas y las clases con que llama a cada uno de estos puntos son:

  • ≥ 1200px: col-xl-nº de columnas (Por ejemplo col-xl-6).
  • ≥ 992px: col-lg-nº de columnas
  • ≥ 768px: col-md-nº de columnas
  • ≥ 576px: col-sm-nº de columnas
  • < 576px: col-nº de columnas

Me explico. Si queremos un diseño 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 con barra lateral

Su representación en HTML será:

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

Simplemente con estas clases aplicadas el diseño de la web cambiará según la resolución de forma predeterminada.

Cuando estemos por debajo de 992px, lo que antes se mostraba en la web en dos columnas pasará a verse en una sola. Es decir, se ha adaptado a una 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. Y eso sin que nosotros tengamos que hacer nada. Es la ventaja del diseño web con Bootstrap 😉

Recibe nuestros 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

Si queremos afinar más, para que en tablet vertical siga mostrándose la barra lateral solo debemos añadir una nueva clase a la ya existente.

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

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

Por si esto nos parece poco, aún podemos ahorrar más trabajo usando solo la clase en la que queremos aplicar el punto de rotura. 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>

Debes tener en cuenta que si añades otro contenedor dentro de cualquiera de las rejillas, también tendrá 12 columnas (aunque más pequeñas) y deberás seguir la mismas instrucciones.

Rejilla en web Bootstrap anidada

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 diseño web con Bootstrap

Diseñando la web con las clases y reglas CSS

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

Si escribes un elemento HTML y lo dejas tal cual no ocurrirá nada hasta que le asignes una de esas clases.

Por ejemplo la clase container define un div que no superará los 1200px, pero si a ese mismo div le implementas la clase container-fluid, el contenedor ocupará todo el ancho de la pantalla.

Ya te he dicho que esto no es un tutorial y la lista es demasiado larga. Así que las tendrás que ir descubriendo poco a poco con el uso o desde su página oficial.

Algunas clases que puedes usar en el diseño web con Bootstrap

Ahora que sabemos para qué sirve Bootstrap vamos con el siguiente paso lógico, descargar Bootstrap.

Cómo descargar Bootstrap

Es posible que antes de resolver esto deba comentarte desde dónde descargar Bootstrap. La respuesta es sencilla. Debes hacerlo desde su página oficial getbootstrap.com.

Página oficial desde donde descargar Bootstrap

Verás el botón para descargar Bootstrap. Si lo pulsas te llevará a la página Getting started donde te mostrará las tres opciones de descarga.

Como los expertos en diseño y desarrollo de páginas web saben buscarse la vida, te lo voy a explicar en su forma más sencilla. Así que pulsaremos sobre la primera opción que nos facilitará los archivos CSS, JavaScript y de fuentes básicos para nuestro trabajo de diseño.

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

Si prefieres partir de páginas prediseñadas de Bootstrap también nos ofrece esta opción, aunque un tanto limitada.

Qué contienen las carpetas de Bootstrap

Tal vez con la explicación anterior sigas sin saber muy bien qué es lo que contienen las carpetas que has descargado. Contienen archivos con instrucciones que van a hacer que tu trabajo de desarrollo web se reduzca considerablemente.

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

Como Bootstrap tiene sus propias reglas CSS y funciones JavasScript, solo tendrás que saber que existen para poder usarlas en tus archivos 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.

Además Bootstrap viene con comportamientos predefinidos para menús, desplegables, tooltips, acordeones y muchos de esos elementos que utilizas en el diseño de tu página web y a los que solo tendrás que dar un estilo personalizado adaptado a tu diseño (si quieres).

Qué hacer con los archivos de Bootstrap

Como ya hemos visto aún no tenemos ningún archivo HTML asociado a las carpetas de Bootstrap y ha llegado el momento de crearlo.

Para comenzar desde el principio ahorrando trabajo vamos a usar una de las plantillas de ejemplo que proporciona en su web. En la misma página desde donde descargamos el framework pero un poco más abajo veremos la sección Examples.

Aunque podríamos usar una plantilla más básica me gusta Carousel, así que vamos a utilizar esa para destriparlo un poco. Eso si, se nos va a complicar algo el trabajo porque necesita de algún archivo que no incluyen las carpetas descargadas. Pero estamos aquí para ir cogiendo soltura en el diseño web con Bootstrap y no queremos quedarnos en lo más básico.

Demos diseños web Bootstrap

Descargar una página web Bootstrap demo

Verás que no existe opción de descarga en las páginas web de ejemplo, así que tendremos que descargarla una vez ejecutada.

Es muy fácil:

  1. Clica sobre la imagen de la demo para que se abra en el navegador.
  2. Pon el cursor del ratón en una parte de la pantalla que no corresponda al carrusel inicial, ni a las imágenes circulares y haz clic con el botón secundario.
  3. Selecciona la opción de guardar como.

Descargar ejemplo de diseño web con Bootstrap

Fíjate que en las opciones puedes seleccionar solo el archivo HTML. Hazlo así porque si no descargarás la web completa.

Descargar solo el HTML del diseño de la web Bootstrap

Ahora que disponemos de todos los archivos necesarios para tener una página web (de una sola página) utilizando Bootstrap, vamos a juntarlos en una sola carpeta.

Cómo implementar Bootstrap en una página web

Para instalar o implementar bootstrap en nuestro sitio web el primer paso es crear una carpeta que contendrá tanto las carpetas Bootstrap, como el archivo que acabamos de descargar.

  • 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. Por ejemplo index.html

Este último paso solo es por comodidad, para no tener un archivo con un nombre tan largo y con espacios en blanco entre palabras. Hay que respetar las buenas costumbres en el desarrollo web.

Con lo anterior la carpeta quedará con este contenido:

Carpeta de tu primer diseño web con Bootstrap

Si ejecutas ahora el archivo index en el navegador (clicando dos veces encima) verás que algo raro está pasando. El diseño no tendrá estilo, ningún tipo de comportamiento y no se parecerá en nada a lo que habíamos visto.

Bootstrap sin elementos de diseño web

¡Claro, no hemos conectado el framework con el archivo HTML!

Imagen banner diseño web valencia

¿Hacemos juntos tu

Página web?

Te ofrezco un diseño web y un desarrollo de la página a la medida de tus necesidades.

Solicitar un Presupuesto!

Conectar Bootstrap con el archivo HTML

Supongo que sabrás que en este momento te va a hacer falta un editor de código. Yo te recomiendo que instales Notepad++  ya que un editor de texto normal no te va a servir.

Abre el archivo index.html y vamos a revisarlo. Verás que todos los enlaces están a puntando a los archivos de la página de origen y necesitamos apuntarlos a los de nuestra carpeta.

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

Vamos a hacerlo 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 están a puntando a una ruta que no tenemos en nuestra carpeta. Como sabemos que tenemos todas las carpetas en la raíz, deberemos ajustar las urls para que apunten a ellas.

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 y comprobarás que todo funciona menos el carrusel que va a necesitar de algunos archivos más.

Encoje el navegador y verás el efecto responsive en el diseño.

En este punto, seguramente para un ejemplo más sencillo de plantilla ya tendríamos bastante, pero en este nos hacen falta los archivos complementarios para el carrusel.

Descargar archivos complementarios

Para acceder a los archivos todavía necesarios debemos acudir de nuevo a la versión que nos ofrece Bootstrap de la demo. Con las tecla Ctrl+U, accederemos al código fuente de la página.

Descargar archivos código fuente de la web

Haz clic sobre los enlace a los archivos siguientes para que se abran en una nueva pestaña y descárgalos con la opción guardar como clicando 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 carpetas correspondientes 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>

Si por algún extraño motivo estás usando Internet Explorer, puedes descargar también los archivos que solucionan sus errores.

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.

Las imágenes del archivo demo

Si observas las imágenes de la demo verás que no son imágenes al uso pero puedes crear las tuyas y sustituirlas. Utiliza las proporciones asignadas en el archivo.

Una vez tengas tus fotos podrás eliminar también el enlace y el archivo que nos facilitaba las imágenes demo:

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

Resultado de tu primer diseño web con Bootstrap

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

Diseño web con Bootstrap en vídeo

Igual que en otras ocasiones insisto en que no se me da demasiado bien lo de hablar ni en público ni en vídeo, pero te será muy cómodo hacer una revisión de todo.

Como un vídeo vale más que 1000 palabras, para finalizar este artículo en el que te he presentado a tu nuevo amigo, voy a hacer un repaso del proceso completo. Desde la descarga del framework, hasta cuando de verdad comienza el proceso de diseño web 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 quedado alguna duda, que supongo serán muchas, puedes hacer tu pregunta en el formulario de comentarios.

Si te ha gustado comparte

About the Author

Ernesto Barrachina

¿Quieres ver mi biografía?

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

¿Lo hacemos?

Siguiente
Anterior

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*