#2 – Configurando nuestro sitio con Bootstrap 3

Desde su versión 3 Bootstrap se ha convertido en uno de los mejores framework CSS para el diseño de paginas web, en cuanto a la creación de sitios que responden a todo tipo de dispositivos de forma correcta. Si te propones a crear un sitio web responsive sin tener mucho conocimiento en este tema, con Twitter Bootstrap mobile-first lo podrás conseguir sin mucho esfuerzo.

Lo primero que tenemos que hacer es descargar el framework de la pagina oficial en www.getbootstrap.com, lo hacemos donde dice descargar Bootstrap, vale la pena mencionar que en el menú superior podemos personalizar nuestra descarga con diferentes componentes para incluir o excluir, elemento JavaScript y diferentes utilidades , también podemos customizar los plugins jQuery según nuestra necesidad y las variables LESS para definir colores y tamaños en nuestro CSS final. Pero bueno este tema ya es mucho mas avanzado y lo veremos mucho mas adelante. Por ahora solo lo vamos a descargar donde dice Download Bootstrap.

descargar-bootstrap

Este botón de descarga nos llevara a una pagina donde debemos de elegir el primer botón Bootstrap.

Este nos descargara una archivo comprimido titulado Bootstrap y en numero de la versión en este caso es la versión 3.1.1 – dist.
Una vez descomprimido tendremos las carpetas con el material necesario para poder comenzar a trabajar con bootstrap 3.

archivos-bootstrap-3.1

Ahora, tenemos tres directorios CSS/JS/FONTS, vamos a echar un vistazo a cada uno.

CSS/ aquí tenemos 4 archivos .css. En primer lugar tenemos bootstrap.css que es la que debemos de vincular en nuestros proyectos o en su defecto la versión minificada o comprimida bootstrap.min.css, que son la mismo la única diferencia es que en la primera podemos editar y hacer cambios fácilmente y en la versión minified también lo podemos hacer pero no será tan fácil su lectura.  También tenemos bootsrap.theme y bootstrap.theme.min, igual que el caso anterior son los mismo archivos solo que uno el .min es la versión reducida para usar, y este archivo básicamente contiene un montón de estilo prefabricados para botones, alertas, estilos para paneles, barras de navegación etc.. el uso de este archivo es opcional.

En la carpeta Fonts/ tenemos 4 fuentes, son exactamente las mismas solo cambia el formato que se adecuan a los diferentes navegadores, con estas fuentes glyphicon Bootstrap nos da la opción de utilizar fuentes en lugar de imágenes planas para mostrar decenas de iconos básicos y genéricos que son utilizados en miles de sitios web, con esto ganamos que el sitio sea mucho mas rápido al cargar y que consuma menos ancho de banda, y además los fonts icons son responsive  y de tamaños variables. Estos iconos se llaman Glyphicons en Honor a la empresa que dono las fuentes a twitter Bootstrap para su uso no comercial.

en Js/ tenemos bootstrap.js y la versión minificada bootstrap.min.js. Este archivo contiene todas las librerías JavaScript, las rutinas que hacen que Bootstrap sea mas dinámico  e interactivo,  aquí encontramos lo que da funcionalidad a los carruseles, menús despegables, búsquedas interactivas y otras funcionalidades interesantes.

Vinculando los archivos Bootstrap a nuestro proyecto.

Después de conocer un poco la estructura de archivos que vienen con el sistema Bootstrap, seguiremos adelante con nuestro proyecto donde aparte de aprender a usar correctamente Bootstrap, crearemos un proyecto totalmente estructurado y profesional.

Antes cabe menionar que estos archivos los podemos vincular de dos formas, la primera seria vincular los archivos localmente, descargando manualmente la carpeta desde Bootstrap, y la segunda es vincularlos desde los servidores de Bootstrap por medio del método de CDN utilizando:

Y comenzamos con un archivo básico HTML5.

estructura-basica-bootstrap-3-tutorial

[dropcap]1[/dropcap] A este documento le agregamos la meta etiqueta viewport dentro del <head> de nuestro documento HTML5, esta etiqueta es una de las mas importantes cuando creamos plantillas responsives ya que por medio de ella ajustamos nuestro sitio al tamaño viewport del dispositivo en cuestión.

[dropcap]2[/dropcap] vinculamos el archivo .css, puede ser bootstrap.css o la versión minificada bootstrap.min.css, recordemos que son el mismo archivo, la diferencia es el tamaño y lectura de los documentos, ya que en la versión mínima se quitaron las tabulaciones y saltos de líneas.
También vinculamos nuestro archivo de CSS en blanco donde escribiremos nuestro propio código CSS, en este caso lo llamare estilos.css

[dropcap]3[/dropcap] Ahora vincularemos los archivos tipo JavaScript, vinculo el archivo que esta en la carpeta js/ la versión minificada bootstrap.min.js, y también necesito utilizar la librería jQuery, que la puedo descargar y agregarla dentro de la carpeta js/ o vincularla desde los servidores de jQuery.com, que es lo que voy a hacer.
Y también quiero agregar, o vincular a esta carpeta js/ un archivo llamado respond.js. Este es un JavaScript que está diseñado para ayudar a las versiones antiguas de IE (6-8) que no entienden HTML5 como un lenguajes semántico y otras varias incompatibilidades con Internet Explorer. consigo la versión mínima en esta dirección: https://github.com/scottjehl/Respond/blob/master/dest/respond.min.js  támbien podemos copiar la versión editable y entendible, pero ya esto es de elección, el siguiente paso es copiar el codigo respond.js, creo un nuevo documento .js pegar  ahí el código, guardar el documento yo lo guardare como responsive.js y lo vincularlo al documento HTML5 y listo. Esto es lo que tenemos hasta el momento:

Ya tenemos toda la estructura lista para empezar a armar nuestro sitio web con Bootstrap 3.1.

Nos vemos en el siguiente tutorial de Bootstrap Versión 3.

About the author

9 Respuestas

  1. GianfrancoUC dice:

    Hola, vuelvo después de un tiempo a preguntarles un poco lo mismo sobre el uso de los “Glyphicons”. La verdad no se que puedo estar realizando mal para no poderlos visualizar sin la ayuda del CDN, lo cual obviamente me obliga a tener la conexión a internet para avanzar en mis diseños. Agradecería sus comentarios.

    • Johanso dice:

      Hola Gianfranco, muy raro que en local no funcionen, creería que están mal linkeados los archivos css la carpeta font y las fuentes Glyphicons en el HTML, si quieres envíame un pantallazo del problema

  2. twittstrap dice:

    Oi lá,
    Convido você a visitar http://Twittstrap.com
    O número um atrativo para todas as suas necessidades de bootstrap
    Twittstrap, agrupando todas as suas necessidades de bootstrap em um só lugar. Nós estamos começando com modelos premium, escolhidos a dedo entre os melhores mercados ao redor, sites showcase Bootstrap para acompanhar as tendências e tem uma lista de recursos valiosos de bootstrap. Tem sugestões ou ideias

  3. Gianfranco dice:

    Si, enlazarlos desde el mismo CDN me ha resuelto el problema. Muchas gracias a ambos por su ayuda. @Johanso tambien voy a probar tu alternativa para sacarme de dudas. Mil Gracias =)

  4. Noé dice:

    muy buen articulo, estaré al pendiente de los nuevos artículos relacionados con este framework

  5. Gianfranco dice:

    Hola, muy bueno el articulo. Tengo una consulta sobre los glyphicon ya que estos pueden visualizarse muy bien en el index.html cuando lo ejecuto desde mi localhost pero que cuando lo subo a un servicio por ejemplo de Hostinger para mostrarselo a mi cliente solo se visualiza como caracteres que la maquina o navegador no reconoce, debo enlazar algunos de los archivos incluidos en font al css?

    • Johanso dice:

      Hola, no de hecho el bootstrap.css vincula las fuentes glyphicons por medio la regla @font-face, solo se debe de llamar en el html ejem: “” y es todo. Un error muy común es mover los directorios fonts o css y se pierde la ruta del vinculo y no encuentra los iconos. Otra puede ser la versión del navegador o que navegador estas utilizando. Pero muy raro, si funciona offline debe funcionar online.

    • Manu dice:

      Hola Gianfranco, como dice Johanso, ya los archivos font vienen vinculados al css, Si gustas puedes enviar la URL de la web, eso es problema de vinculación, prueba vinculando los archivos bootstrap desde el mismo CDN http://www.bootstrapcdn.com/.
      Saludos.

    • Johanso dice:

      Si persiste el problema de no mostrar la fuentes en el hosting, prueba pegando esto en el .htaccess que se encuentra en el directorio raiz del sitio.

      Esto forzara de alguna forma a algunos navegadores que se niegen a mostrar este tipo de fuentes, para mostrarlas.