¿Cómo usar Bootstrap? Desde cero

Bootstrap es el framework CSS con más auge en estos tiempos, (un frameworkes un set de herramientas que nos ayuda en el proceso de desarrollo de páginas web), para mí, y para muchos desarrolladores, usar bootstrap es el “A B C” de nuestros días, es algo sencillo, y hasta automático, descargar, descomprimir, enlazar y usar.

Pero no es tan sencillo para todos, no es “a piece of cake“, por lo que es este post:

¿Cómo usar bootstrap?

Existen distintas formas de usar bootstrap:

  • Descargar CSS
  • Descargar código fuente LESS
  • Descargar versión SASS
  • Utilizar un CDN
  • Instalarlo con bower, npm y composer

Sí, son muchas opciones, aquí explicaré la que a mí parecer es la forma más sencilla que es usar la versión compilada de bootstrap.

Abrimos http://getbootstrap.com/ en el navegador, y nos encontramos con esto:

Bootstrap landing page

 

Hacemos click en el botón Download Bootstrap, esto nos llevará a:

Download Bootstrap

En esta imagen podemos ver lo que comenté anteriormente, muchos caminos, todos con el mismo destino, ignoremos todo y enfoquémonos en lo que queremos, USAR Boostrap, por lo que hacemos click en el botón “Download Bootstrap”, acá encontraremos los archivos CSS y Javascript necesarios. (Si conoces SAAS o LESS puedes usar los otros enlaces)

Download Bootstrap

Dependiendo de nuestra velocidad de conexión a internet la descarga terminará en segundos o minutos, según sea el caso.

Luego de descargado, nos encontraremos con un archivo .zip, el cual debemos descomprimir, y dentro de el debemos tener algo como:

Archivos descomprimidos

Veamos qué contiene la carpeta css:

Contenido carpeta /css

Hay muchos archivos en esta carpeta, pero nosotros solo usaremos estos dos:

  • bootstrap.css
  • bootstrap.min.css

bootstrap.css es el achivo principal que usaremos en nuestros archivos HTML, que nos ahorrará escribir un montón de código CSS, el archivobootstrap.min.css es la versión minificada del anterior, funcionalmente ambos archivos hacen lo mismo, pero se recomienda utilizar esta última cuando el sitio esté en producción ya que es un poco menos pesada.

En un próximo post hablaré un poco más sobre el contenido de los directorios fonts y js. Si desean saber cuál es la estructura y qué contienen pueden seguir el enlace: http://getbootstrap.com/getting-started/#whats-included.

Ok, ya tenemos Bootstrap en nuestro computador ¿qué debemos hacer ahora?

Tomamos estos archivos y copiamos (CTRL + C) y pegamos (Ctrl + V) en nuestro proyecto.

Copiando archivos

Pegando archivos

Ahora creo un nuevo archivo index.html dentro de esta carpeta.

Este archivo index tendrá la estructura básica de un archivo html, y además añadiré un poco de código html sencillo:

<!-- index.html -->

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>Bootstrap desde cero</title>
</head>  
<body>  
    <h1>Mi nombre es Ofelia</h1>
    <h2>¿Quién eres tú?</h2>
    <p>Yo! Yo he tenido tantos nombres, nombres viejos que solo pueden pronunciar el viento y los árboles. Yo soy el monte, y el bosque y la tierra. Soy soy un fauno, vuestro mas humilde servidor, alteza… </p>
    <div>
        <button>¡He visto un hada!</button>
        <button>¿Tú crees en las hadas?</button>
    </div>
</body>  
</html>  

Si abrimos esto en el navegador:

HTML sin bootstrap

el resultado no es nada llamativo (acá les dejo un codepen con el código), todos los estilos que vemos son implementados directamente por el navegador, porque nosotros no hemos especificado ningún estilo propio, ahora veamos que sucede si agregamos bootstrap.

Para esto añadiremos la etiqueta link para enlazar el archivo .css

<!-- index.html -->

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>Bootstrap desde cero</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>  
<body>  
    ...
</body>  
</html>  

Ahora nuestra página luce de esta manera:

HTML con bootstrap enlazado

La diferencia no es mucha, podemos ver un cambio en las fuentes, pero además de eso todo sigue igual. Añadamos algunos elementos a nuestro código HTML, y veremos cómo sin escribir una sola línea de CSS, esta misma estructura tomará otro aspecto.

Lo primero que haremos es centrar nuestro contenido, para esto utilizaremos la clase “container” de bootstrap, pero hay que ser cuidadosos en donde usarla, por lo que vamos a envolver todo nuestro código en un div, de esta manera todo el contenido estará centrado.

<!-- index.html -->

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>Bootstrap desde cero</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>  
<body>  
    <div class="container">
        <h1>Mi nombre es Ofelia</h1>
        <h2>¿Quién eres tú?</h2>
        <p>Yo! Yo he tenido tantos nombres, nombres viejos que solo pueden pronunciar el viento y los árboles. Yo soy el monte, y el bosque y la tierra. Soy soy un fauno, vuestro mas humilde servidor, alteza… </p>
        <div>
            <button>¡He visto un hada!</button>
            <button>¿Tú crees en las hadas?</button>
        </div>
    </div>
</body>  
</html>  

HTML con bootstrap enlazado y centrado

Hmmm!!!! todavía no es algo muy llamativo, pero sólo con añadir una clase logramos que la página se centrara, y si hacemos un resize del navegador podremos notar que nuestra página se adapta automáticamente, esto es debido a que bootstrap es responsive, por lo que no hay que definir nada más, sólo con añadir la clase container es suficiente.

Ahora añadiré algunos clases a las etiquetas internas:

  • text-center: Centra el texto dentro de la etiqueta.
  • lead: Aumenta el tamaño de fuente de un párrafo, efecto de resaltado.
  • btn: Asigna estilos básicos de un botón
  • btn-primary: Estilo de botón azul
  • btn-danger: Botón rojo

Las clases “btn-primary” y “btn-danger” deben estar acompañadas de la clase “btn” para su correcto funcionamiento

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>Bootstrap desde cero</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>  
<body>  
    <div class="container">
        <h1 class="text-center">Mi nombre es Ofelia</h1>
        <h2 class="text-center">¿Quién eres tú?</h2>
        <p class="text-center lead">Yo! Yo he tenido tantos nombres, nombres viejos que solo pueden pronunciar el viento y los árboles. Yo soy el monte, y el bosque y la tierra. Soy soy un fauno, vuestro mas humilde servidor, alteza… </p>
        <div class="text-center">
            <button class="btn btn-primary">¡He visto un hada!</button>
            <button class="btn btn-danger">¿Tú crees en las hadas?</button>
        </div>
    </div>
</body>  
</html>

Ahora veamos el resultado.

HTML con bootstrap

Voilà!!! Nuestra página luce completamente distinta, con sólo añadir algunas clases, sin escribir una línea de código CSS, tal como lo mencionamos antes.

Esto es sólo un abreboca de lo que es posible hacer con bootstrap, ahondaremos en otras clases en siguientes artículos. Les dejo los enlaces con el código, en codepen.io y github.com

Por Blanca Pérez

 

 

Deja un comentario

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