Bootstrap es un framework que permite a los de­sa­rro­lla­do­res web crear páginas web para todo tipo de di­s­po­si­ti­vos. Con este fin, el proyecto de código abierto ofrece pla­n­ti­llas de diseño basadas en HTML y CSS, así como ex­te­n­sio­nes adi­cio­na­les para Ja­va­S­cri­pt. Ini­cia­l­me­n­te, Twitter había planeado Bootstrap como una he­rra­mie­n­ta interna de la empresa para la ho­mo­ge­nei­za­ción del diseño. Sin embargo, en 2011, el framework fue publicado en la pla­ta­fo­r­ma de de­sa­rro­llo co­la­bo­ra­ti­vo de software GitHub, donde en un periodo de tiempo muy corto y con decenas de de­sa­rro­llos ul­te­rio­res, se convirtió en uno de sus proyectos más populares. 

¿Por qué es Bootstrap tan in­te­re­sa­n­te para los de­sa­rro­lla­do­res?

Con la im­ple­me­n­ta­ción de pla­n­ti­llas pre­di­se­ña­das en HTML y CSS, los de­sa­rro­lla­do­res web no necesitan de­sa­rro­llar una buena idea para una página web desde cero. Su es­tru­c­tu­ra modular permite in­te­grar­las fá­ci­l­me­n­te en cualquier documento HTML. Con esto, se eliminan muchas de las tediosas co­n­fi­gu­ra­cio­nes CSS, ahorrando una gran cantidad de tiempo y esfuerzo. Esto incluye, entre otros, los si­guie­n­tes elementos:

  • Botones
  • Elementos de na­ve­ga­ción
  • Vista en miniatura
  • Menús de­s­ple­ga­bles
  • Avisos
  • Historial
  • Inclusión re­s­po­n­si­va de vídeos

Otro aspecto im­po­r­ta­n­te es el Bootstrap grid o rejilla, sobre la que se construye el layout de una página web. Este sistema facilita la de­fi­ni­ción de los márgenes y el po­si­cio­na­mie­n­to de los elementos que co­n­s­ti­tu­yen una página web di­s­tri­bu­ye­n­do los layouts en 12 columnas. En la or­ga­ni­za­ción de los elementos en esta cua­drí­cu­la se puede di­s­ti­n­guir entre una gran variedad de tamaños de pantalla, ya sea de es­cri­to­rio, sma­r­t­pho­ne, tablet o portátil. En cualquier caso, Bootstrap asegura un diseño web re­s­po­n­si­vo.

Op­cio­na­l­me­n­te, los plugins de Ja­va­S­cri­pt basados en el framework jQuery ofrecen la po­si­bi­li­dad de integrar en el proyecto elementos de interfaz de usuario tan útiles como consejos de uso de la he­rra­mie­n­ta o cuadros de diálogo, así como de extender la fu­n­cio­na­li­dad de otros elementos ya in­te­gra­dos como, por ejemplo, la función au­to­co­m­ple­tar para los campos de búsqueda. Para poder utilizar Bootstrap con elementos de Ja­va­S­cri­pt, solo es necesario incluir la bi­blio­te­ca jQuery en el documento HTML.

Primeros pasos: descargar Bootstrap e in­s­ta­lar­lo

