Primeros pasos con Bootstrap

En muchas ocasiones nos gustaría darle un lavado de cara o un cambio de imagen a nuestra página web y cuando nos ponemos a ello nos damos cuenta que realmente no controlamos mucho el CSS o simplemente buscamos otra alternativa en la que tengamos que escribir menos código.

Pues bien, en el artículo de hoy vamos a ver que es Bootstrap y cómo nos puede ayudar y facilitar el darle un cambio o mejora de diseño a nuestra página web de forma sencilla.

¿Qué es Bootstrap?

Bootstrap es un framework CSS que se desarrolló en principio por Twitter en el año 2011 aunque poco tiempo después la licencia fue liberada y su desarrollo continúa en un repositorio de GitHub. 

Este framework permite dar forma y estilo a un sitio web haciendo uso de librerías CSS. Estas incluyen diferentes tipografías, botones, menús, cuadros y otros elementos que normalmente se usan en cualquier página web.

Es una excelente herramienta que nos permite crear interfaces de usuario sencillas, ordenadas y totalmente adaptadas a cualquier dispositivo y pantalla. Este punto es un gran acierto ya que con el algoritmo de Google se premia a aquellas páginas webs que están bien adaptadas sobre todo a dispositivos móviles.

Ofrece también herramientas que nos permiten usar los estilos y elementos de sus librerías, además de que soporta muy bien el HTML 5 y CSS 3 y es compatible con la gran mayoría de navegadores webs que tenemos en el mercado actualmente.

Un poco de historia de Bootstrap:

Este proyecto de código abierto fue creado en un principio por el equipo de desarrolladores de twitter con el objetivo de crear una librería de recursos propios para que les resultara más sencillo su trabajo.

La verdadera razón es que todos y cada uno de los desarrolladores tenemos una forma de abordar los problemas de codificación diferente y cuando en el proyecto se ven implicados multitud de ellos los problemas de inconsistencias son inevitables.

Según palabras de Mark otto:

“…un pequeño grupo de desarrolladores y yo nos reunimos a diseñar y construir una nueva herramienta interna y vimos una oportunidad de hacer más. A través de ese proceso, nos vimos construyendo algo mucho más sustancial que otra herramienta interna más. Meses después, terminamos con una primera versión como una manera de documentar y compartir bienes y patrones de diseño comunes dentro de la compañía.”

Finalmente twitter liberó esta herramienta como código abierto en agosto 2011, convirtiéndose en apenas 6 meses después en el proyecto de desarrollo más popular de Github.

Ventajas de Bootstrap

Bootstrap ofrece una amplia gama de plantillas de diseño basadas en lenguajes como HTML, CSS y extensiones opcionales de JavaScript. No obstante las ventajas de Bootstrap son las siguientes:

  1. Es fácil de usar ya que solo se necesitan unos conocimientos básicos sobre HTML y CSS.
  2. Gracias a Bootstrap, tendremos un diseño responsive que se adaptará a las pantallas de varios dispositivos. Es una gran ventaja ya que nos ahorrará mucho trabajo a la hora de crear el diseño responsive para dispositivos móviles.
  3. Como hemos dicho antes, Bootstrap tiene una alta compatibilidad, es compatible con todos los navegadores actuales.
  4. Al incluir elementos predefinidos y funcionalidades para crear formularios, tablas, tipografías, botones y mucho más, ¡nos ahorra tiempo!
  5. Al ser un framework muy usado, existe una comunidad grande de desarrolladores que van añadiendo nuevas funcionalidades a Bootstrap.

Descargar Bootstrap

Una vez que sabemos lo que es Bootstrap vamos a ver cómo y dónde descargarlo. Este framework puedes encontrarlo aquí. Puedes darle al botón de “Download” para descargar los archivos y añadirlos manualmente en tu proyecto o bien puedes añadirlos a tu proyecto mediante el CDN añadiendo los siguientes scripts en la cabecera de tu página web.

<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css» integrity=»sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh» crossorigin=»anonymous»>

<script src=»https://code.jquery.com/jquery-3.4.1.slim.min.js» integrity=»sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n» crossorigin=»anonymous»></script>

<script src=»https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js» integrity=»sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo» crossorigin=»anonymous»></script>

<script src=»https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js» integrity=»sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6″ crossorigin=»anonymous»></script>

Una vez hayas añadido Bootstrap ya puedes usar todas las clases de las que dispone para darle diseño a tu página web.

¿Cómo empezar con Bootstrap?

Una de las formas más sencillas para empezar con Bootstrap y sobre todo si no tienes mucha experiencia o conocimientos sobre programación, es usar alguna de las plantillas gratis que podemos encontrar aquí.

Hay bastantes temas gratis que podemos descargar y usar en nuestra página web. Una vez elegimos el tema que nos interesa podemos ver un ejemplo de la plantilla si le damos al botón de “Live Preview” y para descargarnos la plantilla simplemente le damos al botón rojo “Free Download

Una vez descargado el tema lo instalaremos en nuestro WordPress y listo. Para ello se puede hacer directamente por FTP subiendo la carpeta del tema (ya descomprimida) y luego desde el administrador de WordPress en el menú “Apariencia / Temas” nos aparecerá el tema que hemos subido y tendremos que activarlo.

La otra opción es en este mismo menú que comentamos arriba y le tenemos que dar al botón que aparece en la parte superior llamado “Añadir nuevo”. En esta sección aparecen temas de WordPress pero encima hay otro botón llamado “Subir tema”, en el cual si le damos nos aparecerá otro botón para seleccionar el zip del tema que hemos descargado y WordPress se encargará de instalarlo. Una vez instalado lo activamos y listo.

Si tienes conocimientos de programación puedes mejorar la plantilla o tema que ya tengas aplicando las clases y estilos que nos proporciona Bootstrap y que puedes encontrar en la documentación. Aquí encontrarás todas las clases que puedes añadir y todos los elementos que puedes generar y dar estilo en la web.

Si por el contrario tienes experiencia y manejo programando o al menos te defiendes, puedes hacer uso de las clases que proporciona Bootstrap para darle estilo y una mejor apariencia a los elementos de tu web con solo añadirles una clase. Desde este enlace podemos ver los ejemplos de cómo queda el elemento después de añadirle la clase correspondiente y nos muestra estas clases. También en el menú izquierdo lateral encontrarás todos los elementos que puedes modificar o crear con Bootstrap.

Conclusión

Como puedes comprobar el uso de Bootstrap es muy sencillo y nos permite darle un diseño elegante y adaptable a todos los dispositivos y pantallas de manera rápida. Tanto si tienes experiencia programando como si no, Bootstrap puede ser usado por cualquier tipo de usuario gracias a los temas que ya tiene diseñados como a las clases que nos proporciona para modificar los elementos a nuestro gusto. Puedes contarnos qué te ha parecido el artículo, si has tenido algún problema a la hora de descargar o incluir Bootstrap en tu página web o si ya habías probado antes este framework, en general nos gustaría saber vuestra experiencia con este framework tan útil.

¿Te ha gustado el artículo?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (9 votos, promedio: 2,89 sobre 5)
Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes


Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada.

3 Comentarios

Ghpt

Si estás comenzando a utilizar el programa de bootstrap este es tu artículo. Muchas gracias porque me ha gustado muchísimo el enfoque que le habéis dado. Saludos.

Tecnico

Una guía genial y totalmente recomendable para llevar a cabo un mini curso de iniciación de bootstrap. Muchísimas gracias por compartirlos Ana.

networking madrid

Gracias por los consejos! Sí que parece sencillo y con muchas aplicaciones para mejorar nuestros negocios.