Crear un sitio web con Bootstrap

Bootstrap es un conjunto de herramientas gratuito que puede ayudarlo a crear páginas web atractivas, compatibles con los estándares y receptivas. Para sacarle el máximo partido, necesitará un conocimiento básico de HTML y CSS, así como de qué es JavaScript y cómo encajan estas tres cosas; pero no se necesitan habilidades avanzadas para producir algo que se vea profesional y funcione bien.

Bootstrap fue creado originalmente por los empleados de Twitter, Mark Otto y Jacob Thornton, para ayudar a los desarrolladores internos de Twitter a crear prototipos y herramientas analíticas y administrativas. La versión actual se ha convertido en algo mucho más flexible y ahora es de código abierto y está disponible para que cualquiera la descargue.

Tutorial

Nuestro tutorial de seis pasos muestra cómo implementar un menú desplegable en unas pocas líneas de HTML usando Bootstrap.

Crear un sitio web con Bootstrap le da acceso a una gran biblioteca de CSS predefinido para diseñar; JavaScript para manejar componentes como menús desplegables, barras de progreso y ventanas emergentes; y un conjunto de imágenes, iconos, en realidad, que se pueden usar en botones y menús. Le ayuda a lograr una apariencia uniforme y garantiza que los elementos de la página funcionarán en diferentes navegadores y dispositivos.

Dado que Bootstrap se basa en tecnologías web estándar, también es relativamente sencillo integrarlo en un entorno de desarrollo establecido, así como con plataformas como WordPress, Joomla y Drupal, por lo que si está trabajando en un sitio establecido, no tiene por qué interrumpir su flujo de trabajo y prácticas.

En total, ya sea que sea un diseñador web profesional o simplemente un entusiasta que carece de las habilidades de codificación para crear una página sofisticada desde cero, Bootstrap puede ayudarlo. Todo lo que necesita hacer es instalar el marco, luego acceder a los estilos y componentes de Bootstrap según sea necesario directamente desde su fuente HTML.

Descargando e instalando Bootstrap

Puede descargar el paquete básico de Bootstrap desde el sitio web de Bootstrap. Hay otras descargas disponibles que le permiten personalizar lo que está instalado y que incluyen código fuente y documentación adicionales, pero no necesitamos eso para empezar.

La descarga de Bootstrap llegará como un único archivo comprimido, que contiene una subcarpeta llamada bootstrap. Extraiga esto a una carpeta conveniente y luego ábralo. Dentro encontrará tres carpetas: estas contienen los archivos CSS que le dan a Bootstrap su apariencia distintiva, una selección de íconos y dos archivos JavaScript.

Esto es todo lo que necesitamos para comenzar: el siguiente trabajo es comenzar a crear el HTML que se basará en estos recursos. Si no tiene un editor de HTML preferido, le recomendamos que descargue una herramienta gratuita como Notepad++. De manera predeterminada, está configurado como un editor de texto, pero cuando abre o guarda un archivo con una extensión HTML o HTM, cambiará a resaltado de sintaxis HTML, para ayudarlo a escribir y depurar su código.

Creando tu primera página de Bootstrap

Con Notepad++ (o un editor similar) instalado, estamos listos para comenzar a usar Bootstrap. Si lo desea, puede crear un documento HTML usted mismo desde cero. Sin embargo, para garantizar que los elementos necesarios de Bootstrap se incluyan correctamente, es una buena idea comenzar con una plantilla del sitio web de Bootstrap.