¿Qué es Bootstrap?
Se trata de un framework o entorno de trabajo, que permite crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualiza. Esta técnica de diseño y desarrollo se conoce como "responsive design" o diseño adaptativo.
¿Porqué usar Bootstrap?
Si nuestro sitio web posee un "responsive design", se visualizará correctamente en todos los dispositivos y ayudará al posicionamiento en buscadores.
Además es cómodo, la velocidad de carga de la web es rápida, ayuda al posicionamiento, tiene compatibilidad con la mayoría de los navegadores, está en constante desarrollo, tiene una gran comunidad detrás y el framework va mejorando cada vez más.
Como otras ventajas, permite crear interfaces web con CSS y JavaScript.
El inconveniente es que Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS3, pero es compatible con la mayoría de los navegadores web.
Creación de una página web con Bootstrap:
1. En la página web de Bootstrap, getbootstrap.com, pulsamos en el botón "Download Bootstrap".
2. Se descargará una carpeta con tres carpetas en su interior. Después seleccionamos el texto de la parte inferior, que se muestra en la imagen, y lo copiamos en el bloc de notas o programa que va a generar el archivo .html.
3. Pulsamos en la pestaña "Ejemplos", situada en la columna derecha de la ventana de descarga.
4. En esta ventana se muestran las plantillas predefinidas de boostrap. Seleccionamos la que más nos guste
5. Al abrir la plantilla, hacemos clic derecho y seleccionamos "Guardar como...". Guardamos la página web en formato .html en la carpeta descargada, donde están las carpetas css, js y fonts.
6. Ahora ya podemos editar nuestra página web. Para modificar los elementos, primero debemos localizar el código correspondiente a ese elemento. Hacemos clic en el botón derecho, pulsando sobre el elemento, en la plantilla que nos muestra la web de bootstrap. Seleccionamos "Inspeccionar elemento", y nos aparece una ventana con el código html de la plantilla.
En azul, resaltado, aparece el código correspondiente al elemento seleccionado.
Este método es muy útil cuando se tienen pocos conocimientos en HTML y es muy dificil diferenciar los elementos dentro del código.
7. Copiamos el código que hemos localizado, correspondiente al elemento, y en el editor de texto o blog de notas en el que tenemos abierta nuestra plantilla .html descargada, hacemos clic en buscar y pegamos el código html.
El buscador nos resalta donde está el código del elemento que queremos modificar.
Para modificar en este caso, la imagen dentro del círculo, cambiamos la ruta asignada de imagen que tiene ese elemento de nuestra página.
Es importante situar los elementos que se quieren incluir en la página, dentro de la carpeta de la página web, que nos hemos descargado de bootstrap. Crear una carpeta para las imágenes, multimedia, etc., junto a las otras tres carpetas que se han descargado, y el archivo .html de la página.
Todo esto es necesario para que la página funcione correctamente, y al subir la página al servidor, todos los archivos se encuentren correctamente dentro de la carpeta de la página.
Modificamos la ruta de la imagen, y le asignamos una nueva ruta a una imagen de la carpeta que hemos creado.
Cómo podemos observar, ahora la imagen seleccionada aparece dentro del elemento que habíamos seleccionado. De igual manera, podemos modificar todos los elementos existentes en la página hasta configurar una página a nuestro gusto.
