Tutorial Bootstrap: primeros pasos con el framework de Twitter

Bootstrap es un framework que permite a los desarrolladores web crear páginas web para todo tipo de dispositivos. Con este fin, el proyecto de código abierto ofrece plantillas de diseño basadas en HTML y CSS, así como extensiones adicionales para JavaScript. Inicialmente, Twitter había planeado Bootstrap como una herramienta interna de la empresa para la homogeneización del diseño. Sin embargo, en 2011, el framework fue publicado en la plataforma de desarrollo colaborativo de software GitHub, donde en un periodo de tiempo muy corto y con decenas de desarrollos ulteriores, se convirtió en uno de sus proyectos más populares. 

¿Por qué es Bootstrap tan interesante para los desarrolladores?

Con la implementación de plantillas prediseñadas en HTML y CSS, los desarrolladores web no necesitan desarrollar una buena idea para una página web desde cero. Su estructura modular permite integrarlas fácilmente en cualquier documento HTML. Con esto, se eliminan muchas de las tediosas configuraciones CSS, ahorrando una gran cantidad de tiempo y esfuerzo. Esto incluye, entre otros, los siguientes elementos:

  • Botones
  • Elementos de navegación
  • Vista en miniatura
  • Menús desplegables
  • Avisos
  • Historial
  • Inclusión responsiva de vídeos

Otro aspecto importante es el Bootstrap grid o rejilla, sobre la que se construye el layout de una página web. Este sistema facilita la definición de los márgenes y el posicionamiento de los elementos que constituyen una página web distribuyendo los layouts en 12 columnas. En la organización de los elementos en esta cuadrícula se puede distinguir entre una gran variedad de tamaños de pantalla, ya sea de escritorio, smartphone, tablet o portátil. En cualquier caso, Bootstrap asegura un diseño web responsivo.

Opcionalmente, los plugins de JavaScript basados en el framework jQuery ofrecen la posibilidad de integrar en el proyecto elementos de interfaz de usuario tan útiles como consejos de uso de la herramienta o cuadros de diálogo, así como de extender la funcionalidad de otros elementos ya integrados como, por ejemplo, la función autocompletar para los campos de búsqueda. Para poder utilizar Bootstrap con elementos de JavaScript, solo es necesario incluir la biblioteca jQuery en el documento HTML.

Primeros pasos: descargar Bootstrap e instalarlo

Debido a que Twitter lanzó Bootstrap como un software libre, su descarga y uso no tienen ningún coste. Aquellos desarrolladores web con más experiencia también se benefician del estatus open source de Bootstrap, pues pueden adaptar y modificar el framework de acuerdo a sus necesidades. En la siguiente guía presentamos las medidas necesarias para utilizar plantillas de Bootstrap en JavaScript y CSS.

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

  2. Descomprime el archivo y copia el “Bootstrap File” en el directorio deseado.

  3. Obtendrás las carpetas “CSS”, “fonts” y “js”. La carpeta “fonts” contiene más de 250 iconos en forma de tipografía de la fuente Glyphicons 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 irrelevante (como espacios) para facilitar su interpretación
    • bootstrap.css.map: contiene mapas de fuente CSS, que facilitan la búsqueda de datos originales en formato LESS
    • bootstrap-theme.css: archivos CSS de los temas prediseñados
    • bootstrap-theme.min.css: código reducido de los temas
    • bootstrap-theme.css.map: mapas de fuente de los temas
    • bootstrap.js: código JavaScript en formato legible
    • bootstrap.min.js: código JavaScript reducido

  4. Si deseas utilizar elementos de JavaScript, puedes descargar adicionalmente la amplia biblioteca JavaScript de funciones jQuery en jquery.com.

  5. Una vez se han descargado e identificado todos los componentes, puedes empezar a trabajar con el framework. Para ejemplificarlo mejor, te mostraremos 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 visualización en dispositivos móviles.

  1. Guarda el proyecto como “basic.html” en el escritorio.

  2. Para crear una plantilla de Bootstrap desde este documento HTML, es necesario implementar archivos CSS y JavaScript en el documento. Esto se logra especificando el directorio donde se encuentran las carpetas. Es aconsejable incluir JavaScript 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 personalizada libremente. En la página web oficial encontrarás los diferentes códigos para configurar tipografías, botones, el Bootstrap grid, etc. 

La importancia de los conocimientos previos en programación

Aún cuando Bootstrap cuenta con contenidos prediseñados, es necesario tener conocimientos básicos en HTML y CSS para poder configurarlos. Incluso programadores experimentados pueden necesitar algo de tiempo para acomodarse a la interfaz, aunque suele tener su recompensa. Para quienes no tengan el tiempo o los medios, existen bibliotecas de plantillas Bootstrap creadas por otros usuarios y que están disponibles de forma gratuita o de pago para ser descargadas. Quien trabaje con HTML, CSS y JavaScript reconocerá rápidamente las ventajas de trabajar con este framework. Estas son principalmente:

  • El enorme ahorro de tiempo
  • La gran cantidad de posibilidades en cuanto a diseño responsivo
  • Las actualizaciones periódicas y asistencia por parte de una gran comunidad de usuarios
  • La documentación disponible sobre el framework

Los anteriores factores, sumados a que Bootstrap es un proyecto de código abierto, lo posicionan como uno de los frameworks más populares para el diseño web.

¿Le ha resultado útil este artículo?
Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continua navegando, consideramos que acepta su uso. Puede obtener más información, o bien conocer cómo cambiar la configuración de su navegador en nuestra. Política de Cookies.