Qué es Bootstrap y cómo instalarlo en WordPress con éxito

¿Qué es Bootstrap?

Bootstrap

Bootstrap es un framework basado en HTML, CSS y JavaScript para crear webs responsive, es decir, 100% adaptables a todo tipo de dispositivos móviles.

En el ámbito del diseño y desarrollo web un framework es un conjunto de herramientas basadas en lenguajes web como por ejemplo PHP, JavaScript y CSS cuyo principal objetivo es el de facilitar al máximo el proceso de diseño de tus páginas.

Bootstrap fue desarrollado por Twitter en el año 2011 y debido a simplicidad de uso, utilidad y coste nulo se ha posicionado como uno de los frameworks de referencia.

Principales características de Bootstrap

Características Bootstrap

Bootstrap posee muchas funcionalidades distintas que hacen de él una herramienta muy valiosa para cualquier persona que quiera diseñar una web totalmente responsive y que a su vez esté optimizada para conservar así buenos tiempos de carga.

Sus principales características son:

  • Open source: es un framework de código abierto y por tanto accesible para todo el mundo sin que esto implique ningún coste o limitación.
  • Grid: gracias a su sistema de rejilla basado en un diseño de 12 columnas conseguimos adaptar nuestro contenido a los distintos tamaños de pantalla.
  • HTML5 y CSS3: soporta las últimas versiones de HTML y CSS.
  • Optimización: posee un código limpio y optimizado para que tu web cargue lo más rápido posible.
  • Uso: tiene una curva de aprendizaje moderada y cuenta con documentación suficiente para conseguir resultados desde el primer día.
  • Componentes: a parte del Grid posee elementos de fácil instalación como por ejemplo iconos, botones, menús desplegables, etc…
  • Compatibilidad: el framework es compatible en navegadores tan importantes como:
    • Google Chore
    • Mozilla Firefox
    • Safari
    • Internet Explorer
    • Opera
  • LESS: funciona a la perfección con LESS, un preprocesador que te permitirá escribir CSS de forma mucho más rápida y con muchas más opciones.
  • Garantías: ha sido creado por Twitter, una empresa de renombre mundial que te asegurará un correcto funcionamiento así como continuas actualizaciones.

Requisitos previos para usar Bootstrap

Requisitos para usar Bootstrap

Antes de comenzar a utilizar la herramienta necesitarás conocimientos previos en HTML y CSS ya que el framework está basado en su totalidad en estos lenguajes.

Si bien JavaScript está involucrado también para activar y desactivar diferentes elementos como es el caso de los menús desplegables de Bootstrap no es necesario que tengas ningún conocimiento previo .

Para empezar con estos recursos tendrás más que suficiente:

Cómo funciona Bootstrap

Sistema de rejillas Grid

Sistema de rejillas (Grid)

Lo más importante de Bootstrap es su sistema de rejillas (también conocido como Grid) por el que mediante una serie de clases de CSS lograrás posicionar tu contenido en base a un sistema de 12 columnas adaptándose a la perfección hasta en 4 resoluciones diferentes.

Como podrás comprobar en la documentación 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

Para determinar el número de columnas que cada elemento tomará le añadiremos a las clases un número que irá del 1 al 12,  siendo 1 el espacio que tomará para una columna y 12 el correspondiente a las 12 columnas, es decir, todo el ancho del grid.

Por ejemplo, en el siguiente caso tenemos un div con 4 clases:

  • .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, es decir un 8/12 del ancho total.
  • .col-lg-6: en desktops grandes ocupará justamente la mitad.

A continuación te muestro un vídeo para que entiendas mejor como funciona el Grid:

Componentes

Además de la herramienta Grid Bootstrap te ofrece la posibilidad de incluir una serie de elementos en tus páginas: los componentes.

Los componentes no son más que una serie de estructuras en HTML que gracias a las clases CSS y el código desarrollado en JavaScript te permitirá dotar a tu web con una serie de elementos muy interesantes.

 

Componentes Bootstrap

Destacamos por ejemplo:

  • Glyphicons: más de 250 iconos en formato fuente en distintos tamaños y colores.
  • Dropdowns: menú desplegables para mostrar y ocultar toda la información en él en forma de enlaces.
  • Botones: botones simples o agrupados.
  • Breadcrumbs: también conocidas como “migas de pan”, para indicarte la localización de la página en la que te encuentras.
  • Alertas: te aportan información diferente en función del color que posea.

Para su implementación lo único que tienes que hacer es copiar la estructura básica del elemento y posteriormente añadir el contenido que quieras en su estructura HTML así como aplicarle los estilos que necesites vía CSS.

Aquí tenemos un ejemplo para la estructura de un menú desplegable:

Te muestro un segundo vídeo para que veas lo fácil que es crear alguno de los componentes de Bootstrap:

Cómo instalar Bootstrap en tu proyecto

Instalación de Bootstrap

Si quieres aprender a usar esta magnífica herramienta lo mejor es ensuciándote las manos y eso comienza por instalar Bootstrap.

Para ello dirígete a la página oficial y pulsa en Download Bootstrap”.

Como verás tienes varias opciones. Para que no te compliques te aconsejo que selecciones una de estas dos:

  • Download Bootstrap.
  • Bootstrap CDN.

Download Bootstrap

Lo único que tienes que hacer es seguir los siguientes pasos:

  1. Descarga Bootstrap en fichero zip pulsando en “Download Bootstrap”.
  2. Abre tu documento HTML y en la etiqueta <head> justo debajo de <title> introduce el enlace del archivo CSS minificado “bootstrap.min.css”.
  3. Añade a continuación dos enlaces. El primero para la librería jQuery de JavaScript ya que es requisito imprescindible para determinadas acciones (puedes acceder a ella aquí). Debajo del anterior añade el segundo al archivo “bootstrap.min.js” (también puedes incluirlos antes de finalizar la etiqueta </body> para que tu página cargue mejor).
  4. Transfiere todo los archivos a tu servidor vía FTP en el servidor de tu proveedor hosting.

La estructura de tu documento HTML tendría que ser algo así:

La distribución de archivos y carpetas de tu proyecto quedaría de forma simplificada de esta manera:

Estructura Proyecto Bootstrap

¿No te ha quedado claro? Déjame ayudarte entonces con otro vídeo:

Bootstrap CDN

Bootstrap utiliza la CDN MaxCDN para evitar que tengas que descargarte el framework previamente y transferirlo a tu servidor.

Como verás en la página official Bootstrap te ofrece varios enlaces para implementarlo:

MaxCDN Bootstrap

De estos tres realmente sólo necesitas dos: el “bootstrap.min.css” y el“bootstrap.min.js” (no te olvides de añadir también tu enlace a jQuery). Cópialos y pégalos justo debajo de la etiqueta <title> de tu documento:

Y listo. Con eso ya tendríamos el framework listo para ser usado.

Terminamos con otro vídeo para implementar Bootstrap vía CDN:

¿Qué opción elegir?

A grandes rasgos es mejor usar la segunda opción  ya que su instalación es mucho más rápida y al estar alojada en una CDN consumirá mucho menos recursos, ancho de banda y, en definitiva, hará que tu sitio web vaya mucho más rápido.

Por el contrario, descargar todos los ficheros en tu servidor y enlazarlo a tu documento HTML nunca está demás para darte mayor conocimiento sobre el funcionamiento de un servidor y aprender más de estas magníficas herramientas.

Incluso podrías trabajar offline con Bootstrap tras transferirlo a un servidor local.

Bootstrap en WordPress. ¿Es recomendable implementarlo?

Necesidad Bootstrap

Si usas un gestor de contenidos como WordPress puede darse el caso de necesitar este tipo de frameworks en situaciones en las que no puedas recurrir a plugins, temas framework y otras herramientas que ofrezcan diseño responsive.

El caso de las entradas de tu blog puede ser uno de ellos. Me explico.

Normalmente usamos el editor de WordPress para editar nuestras entradas. Es algo que te recomiendo al 100% pues si usaras un plugin de maquetación con efecto lock-in y lo desinstalarás algún día podrías perder toda la información que habías añadido.

