Frameworks

Tutorial Bootstrap 3: Introducción e instalación

Si estás metido en el mundo del desarrollo Web, habrás oído hablar de Bootstrap, para los que no, Bootstrap es un framework basado en HTML y CSS, fue creado por Twitter y lo liberó en 2012, desde entonces ha ganado muchos adeptos, hasta el nivel de contar con la mayor comunidad de Github del mundo.

Frameworks Desarrollo Web

Angel Robledano

Product Manager

Lectura 3 minutos

Publicado el 27 de mayo de 2015

Tabla de contenidos

Si estás metido en el mundo del desarrollo Web, habrás oído hablar de Bootstrap , para los que no, Bootstrap es un framework basado en HTML y CSS, fue creado por Twitter y lo liberó en 2012, desde entonces ha ganado muchos adeptos, hasta el nivel de contar con la mayor comunidad de Github del mundo.

Este framework nos ayuda a agilizar la creación del interfaz de nuestra página web . Con la particularidad, que usando Bootstrap, nuestro sitio estará adaptado a la pantalla del dispositivos con el que accedemos, ya sea un ordenador, tablet, smartphone, televisión.... Esto significa que tendremos una Web responsive o adaptativa, y desde hace pocos meses, es fundamental de cara al posicionamiento en Google.

Además de agilizar la creación de nuestra Web, con Bootstap conseguiremos crear un diseño limpio, intuitivo, usable y de poco peso, por lo que la carga de nuestra web será muy rápida. Es muy cómodo, porque muchas de las funcionalidades que necesitaremos ya están desarrolladas, y si no, tienes acceso a una gran cantidad de documentación en varios idiomas y una comunidad que dará respuestas a todas tus dudas.

Para seguir este tutorial no hace falta tener grandes conocimientos en programación, con unas noticias básicas de HTML5 y CSS3, conseguiremos crear nuestra primera web estática o dinámica compatible con todos los navegadores modernos.

Aprende a desarrollar webs optimizadas

Comienza 15 días gratis en OpenWebinars y accede cursos, talleres y laboratorios prácticos de JavaScript, React, Angular, HTML, CSS y más.

Registrarme ahora

Por qué usar Bootstrap

Tendremos una Web responsive, se vera bien en todos los dispositivos y ayudará al posicionamiento en buscadores.
Cómodo, tendremos gran cantidad de funcionalidades creadas.
La velocidad de carga de la web es rápida y también ayuda al posicionamiento.
Compatibilidad con la mayoría de navegadores.
En constante desarrollo, tiene una gran comunidad detrás y el framework va mejorando cada vez más.

Cómo instalar Bootstrap

Para poder instalar iremos a la web oficial y entramos en Download, ahí tendremos tres opciones de descarga.

Imagen 0 en Tutorial Bootstrap 3: Introducción e instalación

1. Descargar el código compilado , es lo ideal para comenzar a trabajar con Bootstrap.

2. Descargar código fuente , contiene todo los archivos originales de Bootstrap, para poder usarlo necesitas compilarlo.

3. Descargar código fuente en Sass , ésta versión del código fuente esta convertida a Sass para facilitar la implementación con aplicaciones como Ruby,

Si no queremos tener en nuestro servidor los archivos de Bootstrap, podemos utilizar el CDN disponible para ello. Para el que no lo sepa, un CDN es un conjunto de servidores ubicados en diferentes puntos de una red que contienen copias locales de ciertos contenidos, en este caso, los archivos de Bootstrap. Con esto conseguimos mejorar la carga de nuestra web.

En este tutorial nos decantaremos por la opción 1, una vez que lo hemos descargado, descomprimimos el framework en la carpeta de nuestro nuevo proyecto, la estructura de la carpeta debería de quedar así:

Carpeta del Proyecto/ 
├── css/ 
│   ├── bootstrap.css 
│   ├── bootstrap.min.css 
│   ├── bootstrap-theme.css 
│   └── bootstrap-theme.min.css 
├── js/ 
│   ├── bootstrap.js 
│   └── bootstrap.min.js 
└── fonts/ 
    ├── glyphicons-halflings-regular.eot 
    ├── glyphicons-halflings-regular.svg 
    ├── glyphicons-halflings-regular.ttf 
    └── glyphicons-halflings-regular.woff

Esta es la estructura más básica de Bootstrap, los archivos acabados en *.min.css o *.min.js son versiones comprimidas.

Si queréis ver el tipo de web que podemos crear utilizando este framework, en la web oficial hay una galería de webs creadas con Bootstrap.

Nuestro primer ejemplo con Bootstrap

Estupendo, ya lo tenemos en nuestro ordenador, ahora vamos a ver cómo empezar a usarlo. Primero escribimos una estructura básica de HTML5.

 <!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
  </head> 
<body> 
</body> 
</html>

Perfecto, ya tenemos nuestra web, ahora llamamos a Bootstrap para que podamos hacer uso de sus funcionalidades

<!DOCTYPE html> 
<html lang="es"> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!–Con esto garantizamos que se vea bien en dispositivos móviles–> 
    <title>Mi primer proyecto con Booststrap</title> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!–Llamamos al archivo CSS –> 
  </head> 
  <body> 
    <h1>¡Hola mundo!</h1> 
 	<p> Hola a todos desde OpenWebinars.net, mi primera web con Bootsrap ;(</p>	 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!– Importante llamar antes a jQuery para que funcione bootstrap.min.js   –> 
    <script src="js/bootstrap.min.js"></script> <!– Llamamos al JavaScript de Bootstrap –> 
  </body> 
</html>

Como podéis observar la etiqueta <script></script> está colocada al final del documento HTML, se pone al final para que la carga de la Web sea mucho más rápida. Recomiendo que cuando queramos meter un script lo hagamos siempre al final, aunque podemos meterlo en el <head></head>, pero no se recomienda.

Construye interfaces de usuarios personalizadas y atractivas

Lleva la formación de tu equipo al siguiente nivel con cursos, talleres y laboratorios prácticos de JavaScript, React, Angular, HTML, CSS y más.

Solicitar más información

Usando el CDN

Si nos hemos decantado al final por utilizar el CDN, quedaría así:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!–Con esto garantizamos que se vea bien en dispositivos móviles–>
    <title>Mi primer proyecto con Booststrap</title>
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen"> <!–Llamamos al archivo CSS a través de CDN –>
  </head>
  <body>
    <h1>¡Hola mundo!</h1>
 	<p> Hola a todos desde OpenWebinars.net, mi primera web con Bootsrap ;(</p>	
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!– Importante llamar antes a jQuery para que funcione bootstrap.min.js   –> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <!– Llamamos al JavaScript  a través de CDN –>
  </body>
</html>

Compartir este post