¿Qué 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í tenéis una web en la que recopilan shortcodes de las funciones de bootstrap para ir abriendo boca: http://strappress.com/demo/shortcodes/
¿Que 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.
Algunos ejemplos de páginas diseñadas con bootstrap:
http://breezi.com/
http://stackideas.com/
http://www.iacquire.com/
http://www.audiomack.com/
¿Cómo empezar?
Antes de nada, si no disponéis de un hosting en el que hacer pruebas, os recomiendo instalaros un xAMPP, ya que bootstrap tira mucho de PHP y así trabajáis en local que es mucho más cómodo. Si tenéis alguna duda con el xampp podéis preguntarme por privado.
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 trabajéis sobre una distribución predefinida.
Para esta guía empezaremos a pelo para ir conociendo las características básicas de bootstrap, así que vamos a preparar nuestro proyecto. Creamos un arbol de carpetas igual que este en nuestro localhost:
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 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:
<!DOCTYPE html>
<html>
<head>
<title>Probando bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body class="container"> <h1>HOLA MediaVida</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>Comprobamos en la consola que no ha habido ningún error de carga de scripts y stylesheets (F12 en chrome) y ya tenemos todo lo que necesitamos para empezar a crear nuestra página con bootstrap.
IMPORTANTE: La clase "container" que se le agrega al body, es simplemente para centrar toda la página, aplicándole a toda la caja un max-width específico para cada dispositivo.
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:
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">@MediaVida</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Inicio</a></li>
<li><a href="#">Porno</a></li>
<li><a href="#">Fotos mías desnudo</a></li>
</ul>
</div>
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.
Submenús
Para crear un submenú recurrimos nuevamente a una clase ya establecida llamada "dropdown", y la aplicamos a nuestro nuevo objeto de lista <li>, y luego creamos los elementos del submenú con etiquetas <ul>, algo así:
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" >Submenu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Mas porno</a></li>
<li><a href="#">Mucho mas</a></li>
<li class="divider"></li>
<li><a href="#">Porno Gay</a></li>
</ul>
</li>
Carousel
Bootstrap incluye un slider JavaScript muy famoso llamado carousel.
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" (recomiendo imágenes con buena resolución, podéis mirar en www.freepik.es. Luego vamos al código y creamos una nueva caja(div) para nuestro slider, y agregamos este código que luego detallo:
<div id="myCarousel" class=" carousel slide">
<ol class=" carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/test.jpg" alt="">
<div class="carousel-caption">
<h1>Probando BOOTSTRAP</h1>
<p>IZQUIERDA</p>
</div>
</div>
<div class="item">
<img src="img/test.jpg" alt="">
<div class="carousel-caption">
<h1>Probando BOOTSTRAP</h1>
<p>DERECHA</p>
</div>
</div>
</div>
</div>
Como podéis ver cada elemento del slide será una vez más un elemento de una lista ordenada (<ol>). necesitamos crear tantos <li data-target="#myCarousel" data-slide-to="X"> </li> 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 <div class="carousel-caption"> 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, pero eso ya lo investigáis vosotros o me preguntáis por privado, sin problema.
Cuadrícula (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 una gozada, 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 sencillísima. 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:
<h1 class="text-center"> Probando BOOTSTRAP</h1>
<div class="row">
<div class="col-lg-3">3</div>
<div class="col-lg-6">6</div>
<div class="col-lg-3">3</div>
</div>
Ya tenemos 3 columnas establecidas, en los siguientes pasos las iremos rellenando una a una.
Formularios + MODAL
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:
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="control-label">User</label>
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="form-group">
<div class="checkbox">
<label><input type="checkbox"> Recordarme</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log In</button>
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Registrarse</a>
</div>
</form>
Con esto colocaremos el típico formulario de email+password 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:
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Formulario de registro</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Registrarme</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Salir</button>
</div>
</div>
</div>
</div>
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.
Imágenes + paginación
Bootstrap tiene unas clases específicas para las imágenes, con efectos de redondeo, sombras y sobretodo re-escalado que están bastante curiosas, Vamos a utilizar cualquier imagen que queramos para colocarla en la columna central aplicándole uno de estos estilos:
<img src="img/test2.jpg" class="img-thumbnail">
<ul class="pagination">
<li><a href="#">«</a>
<p><h5> <h3>En un lugar de la Mancha</h3>, de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,
adarga antigua, rocín flaco y galgo corredor.
Una olla de algo más vaca que carnero, salpicón
las más noches, duelos y quebrantos los sábados,
lentejas los viernes, algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda.
El resto della concluían sayo de velarte, calzas de velludo para
las fiestas con sus pantuflos de lo mismo, los días de entre semana
se honraba con su vellori de lo más fino. Tenía en su casa una ama
que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte,
y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera.
Frisaba la edad de nuestro hidalgo con los cincuenta años, era de complexión recia,
seco de carnes, enjuto de rostro; gran madrugador y amigo de la caza.</p>
</h5>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
La paginación también es sencillísima de aplicar como podéis ver en el ejemplo anterior, una vez más bootstrap estructura las páginas como listas (<li>). Con conocimientos de PHP podríais cargar los últimos 5 artículos de una BD en el primer <li>, los siguientes 5 en el siguiente, etc.
TABS:
Bootstrap tiene muchísimas pijadas que intentaré ir añadiendo con el tiempo, pero voy a usar un par de ellas simplemente para que veáis como se implementan. 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, una vez más xD
Dentro de nuestra columna de la derecha (el último <div class="col-lg-3">) añadiremos una lista no ordenada de elementos con 3 pestañas en este caso:
<ul class="nav nav-tabs">
<li><a href="#tab1" data-toggle="tab">tab1</a></li>
<li><a href="#tab2" data-toggle="tab">tab2</a></li>
<li><a href="#tab3" data-toggle="tab">tab3</a></li>
</ul>
Esta clase lo que hará será mostrarte algo así:
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:
<div class="tab-content">
<div class="tab-pane active" id="tab1">Texto tab 1</div>
<div class="tab-pane" id="tab2">Texto tab 2</div>
<div class="tab-pane" id="tab3">Texto tab 3</div>
</div>
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 derecha
Colores:
Templates
Webs con varios templates ya elaborados, tanto gratuitos como de pago, gracias a ju4n4k4.
http://bootswatch.com/
https://wrapbootstrap.com/
http://themeforest.net/collections/2712342-bootstrap-templates
PD: Es mi primer tutorial, así que acepto críticas espero que constructivas, iré ampliando con cositas cuando tenga tiempo y si os gusta 
