Hay muchas maneras diferentes de edificar un sitio web. Desde WP, Joomla!, Drupal y otros creadores de sitios, hasta HTML puro y herramientas como Dreamweaver.
En resumen, si precisas un sitio, puedes localizar uno entre muchos métodos para crearlo y, en este tutorial para principantes, aprenderás uno más llamado Bootstrap.
Bootstrap es un marco de trabajo o frameworkde front-endque te ayuda a crear sitios web más rápida y fácilmente.
Desarrollado en un principio por Twitter, Bootstrap ya se usa para muchas cosas, desde el desarrollo de aplicaciones web hasta temas de WordPress.
Es totalmente libre, versátil y también intuitivo.
Razones suficientes para que escribamos un tutorial detallado de Bootstrap que te enseñe todo lo que necesitas saber.
A continuación, aprenderás qué es Bootstrap, cómo configurarlo y construir una página de aterrizaje o landing pagesencillapara un sitio web paso a paso.
Al final, queremos que tengas un conocimiento básico de cómo usar Bootstrap a fin de que puedas seguir aprendiendo.
Back to top1) Tutorial de Bootstrap Paso 1: ¿Qué es Bootstrap?
La primera parte de este tutorial para principiantes se concentra en saber exactamente qué es Bootstrap.
Sólo si sabes con lo que estás lidiando, puedes empezar a entender cómo usarlo.
1.1) Un proyecto de código abierto
Como ya sabéis, Bootstrap fue creado originalmente por Twitter. Un pequeño conjunto de desarrolladores lo reunió como una herramienta interna para asistir a crear interfaces web coherentes.
El proyecto siguió creciendo hasta el momento en que por último decidieron lanzarlo al público para su uso gratis en 2011.
Desde entonces, el apoyo a Bootstrap ha continuado tanto por la parte de ciertos desarrolladores originales como de un gran conjunto de colaboradores.
Ha pasado por varias actualizaciones importantes durante los años (la última, Bootstrap cuatro, en el primer mes del año de 2018) que, entre otras muchas cosas, han añadido su conocido sistema de cuadrícula, diseño plano, un enfoque para móvil y CSS moderno.
Por ahora, el framework se halla entre las herramientas de desarrollo web más populares de la red.
Entre otras cosas, se ha transformado en el segundo proyecto más señalado de Github. No obstante, ¿qué hace exactamente?
1.2) Un marco de trabajofront-end
Como se mencionamos en la introducción, Bootstrap es un marco de trabajo o bien frameworkpara el desarrollo front-end .
No te preocupes si no sabes lo que eso significa, yo tampoco lo sabía cuando empecé a armar este artículo.
En la programación de ordenadores, un frameworkes algo así como una biblioteca. Contiene herramientas, piezas y funciones existentes que se pueden usar para efectuar tareas estándar de forma más rápida y fácil.
En el caso de Bootstrap, estas labores estándar son la creación de patrones de diseño como formularios, menús, columnas, botones y otros componentesque se necesitan con cierta frecuencia en los sitios.
Bootstrap te ayuda a configurarlos ofreciendo un gran número de clases de CSS que puedes aplicar fácilmente a elementos HTMLpara crear los componentes del sitio que precisas.
De esta manera, puedes crear páginas web complejas desde HTML estándar y personalizarlas según sus necesidades.
Además, Bootstrap viene con una serie de plugins jQueryque pueden administrar funcionalidad auxiliar como carruseles, botones, consejos de herramientas y más.
Si todavía no estás seguro de cómo te ayuda esto, no te preocupes, los siguientes ejemplos lo aclararán.
Lo importante es recordar que Bootstrap te ofrece muchos atajos para crear páginas web que te ahorrarán tiempo y energía.
Todo lo que necesitas es una comprensión básica de HTML y CSSpara crear sitios acomodables a móviles y compatibles con todos los navegadores modernos.
¿Todo bastante claro hasta el momento? Entonces veamos cómo funciona precisamente.
Back to top2) Tutorial de Bootstrap Paso 2: Configuración y descripción general
Para usar Bootstrap, primero necesitas integrarlo en tu ambiente de desarrollo, también conocido como página web.
Para ello, tienes dos posibilidades diferentes:
- Cargarlo remotamente, o
- Descargarlo y utilizar Bootstrap localmente.
Sin embargo, para ambos, primero necesitas algo en lo que cargarlo.
2.1) 1. Crear una página HTML
Como primer paso, crearemos una plantilla HTML simple, como base donde usaremos Bootstrap.
Para ello, la primera cosa que debes hacer es crear una carpeta en tu ordenador o bien servidorpara los archivos de proyecto. En este caso, sencillamente lo vamos a llamar bootstrap.
Aquí, crea un nuevo fichero de texto y llámalo index.html.
Ábrelo con un editor de texto de tu elección(por ejemplo, Bloc de notas++ o Texto sublime) y luego pega el código de abajo en él:
¡No olvides guardar tu fichero ya antes de proseguir adelante!
2.2) 2-a. Cargar Bootstrap a través de CDN
Como ya hemos explicado, Bootstrap consiste principalmente en hojas de estilo o style sheetsy scripts .
Como tal, puedes cargarlos en el encabezado y pie de página de tu página webcomo otros activos tales como fuentes personalizadas.
El marco de trabajo o bien frameworkofrece una ruta de acceso CDN (red de entrega de contenido o content delivery network) para esto. Puedes encontrarla en la página de descargas de Bootstrap.
Para poner Bootstrap en tu página, sencillamente pega el código de abajo en la sección <head> de tu plantilla.
Cuando guardes el fichero, cualquier navegador en que lo abras cargará automáticamente los activos de Bootstrap.
Usar el método recóndito es una gran idea,ya que muchos usuarios ya tienen el frameworken la caché de su navegador.
Si ese es el caso, no tendrán que recargarlo al llegar a tu lugar, lo que conlleva un tiempo de carga de la página más rápido. Como consecuencia, este es el método recomendado para sitios en vivo.
Sin embargo, para probar y desarrollar, o bien si deseas ser independiente de una conexión a Internet, también puedes obtener tu copia de Bootstrap.
2.3) 2-b. Alojar Bootstrap Localmente
Una forma opción alternativa de configurar Bootstrap es descargarlo a tu disco duroy emplear los archivos de forma local.
Las opciones de descarga se encuentran en exactamente el mismo sitio que los enlaces a la versión recóndita.
Aquí, asegúrate de obtener los ficheros CSS y JS compilados. No precisas los archivos fuente.
Una vez hecho esto, descomprime el archivo y copia su contenido en exactamente el mismo directorio que index.html.
Después de eso, puedes cargar el CSS de Bootstrap en su proyecto de la próxima manera:
Notarás que esto incluye la ruta del archivo en la que se encuentra el archivo de Bootstrap. En tu caso, asegúrate de que la ruta corresponde a tu configuración real.
Por ejemplo, los nombres de los directorios pueden diferir si has descargado una versión diferente de Bootstrap.
2.4) 3. Incluir jQuery
Para obtener la funcionalidad completa de Bootstrap, también necesitas cargar la biblioteca jQuery.
Aquí, también tienes la posibilidad de cargarlo remotamente o bien alojarlo localmente.
En el primer caso, encontrarás el enlace a la última versión de jQuery. Puedes usarlo para cargar la librería en tu página poniendo la línea de código de abajo inmediatamente antes de donde afirma </body> en tu página.
Alternativamente, puedes descargar jQuery, descomprimilo y colocarlo en la carpetita del proyecto. Entonces, inclúyelo en el mismo lugar de tu fichero de esta manera:
Una vez más, asegúrate de que la senda corresponde a su configuración.
2.5) 4. Cargar Bootstrap Javascript
El último paso para configurar Bootstrap es cargar la biblioteca JavaScript de Bootstrap.
Éstas biblioteca se incluye en la versión descargada de Bootstrapy también encontrarás enlaces a fuentes remotas en el mismo sitio que antes.
Sin embargo, lo vamos a cargar en un sitio diferente al de la hoja de estilo o style . En vez del encabezado, ve al pie de página, justo después de la llamada a jQuery.
Puedes llamarlo remotamente así:
O también de forma local como:
2.6) 5. Poniendo esto todo junto
Si ha seguido los pasos precedentes apropiadamente, debería acabar con un archivo como este para la solución remota:
Alternativamente, si estás hospedando Bootstrap localmente, tu plantilla de página debe parecerse al código de abajo:
Si eso es lo que tienes y has guardado tu trabajo, ya estás listo para pasar al siguiente paso.
Back to top3) Tutorial de Bootstrap Paso 3: Diseña tulanding page
Lo anterior fue, indudablemente, mucho trabajo de preparación. Sin embargo, no ha sito tan muy difícil, ¿verdad? Además, ahora comienza la diversión.
Por el momento, cuando navega a tu lugar de muestra, simplemente deberías ver una página en blanco. Es hora de cambiar eso.
3.1) 1. Añadir una barra de navegación
Lo primero que queremos hacer es añadir una barra de navegación en la parte superior de la página. Esto deja a tus visitantes moverse por tu sitio y descubrir el resto de tus páginas.
Para ello, utilizaremos la clase navbar.
Este es uno de los elementos por defecto de Bootstrap. Crea un elemento de navegación que responde de manera predeterminada y que se contraerá automáticamente en pantallas más pequeñas.
También ofrece soporte incorporado para agregar marcas, esquemas de color, espacios y otros componentes.
Lo usaremos como abajo y lo vamos a poner justo bajo la etiqueta <body>:
Algunas explicaciones sobre el código:
- navbar-expand-md:Esto indica en qué punto la barra de navegación se expande desde un icono vertical o bien de hamburguesa a una barra horizontal de tamaño completo. En un caso así, lo hemos configurado en pantallas medianas que, en Bootstrap, es cualquier cosa mayor que 768px.
- navbar-brand:Esto se usa para la marca de tu sitio. También puedes incluir un archivo de imagen o bien logotipo aquí.
- navbar-toggler:Denota el botón de conmutación para el menú colapsado. La pieza data-toggle=»collapse»define que esto se convertirá en un menú de hamburguesas, no en un menú desplegable, que es la otra opción. Es importante que definas un objetivo de datos con un identificador de CSS (definido por el signo #)y envolver un divcon exactamente el mismo nombre alrededor del elemento real de la barra de navegación.
- navbar-toggler-icon:Como probablemente puedes adivinar, esto crea el icono en el que los usuarios hacen click para abrir el menú en pantallas más pequeñas.
- navbar-nav:La clase para el factor de la lista <ul>que contiene los elementos del menú. Estos últimos se señalan con nav-itemy nav-link.
¿Por qué explico tanto esto?Porque ese es la meta de Bootstrap.
Tienes todos estos estándares que le dejan crear rápidamente elementos con algunas clases HTML y CSS. No es preciso escribir ningún CSS para proporcionar estilo, todo ya está configurado en Bootstrap.
Además, todo es móvil y responde desde el primer momento ¿Empiezas a ver lo útil que es esto?
Lo precedente es suficiente para añadir una barra de navegación a su sitio. No obstante, por el momento, todavía semeja muy poco, pues se ve así:
Eso es porque no tiene mucho estilo. Aunque es posible añadir colores por defecto(por servirnos de un ejemplo, dando a la barra de navegación una clase como bg-dark navbar-dark), en su sitio queremos añadir los nuestros.
3.2) 2. Incluir CSS personalizado
Afortunadamente, si deseas mudar el estilo predeterminado, no tienes que vadear una gran biblioteca de hojas de estilo y hacer los cambios a mano.
En cambio, al igual que con un tema hijo de WordPress, puedes añadir tus propios ficheros CSS que puedes emplear para sobreescribir el estilo existente.
Para ello, simplemente crea un archivo en blanco con su editor de texto y llámalo main.css.
Guárdalo, y luego añádelo a la sección principal de tu lugar Bootstrap así:
Este es el código para una hoja de estilo que radica en el directorio principal. Si decides colocar tu nombre dentro de la carpetita css, asegúrate de incluir la senda adecuada en el enlace.
Desde aquí, puedes agregar CSS personalizado a tu sitio. Por poner un ejemplo, para cambiar el estilo de la barra de navegación y sus elementos, puedes emplear marcas como esta:
Y aquí puedes ver el resultado:
Se ve mejor que ya antes, ¿no?
3.3) 3. Crear un Contenedor de Contenido de Página
Después de la barra de navegación, lo siguiente que quieres es un contenedor para el contenido de la página.
Esto es muy fácil en Bootstrap en tanto que todo lo que necesitas para esto es esto debajo de la etiqueta navbar:
Notas la clase container-fluid. Esta es otra de esas clases por defecto de Bootstrap. Aplicándolo al elemento div, se incorpora automáticamente un montón de CSS a él.
La parte de fluidse encarga de que el contenedor se estire a lo largo de todo el ancho de la pantalla. También está el contenedor, al que se le han aplicado anchos fijos, por lo que siempre y en todo momento habrá espacio a los dos lados de la pantalla.
Sin embargo, si ahora recargas la página, no verás nada(salvo que utilices las herramientas para desarrolladores). Esto es debido a que sólo has creado un elemento HTML vacío.
Esto empezará a mudar ahora.
3.4) 4. Incorporar una imagen de fondo y JavaScript personalizado
Como siguiente paso en este tutorial de Bootstrap, deseamos incluir una imagen de fondo a pantalla completa para el encabezado de nuestra página de aterrizaje o landing page .
Para ello, tendremos que usar algo de jQuerypara hacer que la imagen se extienda hasta el final de la pantalla.
Hazlo de igual modo que incluyes CSS personalizado. Primero, crea un fichero de texto con el nombre main.jsy colócalo dentro de la carpeta de tu sitio.
Luego, llámalo ya antes de la etiqueta de cierre </body> en index.html.
Después de eso, puedes copiar y pegar este pedazo de códigopara hacer que el elemento <header> se extienda durante toda la pantalla:
Entonces, lo único que queda es establecer una imagen de fondo. Puedes hacer esto así dentro de main.css:
Si colocas una imagen de tamaño suficiente en la ubicación detallada por la ruta anterior, obtendrás un resultado similar a éste:
3.5) 5. Agregar una sobreimpresión
Para que la imagen de fondo sea más muy elegante, también añadiremos una sobreimpresión. Para ello, crea otro elemento divdentro del que acabas de incluir.
Entonces, puedes añadir lo siguiente en tu fichero CSS personalizado:
Esto creará esta bonita sobreimpresión para la imagen que has introducido anteriormente:
3.6) 6. Incluir un título de página y un cuerpo de texto
Ahora, es probable que desees añadir un título en forma de encabezado más algún texto del cuerpo, a fin de que tus visitantes sepan de manera inmediata en qué lugar se encuentran se encuentran y qué pueden esperar de él.
Para crearlos, sencillamente añade este fragmento en el contenedor que has configurado en el último paso, debajo de la sobreimpresión:
Después de eso, agrega la próxima marcación a main.css:
Cuando lo hagas, la página de destino se verá así:
Está empezando a funcionar, ¿no?
3.7) 7. Crear un botón CTA
Ninguna página de aterrizaje o landing pageestá completa sin una llamada a la acción, la mayoría de las veces en forma de un botón. Por esa razón, sería un error no incluir cómo crear un botón de este tipo en este tutorial de Bootstrap.
Bootstrap ofrece muchas herramientas para crear botones de forma rápida y sencilla. Puedes localizar muchos ejemplos.
En este caso, añade la próxima marca justo bajo el contenido de la página en el contenedor:
Además de eso, añade este CSS a main.css:
Después de guardar y recargar, se verá así:
3.8) 8. Configurar una sección de 3 columnas
Ya estarás bastante satisfecho con la evolución de la página. No obstante, aún no hemos terminado.
A continuación, vamos a crear tres columnas debajo del contenido principalpara conseguir información auxiliar.
Esta es una especialidad de Bootstrap, ya que juega con su fortaleza: crear una rejilla.
Así se hace en este caso:
Lo primero que notarás es el elemento row o fila, que es necesario cuando se crean columnas para que actúen como un contenedor para la cuadrícula.
En cuanto a las columnas, todas tienen múltiples clases: col-lg-4, col-md-4y col-sm-12, señalando que se trata de columnso columnas y el tamaño que tendrán en las distintas pantallas.
Para entender esto, necesitas saber que, en una cuadrícula de Bootstrap, t odas las columnas de una fila siempre y en toda circunstancia suman el número 12.
Por lo tanto, darles las clases precedentes quiere decir que ocuparán una tercera parte de la pantalla en pantallas grandes y medianas (12 dividido por tres es 4), pero la pantalla completa en dispositivos pequeños (12 de 12 columnas). Tiene sentido, ¿no?
También notarás que hemos incluido imágenes y añadido la clase .image-fluida exactamente las mismas. Esto es para que respondan de forma que puedan escalar así como la pantalla en la que se ve la página.
Además de eso, tienes el próximo estilo incluido en el lugar habitual:
Cuando se agrega debajo del contenido principal y se guarda, se ve así:
Habrás observado que uno de los nuevos campos prosigue vacío. Esto es porque queremos añadirle un formulario de contacto.
Esta es una práctica muy normal en las páginas de destino para dejar que los visitantes se pongan en contacto.
Crear un formulario de contacto en Bootstrap es muy fácil:
En este instante, ya no debería tener que explicar la marcación para crear columnas. Esto es lo que significa el resto:
- form-group– Se emplea para envolver los campos de formulario.
- form-control– Denota campos de formulario como entradas, áreas de texto, etc.
Hay mucho más que puedes hacer con los formularios, puedes hallarlo en la documentación.
Sin embargo, para fines demostrativos, lo precedente es suficiente. Colócalo en la columna que queda vacía y luego añade este estilo en main.css:
Cuando lo hayas hecho, obtendrás un formulario como este:
3.9) 10. Crear un pie de página de 2 columnas
Estamos llegando al final del tutorial de Bootstrap. Lo último que debes añadir a tu página es una sección de pie de página con dos columnas.
A estas alturas, esto ya no debería ser un gran problema para ti:
Además del marcado habitual de la cuadrícula, esta sección resalta algunas posibilidades para modificar la tipografía con Bootstrap:
- text-uppercase– Texto en mayúscula
- font-weight-bold– Fuente en negrita
- text-center– Texto centrado
Además de lo anterior, puedes utilizar un estilo como el siguiente:
Esto resulta en un hermoso pie de página que se ve así:
3.10) 11. Añadir consultas de medios
La página ya está lista y es de forma plena adaptativa. Sin embargo, en la vista móvil del navegador, la sección superior aún no salide bien.
No te preocupes, puedes corregir esto fácilmente con una simple consulta de medios o bien media queries.
A menos que estés usando SASS para recopilar tu lugar Bootstrap, esto marcha de la misma forma que en otros casos, sólo hay que tener en cuenta los puntos de ruptura preestablecidos incluidos en el Bootstrap.
Como consecuencia, p ara corregir el inconveniente anterior, puedes simplemente incluir un fragmento de código como este:
Después de eso, todo es como debe ser:
3.11) 13. Poner todo en orden
Si has seguido el proceso, ahora deberías tener configurada una página muy afín a la que se muestra a continuación.
Se ve excelente, ¿no? Además, también marcha en móviles y es completamente adapatativo.
No está mal para unas pocas líneas de código, ¿verdad?
Con esto, tienes todo cuanto necesitas para crear una landing pagecon Bootstrap.
Back to top4) Conclusión
Bootstrap es un frameworko marco de trabajo para el desarrollo de código abierto y front-endque cualquiera puede usar de forma gratuita.
Te deja crear rápidamente prototipos de diseño, crear páginas web y, por norma general, empezar a trabajar.
Como has visto en este tutorial de Bootstrap para principiantes, sólo necesitas conocimientos básicos de HTML, CSS y ciertos jQuery opcionales. Si bien no es tan cómodo como usar Wordpress, Bootstrap sigue siendo una alternativa válida para crear un sitio web.
A estas alturas, bien sabes cómo instalar y configurar Bootstrap y sus componentes, crear una página de aterrizaje fácil que incluye algo de contenido básico y darle estilo.
Ahora puedes crear menús de navegación, establecer imágenes de fondo, incluir botones, columnas y formularios de contacto. Evidentemente, hay mucho más que aprender.
Gracias a este tutorial básico de Bootstrap, ya sabes lo bastante como para seguir adelante por ti mismo. Si deseas profundizar en este marco de trabajo, un buen punto de inicio es W3Schools.
Esperamos que te haya agradado este tutorial para principiantes y nos gustaría saber cómo pones en práctica tus conocimientos.
¿Tienes preguntas, comentarios, solicitudes?Háznoslo saber en la sección de comentarios a continuación.
Back to top