¿Y que ocurre si usamos el editor para las entradas? Pues que toda la información almacenada allí va a ser contenido HTML plano por lo que no todos los elementos que añadamos se comportarán de forma responsive.

En cambio, teniendo Bootstrap conseguirás hacer que cualquier elemento de tu web esté sujeto a sus reglas pudiendo adaptarse a los dispositivos móviles.

Veamos un ejemplo para que lo entiendas con mayor claridad:

Cómo instalar Bootstrap en WordPress

Instalación Bootstrap WordPress

El proceso para implementar Bootstrap en WordPress será en cierta forma similar al que te mostré para instalarlo en tu proyecto web:

  • Download Bootstrap.
  • Bootstrap CDN.

Download Bootstrap

La transferencia de archivos vía FTP es la misma cambiando sólo el método para enlazar los archivos del framework con la estructura HTML de tu WordPress.

Para ello utilizaremos el siguiente código:

Código FTP Bootstrap WordPress

Con el código del recuadro rojo lo que estamos haciendo es insertar en la estructura HTML de nuestro sitio web un enlace al archivo CSS “bootstrap.min.css”  que irá situado justo encima del enlace de nuestra hoja de estilos principal y que he nombrado como “style.css”. 

Esto se hace para que el archivo CSS Bootstrap cargue antes y puedas sobreescribir los estilos de éste si lo necesitaras. Esto es algo típico de las hojas de estilos y que entenderás nada más adquieras unos conocimientos básicos sobre ellas.

Para el código JavaScript el procedimiento es exactamente el mismo cambiando sólo los nombres y extensiones de los archivos:bootstrap.js.css” para el archivo JavaScript de Bootstrap y “javacript.js “para mi archivo principal JavaScript.

Copia el siguiente código, haz los cambios necesarios según el directorio de tus archivos y pégalos en tu archivo functions.php de tu tema hijo:

No te pierdas el siguiente vídeo donde te lo explico con mayor detalle:

Bootstrap CDN

Si quieres utilizar la CDN de Bootstrap sólo tendrás que añadir los enlaces correspondientes al CSS y JavaScript:

Código CDN Bootstrap WordPress

El código a utilizar es el siguiente:

Como en el caso anterior pega el código en archivo functions.php de tu tema hijo y no te olvides de cambiar la ruta de tus archivos.

De nuevo te muestro un vídeo para implementar el Bootstrap vía CDN paso a paso.

Nota: tanto si implementas Bootstrap en WordPress vía transferencia de archivos en FTP como a través de la CDN no es necesario preocuparse por tener lista la librería de jQuery ya que WordPress la tiene instalada por defecto.

Recursos para sacarle todo el partido a Bootstrap

Si te ha parecido interesante todo lo que has visto hasta ahora te dejo aquí toda la documentación necesaria para que puedas recurrir a ella cada vez que lo necesites y beneficiarte de el potencial de esta magnífica herramienta:

Conclusión

Como habrás podido comprobar durante el artículo Bootstrap es una herramienta muy potente, relativamente sencilla de implementar y totalmente gratuita.

Si bien WordPress ofrece gran cantidad de recursos para hacer que tu blog sea 100% responsive puede darse el caso de que un framework como éste te aporte soluciones que antes no habías podido contemplar.

Además, y no menos importante, el hecho de aprender a usar esta herramienta implicará adquirir nuevos conocimientos que te pueden ser muy útiles a la hora de aprender otras técnicas y metodologías relacionadas con el diseño web en general.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (7 votos, promedio: 4,86 de 5)
Cargando…

Autor: Pedro Suárez

Soy diseñador web especializado en WordPress y Divi. Trabajo ayudando a aquellas personas que quieren mejorar sus vidas gracias al potencial de internet y las nuevas tecnologías implementando la web que realmente necesitan. Descarga ahora mi guía gratuita para comenzar a diseñar tu web con WordPress sin complicaciones.

Comparte esta entrada en
468 ad

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar