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.
- 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.
- Descomprime el archivo y copia el “Bootstrap File” en el directorio deseado.
- 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
- Si deseas utilizar elementos de JavaScript, puedes descargar adicionalmente la amplia biblioteca JavaScript de funciones jQuery en jquery.com.
- 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.
- 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.
- Guarda el proyecto como “basic.html” en el escritorio.
- 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>
- 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).
- 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.
Artículos similares
REDPIXEL.PLShutterstock Marcado con JSON-LD según schema.org
JSON-LD permite a los programadores integrar metadatos como un script separado del contenido web en el popular formato JSON. Esta separación de lenguaje HTML y marcado semántico asegura una mayor legibilidad del código fuente, así como también hace más cómodo el etiquetado de metadatos para contenidos dinámicos. Todo esto convierte al formato más actual de estructuración de datos en un competidor…
Nociones básicas sobre HTML5
HTML5 es el nuevo lenguaje de Internet, sin embargo hay desarrolladores web que siguen usando lenguajes de hipertexto anticuados, como HTML 4.01 o XHTML, que precisan de numerosos plugins externos que ponen en peligro tanto la compatibilidad como la seguridad de las páginas web. Al contrario, HTML5 hace posible la directa integración de elementos multimedia e interfaces de programación basadas en…
WCAG: las directrices W3C para contenidos web accesibles
Le Web Content Accessibility Guidelines (WCAG) del W3C servono come raccomandazioni per i gestori di siti web durante la creazione di progetti online accessibili. A questo scopo le WCAG si basano su 4 principi fondamentali: percezione, usabilità, comprensibilità e robustezza. Questi punti chiave vengono assegnati a 12 linee guida di base per capire come si strutturino al meglio contenuti web…
Alternativas a Bootstrap: los mejores frameworks para frontend
Bootstrap es la solución más popular para la concepción y creación de interfaces de gran alcance. La colección de componentes HTML, CSS y JavaScript que Twitter publicó en 2011 bajo la licencia MIT, goza, sin duda, de una gran comunidad y de numerosas extensiones, interfaces para sistemas de gestión de contenidos y temas prediseñados. No obstante, existen diversas alternativas gratuitas a…
Bootstrap 5: novedades en el framework CSS
¿Qué novedades trae consigo Bootstrap 5? Con esta nueva versión, se espera facilitar aún más la creación de sitios web: sus desarrolladores prometen tiempos de carga más breves, una mejor experiencia de usuario y un código más práctico. Dejará de ser compatible con jQuery e Internet Explorer, aumentando la flexibilidad de su diseño.