Debido a que Twitter lanzó Bootstrap como un software libre, su descarga y uso no tienen ningún coste. Aquellos de­sa­rro­lla­do­res web con más ex­pe­rie­n­cia también se be­ne­fi­cian del estatus open source de Bootstrap, pues pueden adaptar y modificar el framework de acuerdo a sus ne­ce­si­da­des. En la siguiente guía pre­se­n­ta­mos las medidas ne­ce­sa­rias para utilizar pla­n­ti­llas de Bootstrap en Ja­va­S­cri­pt y CSS.

  1. Visita la página oficial de Bootstrap y descarga el pack “Bootstrap”, que contiene los archivos CSS y Ja­va­S­cri­pt (en versión compilada y reducida), así como las fuentes y el tema opcional.

  2. De­s­co­m­pri­me el archivo y copia el “Bootstrap File” en el di­re­c­to­rio deseado.

  3. Obtendrás las carpetas “CSS”, “fonts” y “js”. La carpeta “fonts” contiene más de 250 iconos en forma de ti­po­gra­fía de la fuente Gl­y­phi­co­ns Halflings, que no tiene ningún coste para los usuarios de Bootstrap. Los archivos de las carpetas “CSS” y “js” contienen:

    • bootstrap.css: código CSS en formato legible
    • bootstrap.min.css: código CSS reducido. Se ha eliminado contenido irre­le­va­n­te (como espacios) para facilitar su in­te­r­pre­ta­ción
    • bootstrap.css.map: contiene mapas de fuente CSS, que facilitan la búsqueda de datos ori­gi­na­les en formato LESS
    • bootstrap-theme.css: archivos CSS de los temas pre­di­se­ña­dos
    • bootstrap-theme.min.css: código reducido de los temas
    • bootstrap-theme.css.map: mapas de fuente de los temas
    • bootstrap.js: código Ja­va­S­cri­pt en formato legible
    • bootstrap.min.js: código Ja­va­S­cri­pt reducido

  4. Si deseas utilizar elementos de Ja­va­S­cri­pt, puedes descargar adi­cio­na­l­me­n­te la amplia bi­blio­te­ca Ja­va­S­cri­pt de funciones jQuery en jquery.com.

  5. Una vez se han de­s­ca­r­ga­do e ide­n­ti­fi­ca­do todos los co­m­po­ne­n­tes, puedes empezar a trabajar con el framework. Para eje­m­pli­fi­car­lo mejor, te mo­s­tra­re­mos cómo crear una página HTML.

  6. Abre tu editor de código favorito, por ejemplo Notepad++, y pega el siguiente código:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
      <h1>¡Hola, esta es mi primera plantilla Bootstrap!</h1>
</body>
</html>

La etiqueta meta “viewport” dentro de la sección “head” asegura una correcta vi­sua­li­za­ción en di­s­po­si­ti­vos móviles.

  1. Guarda el proyecto como “basic.html” en el es­cri­to­rio.

  2. Para crear una plantilla de Bootstrap desde este documento HTML, es necesario im­ple­me­n­tar archivos CSS y Ja­va­S­cri­pt en el documento. Esto se logra es­pe­ci­fi­ca­n­do el di­re­c­to­rio donde se en­cue­n­tran las carpetas. Es aco­n­se­ja­ble incluir Ja­va­S­cri­pt al final del documento, pues de lo contrario podrías estar alargando los tiempos de carga de tu página web. El código tendrá entonces este aspecto:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name=viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/class" href="Bootstrap/css/bootstrap.min.css">
</head>
<body>
     <h1>¡Hola, esta es mi primera plantilla Bootstrap!</h1>
     <script src="Bootstrap/js/jquery-1.12.0.min.js"></script>
     <script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
  1. Por último, guarda el documento como “bootstrap-template.html”. Para abrir el documento HTML solo es necesario hacer doble clic, este se abrirá en tu navegador web y mostrará el mensaje utilizado en el título (h1).

  2. Una plantilla Bootstrap puede ser pe­r­so­na­li­za­da li­bre­me­n­te. En la página web oficial en­co­n­tra­rás los di­fe­re­n­tes códigos para co­n­fi­gu­rar ti­po­gra­fías, botones, el Bootstrap grid, etc. 

La im­po­r­ta­n­cia de los co­no­ci­mie­n­tos previos en pro­gra­ma­ción

Aún cuando Bootstrap cuenta con co­n­te­ni­dos pre­di­se­ña­dos, es necesario tener co­no­ci­mie­n­tos básicos en HTML y CSS para poder co­n­fi­gu­rar­los. Incluso pro­gra­ma­do­res ex­pe­ri­me­n­ta­dos pueden necesitar algo de tiempo para aco­mo­dar­se a la interfaz, aunque suele tener su re­co­m­pe­n­sa. Para quienes no tengan el tiempo o los medios, existen bi­blio­te­cas de pla­n­ti­llas Bootstrap creadas por otros usuarios y que están di­s­po­ni­bles de forma gratuita o de pago para ser de­s­ca­r­ga­das. Quien trabaje con HTML, CSS y Ja­va­S­cri­pt re­co­no­ce­rá rá­pi­da­me­n­te las ventajas de trabajar con este framework. Estas son pri­n­ci­pa­l­me­n­te:

  • El enorme ahorro de tiempo
  • La gran cantidad de po­si­bi­li­da­des en cuanto a diseño re­s­po­n­si­vo
  • Las ac­tua­li­za­cio­nes pe­rió­di­cas y asi­s­te­n­cia por parte de una gran comunidad de usuarios
  • La do­cu­me­n­ta­ción di­s­po­ni­ble sobre el framework

Los an­te­rio­res factores, sumados a que Bootstrap es un proyecto de código abierto, lo po­si­cio­nan como uno de los fra­me­wo­r­ks más populares para el diseño web.

Ir al menú principal