Table of contents
¿Que es Bootstrap?
Bootstrap es un framework JS+HTML5+CSS3, desarrollado por twitter que permite crear interfaces web muy vistosas, y con diseño responsivo, es decir, conseguirás que tu página se adapte perfectamente a cualquier dispositivo en la que la abras.
¿Por qué Bootstrap?
Aunque bootstrap ofrece una gama de posibilidades bastante amplia, permitiéndote desarrollar interfaces web bastante elaboradas y complejas, destaca porque sus diseños son simples, limpios y sobretodo intuitivos, haciéndolos poco pesados lo cual reduce considerablemente el tiempo de carga y la adaptación a todos los dispositivos.
Además de esto, tienes muchísimas opciones customizables por defecto, que son simplemente perfectas para el diseño web. Botones, tablas, formularios, tipografías…
Otra gran ventaja es su sistema de cuadrículas (grid), el cual te facilitará muchísimo la distribución de tu página web (1 columna, 2 columnas, 3 columnas, etc…)
Aquí tienes una web en la que recopilan shortcodes de las funciones de bootstrap para ir abriendo boca.
¿Qué necesito?
Lo ideal es tener algo de conocimiento de PHP, HTML5, JS, y CSS3 si vas a diseñar una web simple, y de mySQLi si vas a trabajar con una web dinámica en la que necesitemos integración de usuarios e interacción con estos. Pero, intentaré hacer una guía básica de como diseñar un frontal web paso a paso para los que estéis empezando en esos lenguajes.
De todas formas, cualquier persona con dos manos puede seguir este tutorial, sin necesidad de conocer profundamente como programar html,css,php, etc.
Páginas de ejemplo basadas en Bootstrap
http://breezi.com/
http://stackideas.com/
http://www.iacquire.com/
http://www.audiomack.com/
¿Cómo empezar?
Antes de nada, si no cuentas con un hosting en el que hacer pruebas, te recomiendo instalar WampServer, ya que bootstrap necesita de un servidor que cuente con PHP. Instalando WampServer te genera un servidor de manera local que es mucho más cómodo.
Nos dirigimos a su web: http://getbootstrap.com/ y descargamos el paquete de bootstrap.
NOTA: También puedes bajar una plantilla prediseñada de estas: http://examples.getbootstrap.com/ y puedas trabajar sobre una distribución predefinida.
Código fuente del proyecto
Si quieres puedes descargar todo el código de este tutorial en este link.
Comenzando con la estructura del proyecto
Creamos las carpetas y copiamos los archivos del zip (bootstrap.css, bootstrap.js ) dentro de ellas.
NOTA: Las versiones .min.css son idénticas a las que no tienen el .min, lo que sucede es que estas están editadas en una sola línea para facilitar el tiempo de carga, mi recomendación es trabajar con la versión sin el .min. y no tocar nada de esta para guiarnos en caso de duda que será más fácil de encontrar.
Una vez tengamos esto preparado, tendremos que crear nuestro INDEX. Creamos un fichero index.php en la carpeta raíz (bootstrap), y copiamos el siguiente código en el:
<!-- Bootstrap --> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!-- [if lt IE 9]>-->
Hello, world!
Navbar o barra de navegación
Bootstrap tiene una gran cantidad de clases ya preparadas para que tu simplemente tengas que utilizarlas y la única dificultad es conocer esas clases o saber buscar en la documentación de la página como se llama. Para crear una barra de navegación vistosa, simplemente tenemos que crear una caja (div), y aplicarle una clase predefinida en el .css de bootstrap con el nombre de navbar:
Para este caso, hemos utilizado “navbar-inverse”, simplemente por el estilo, hay otros predefinidos, y siempre nos podemos crear nuestro estilo propio de colores y demás, recomiendo no tocar el bootstrap.css sino crear un .css aparte con nuestras modificaciones.
Submenus
Para crear un submenú recurrimos nuevamente a una clase ya establecida llamada “dropdown”, y la aplicamos a nuestro nuevo objeto de lista
- , y luego creamos los elementos del submenú con etiquetas
- , algo así:
- Submenu
- Item1
Carrousel
Bootstrap incluye un slider JavaScript muy llamativo llamado carrousel. Puedes agregar cualquier otro slider JavaScript, pero para este tutorial vamos a utilizar el propio de bootstrap que para algo lo trae. Buscamos una o dos imágenes que queramos colocar en el slider principal y las guardamos en una nueva carpeta con nombre “img”. Luego vamos al código y creamos una nueva caja(div) para nuestro slider, y agregamos este código que luego detallo:
Probando BOOTSTRAP
IZQUIERDA
Probando BOOTSTRAP
DERECHA
Como puedes ver cada elemento del slide será una vez más un elemento de una lista ordenada (necesitamos crear tantos como cantidad de imágenes queramos meter en nuestro slider. Y luego detallaremos cada item creando un div con clase item por cada imagen nueva del slider. La clase “item active” es la clase que se mostrará al cargar la página, obviamente no puede haber dos clases “item active”, ya que la que esté más abajo en el código machacará la anterior. Dentro de la caja tendremos la posibilidad de escribir texto si lo deseásemos dentro del slider. Como ya dije anteriormente, hay muchísimos sliders en internet gratuitos o de pago mejores que este.
Cuadricula (Grid)
A continuación vamos a decidir que distribución va a tener nuestra página, tenemos que tener en cuenta cuantas columnas vamos a utilizar en nuestra página, y de que tamaño las queremos. Bootstrap incluye un sistema responsivo de hasta 12 columnas, que viene a ser que si una columna no cabe en el tamaño de tu pantalla de movil, esta automáticamente pasará a estar debajo, siguiendo un orden de izquierda a derecha, esto es super interesante, ya que sin programar NADA, tenemos automáticamente un tipo de página para pc, otro para tablet y otro para smartphone.
Podemos decidir el tamaño de nuestras columnas de manera simple. Para este ejemplo vamos a crear primero un título de la página sin tamaño definido, y le aplicamos la clase, también de bootstrap “text-center” para centrarla, y luego debajo 3 columnas de tamaño 3+6+3. De esta forma:
Cuadricula de rejillas
363
Ya tenemos 3 columnas establecidas, en los siguientes pasos las iremos rellenando una a una.
Formularios y ventanas modales
Vamos a crear un formulario aprovechándonos de una función JS que utiliza bootstrap que se llama “modal”, crearemos un botón en la columna lateral izquierda, que sea algo así como un botón para registrar usuarios o suscribirse a newsletter. Para ello, nos vamos al primer col-lg-3 y colocamos el siguiente código:
Con esto colocaremos el típico formulario de correo con contraseña en la columna de la izquierda con 2 botones, uno de login y otro de registrarse. Al botón de registrarse le hemos añadido un link a una función modal. La función “modal”, lo que hace es simplemente un popup de un código específico dejando en segundo plano nuestra web y mostrando el formulario de registro:
NOTA: Este código es indiferente donde lo coloquemos dentro del body, no tiene porque ir necesariamente debajo del div del form. El formulario lo colocaremos en los puntos suspensivos con los campos que necesitemos.
Tabs
Vamos a utilizar un sistema de información dividida en pestañas en la columna de la izquierda de nuestra página. Para ello nos apoyaremos una vez más en una clase predefinida de Bootstrap, la cual se ayuda de JavaScript aunque también está implementada en la libreria js de bootstrap así que solo tenemos que copiar y pegar. Dentro de nuestra columna de la derecha (el último
añadiremos una lista no ordenada de elementos con 3 pestañas en este caso:
Ahora, para editar el contenido de cada una de las pestañas y que solo se muestre al cambiar, tenemos que crear un div con clase “tab-content” y dentro añadiremos lo que queramos, podemos personalizar esta columna de la izquierda para lo que prefiramos:
Texto tab 1Texto tab 2Texto tab 3
Al igual que el Modal, es indiferente donde coloquemos esta caja dentro del body.
Clases de ayuda
Antes utilizamos la clase center-text para centrar un texto, pues bien, hay una serie de clases para la colocación de los elementos que necesitemos:
Alineación:
.pull-left : Alinea a la izquierda
.pull-right: Alinea a la derecha
.clearfix: Resetea el atributo float de cualquier elemento.
text-left: Texto a la izquierda
text-center: Centra texto
text-right: Texto a la derechaTe gustaría aprender más de Bootstrap 3?
Te esperamos en el curso online Desarrollo Web con Bootstrap 3
