Que es Bootstrap, Historia y tu Primer Hola Mundo

Bootstrap

Entre las Herramientas más populares para el diseño Web se encuentra Bootstrap que en la actualidad se encuentra en su versión Nro 4, pero hay cosas que son importantes de conocer sobre esta herramienta, su historia, implementación en un proyecto y muchos otros detalles que compartiremos contigo en este Artículo.

Que es Bootstrap ?

Bootstrap es un Framework para crear paginas webs de gran calidad que se adaptan a múltiples pantallas, es decir su interface tiene el concepto de Responsive Design (Diseño Adaptable).

Si no sabes que es un Framework te invitamos a leer nuestro artículo Que es un Framework, Historia y Más Detalles para que estés familiarizado con este artículo.

Diseño Adaptable a todos los dispositivos o pantallas

Bootstrap esta compuesto en su core por el Lenguaje de Marcado HTML, Hoja de Estilos CSS, jQuery y otras librerías que automatizan el trabajo con este genial Framework, todas estas tecnologías con las que esta hecho Bootstrap lo hacen una herramienta de alto Nivel.

Bootstrap te brinda un conjunto de elementos pre-diseñados listos para usarlos, como Botones, Formularios, Cards, etc. Todos estos tienen una clase CSS asignada por Bootstrap la cual llama a una o muchas propiedades CSS y le da un estilo predeterminado, por ejemplo si necesitas botones en tu proyecto, solo agregas el elemento HTML y le asignas una clase de Bootstrap

Con esto obtenemos botones que Bootstrap nos ofrece listos para usarlos en nuestro proyecto.

Bootstrap hasta la fecha de escrito este artículo se encuentra en su versión 4.1 y cada cierto tiempo vienen sacando nuevas versiones que mejorar y solucionan problemas del Framework Bootstrap.

Historia

Bootstrap fue diseñador por Mark Otto y Jacob Thornton ambos en Twitter crearon este Framework para usarlo internamente en los proyectos de la compañía, antes de usar Bootstrap en Twitter usaban muchas herramientas para el diseño de las pantallas Front pero esto hizo que presenten muchos problemas de compatibilidad generando así una gran carga de trabajo que los hacia menos productivos.

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

*Mark Otto

Antes de lanzarse como una herramienta de código abierto y de uso libre al público, Bootstrap tenia el nombre de Twitter Blueprint.

Twitter celebró su evento Semana Hack y en dicho evento se hizo muy popular cuando los desarrolladores usaron esta herramienta para sus proyectos.

Bootstrap fue lanzado el 19 de Agosto de 2011 y hasta la actualidad han lanzado más de 20 versiones del Framework, actualmente Bootstrap es de uso libre y tambien es usado por la compañía Twitter en sus proyectos.

Que Podemos hacer con Bootstrap?

Con este Framework podemos crear sitios Webs profesionales que pueden contener muchos componentes y elementos que nos brinda consigo Bootstrap, entre los elementos que nos brinda son:

  • Alertas
  • Breadcrumbs
  • Botones
  • Tarjetas
  • Carrusel
  • Listas Ordenandas
  • Formularios
  • Ventanas Modales
  • Menu de Navegación
  • Paginación
  • Barras de Progreso
  • Entre otros

Una página web necesita de estos elementos y Bootstrap te los brinda listos para que lo uses en tu proyecto.

Hola Mundo

Para crear nuestra primera vista con Bootstrap debemos de instalar o desplegar Bootstrap a nuestro proyecto, para ello agrega la siguiente linea entre las etiquetas <head></head> de tu página HTML para llamar a la hoja de estilos CSS de Bootstrap

Y al final de tu página antes de cerrar la etiqueta </body> coloca la librería jQuery y luego el de Bootstrap, primero se coloca jQuery no lo olvides

También puedes descargar los archivos de Bootstrap desde su web oficial y llamarlos a tu documento, en su web oficial tienes muchas formas de instalar Bootstrap y para el tipo de proyecto que necesites.

Para descargar los archivos de jQuery puedes hacerlo desde su web oficial igualmente.

Con esto ya tenemos desplegado Bootstrap en nuestro proyecto, ahora para crear un elemento en nuestra vista debemos agregar las etiquetas necesario, veamos el siguiente ejemplo en donde agregaremos un menú de navegación superior, un banner contenedor (jumbotrom) y dentro del jumbotron un encabezado, un texto y un botón

Y obtenemos nuestra primera Página con Bootstrap y un mensaje Hola Mundo con otros elementos que nos brinda este Framework

Hemos creado un archivo CSS aparte para el Menú y no llenar de tanto codigo el ejemplo anterior.

Te invitamos a leer nuestro artículo Diseña Tu Primera Página Web con Bootstrap 4 en donde explicamos detalladamente a diseñar una web con Bootstrap

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required