diseno-web-mini-03

Preparando Bootstrap – diseño web básico 3

Bootstrap: webs adaptativas a tu alcance

episodio 3 - Bootstrap

episodio 3 – Bootstrap

Bootstrap es el primer componente que vamos a incluir en nuestro proyecto, antes incluso de comenzar a trabajar en la página propiamente dicho.

El primer paso consiste en entrar en su página web oficial y descargar la versión que nos convenga. Actualmente, existen tres descargas diferentes: “Bootstrap”, “Source code” y “Sass”. De estas tres, os recomiendo que descarguéis la primera, ya que las otras dos se usan principalmente para modificar el contenido de Bootstrap mediante pre-procesadores de CSS y otras herramientas similares.

También es posible incluir Bootstrap simplemente incluyendo enlaces a servidores que contengan la herramienta (como por ejemplo CDN). No os recomiendo esta opción, ya que así siempre tendréis que acceder a un servidor de terceros y descargar los archivos, y eso sucederá cada vez que vuestra página cargue (a no ser que incluyáis algún tipo de caché, pero aun así). Es mejor tener los archivos en vuestro propio servidor, ya que así la carga será más rápida y fiable, puesto que no dependeréis de factores externos.

En cualquier caso, una vez descargado el archivo comprimido y extraído el contenido, veréis que dentro de la carpeta hay a su vez otras tres carpetas: “css”, “js” y “fonts”. Antes de hacer nada con estas carpetas, vamos a abrir NetBeans y a modificar un poco nuestro proyecto.

Dentro de la raíz o carpeta principal de nuestro proyecto (en el ejemplo del vídeo se llama “blog”) crearemos algunas carpetas. Las llamaremos igual que las que encontramos en Bootstrap: “css”, “js” y “fonts”. Esto no es algo que le pertenezca a ningún framework o herramienta en concreto, son nombres comunes que se usan por convención. Otros que usaremos en próximos episodios para más carpetas serían “img” (para las imágenes), “app” (para los archivos PHP) o “log” (para los informes de uso y errores).

Una vez creadas estas tres carpetas, vamos a copiar los archivos necesarios desde la carpeta de Bootstrap hacia las carpetas de nuestro proyecto. El contenido de la carpeta “fonts” se puede copiar íntegramente, ya que son diferentes formatos del mismo archivo, necesarios para lograr la compatibilidad de la fuente con todos los navegadores (por si tenéis curiosidad, la fuente “Glyphicons” es una colección de iconos web y de aplicaciones, útiles para darle algo más de estilo a nuestra página).

De la carpeta “css”, sólo os recomiendo que copiéis el archivo “bootstrap.min.css”, ya que es el archivo de estilo principal del framework. El “min” significa que el archivo está minificado, es decir, que se han eliminado todos los saltos de línea, espacios y tabulaciones para hacer que ocupe menos espacio.

En la carpeta “js” haremos lo mismo, sólo tomaremos el archivo “bootstrap.min.js”, donde el “min” tiene exactamente el mismo significado que en el punto anterior.

Adicionalmente, para que algunas utilidades de Bootstrap puedan funcionar, necesitaremos el framework de JavaScript jQuery. En la página de descargas, elegid el link de la versión comprimida de producción. No importa mucho si cogéis la versión 1 o 2, ya que ambas hacen casi lo mismo, con la salvedad de que la 1 es compatible con Internet Explorer 6, 7 y 8, mientras que la versión 2 no es compatible con IE, pero sí tiene más utilidades.

El archivo resultante javascript minificado de jQuery también lo colocaremos en la carpeta “js” de nuestro proyecto.

Por último, para que todo funcione, es necesario incluir en los archivos HTML los links pertinentes hacia los archivos CSS y JS, lo cual está demostrado en el vídeo.

¿Te ha gustado? ¡Colabora en Patreon!

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *