Parte II – Adentrándonos más en Bootstrap

Sistema de Rejilla en Bootstrap.

http://getbootstrap.com/css/#grid-options

El ancho de la pantalla se divide en 12 columnas por defecto. Estas 12 dejan entre ellas un espacio de 30px (15 a cada lado), por cada lado hay un margen de 15px del contenedor.

El contenedor de las columnas se centra en pantalla, es fluido, se adapta al tamaño de la ventana y en su interior alberga filas. Las filas agrupan columnas.

Para que las columnas funcionen adecuadamente tienen que ir dentro de las filas y todas ellas dentro de un contenedor.

A esas columnas es posible aplicarle las clases(prefijo) que definen la media querie empleada.

Por defecto es xs de mobile first.

Una regla básica es que la suma de las columnas existentes en una fila no sumen más de 12. Y no aplicar estilos que existen entre las columnas para evitar saltos.

Sigamos …

Ejemplo básico

<div class=”container”>
                <div class=”row”>
                      <div class=”col-xs-6”>una de 6 </div>
                      <div class=”col-xs-3”> una de 3</div>
                      <div class=”col-xs-3”>una de 3</div>
                </div>
</div>

Vemos en 1 fila, con 12 columnas en estilo mobile first. Esto crea 3 columnas de 6, 3,3. La primera el doble de grande que el resto. Pero esto todavía no es responsive.

Ahora un elemento esencial es poder sobreescribir estilos mediante:

<div class=”container”>
                <div class=”row”>
                      <div class=”col-xs-6 mi-estilo-columna”>una de 6 </div>
                      <div class=”col-xs-3 mi-estilo-columna”>una de 3</div>
                      <div class=”col-xs-3 mi-estilo-columna”>una de 3</div>
                 </div>
</div>

¿Pero cómo aplico responsive con los col?

Observa este ejemplo que difiere del anterior

<div class=”container”>
                <div class=”row”>
                      <div class=”col-xs-6  col-sm-2 mi-estilo-columna”>1 </div>
                      <div class=”col-xs-3 col-sm-6 mi-estilo-columna”>2</div>
                      <div class=”col-xs-3 col-sm-4 mi-estilo-columna”>3</div>
                 </div>
</div>

Podremos observar que ahora se aplicará cada estilo en función del tamaño.

La que medía 6 en Tablet medirá 2, todo ello en función de la resolución aplicada.

IMPORTANTE: Bootstrap mira la clase más a la derecha para aplicar los estilos tipo col-

En función de la resolución. Con un mismo HTML gestionaremos un mismo contenido para diferentes escenarios. Podemos ir anidando col a la derecha para diferentes resoluciones.

Ejemplo para 4 tipos de tamaño:

<div class=”container”>

                <div class=”row”>

                      <div class=”col-xs-6 col-sm-2 col-md-3 col-lg-1 mi-estilo-columna”>1 </div>

                      <div class=”col-xs-3 col-sm-6 col-md-5 col-lg-8 mi-estilo-columna”>2</div>

                      <div class=”col-xs-3 col-sm-4 col-m3-4 col-lg-3 mi-estilo-columna”>3</div>

</div>

</div>

IMPORTANTE: Observa cómo voy cuadrando las columnas a 12 para cada escenario de arriba abajo. En función de la resolución siempre cogerá  el estilo más a la derecha. S

Otro ejemplo, para hace que en un móvil todas las columnas funcionen una debajo de otra:

<div class=”container”>

                <div class=”row”>

                      <div class=”col-xs-12 col-sm-2 col-md-3 col-lg-1 mi-estilo-columna”>1 </div>

                      <div class=”col-xs-12 col-sm-6 col-md-5 col-lg-8 mi-estilo-columna”>2</div>

                      <div class=”col-xs-12 col-sm-4 col-m3-4 col-lg-3 mi-estilo-columna”>3</div>

</div>

</div>

Para dejar espacios con Offset  

El prefijo offset de un col- funciona por la izquierda y es en número de columnas por la izquierda que esa columna deja libres.

<div class=”col-xs-12 col-xs-offset-4 col-sm-2 col-md-3 col-lg-1 mi-estilo-columna”>1 </div>

Para gestionar el orden con Push y Pull – Intercambio de columnas

Se realiza mediante push y pull. Intercambiar columnas en función del contexto. Y evitar que no sobrepasen el contenedor.

<div class=”col-xs-12 col-sm-4 col-sm-push-8 mi-estilo-columna”>DERECHA</div>

<div class=”col-xs-12 col-sm-4 col-sm-pull-8 mi-estilo-columna”>IZQUIERDA</div>

Gestionar una fila mayor en altura.

<div class=”clearfix visible-xs”> </div>

El clearfix tiene efecto a partir del tamaño xs siendo visible. Para respetar el alto de las columnas. Rompe el float.

Anidamiento de rejillas

En Bootstrap es posible anidar rejillas. Dentro de una columna insertar una nueva fila, y dentro de esa fila insertar columnas.

IMPORTANTE:

No es necesario maquetar todo en bootstrap, podemos realizar cosas en rejilla, pero otro tipo de cuestiones se puede solucionar con nuestras propias CSS personalizadas sin usar GRID. Todo dependiendo de la situación que necesitemos.

Ejemplo:

<div class=”container”>

                <div class=”row”>

                                <div class=”col-xs-12”>Dejamos solo una columna (12 grids)<div>

</div>

</div>

Ahora podríamos incorporar dentro del div class col-xs-12 nuestros propios diseños a medida.

O crear un contenedor para todo y eliminar los márgenes que bootstrap deja para todos los entornos excepto para móviles.

El contenedor completo quedaría fuera de class container

<div id=”mi-full-width” style=”width:100%;”>

<div class=”container”>

                <div class=”row”>

                                <div class=”col-xs-12”>Dejamos solo una columna (12 grids)<div>

</div>

</div>

</div>

Bootstrap ofrece también estilos para etiquetas HTML y clases especiales.

Muchas de estas características por defecto se pueden sobreescribir con CSS.

Por ejemplo los H1 tienen unos estilos determinados, pero si no nos gusta podemos redefinirlo.  Además posee un texto secundario más pequeño para h1

Ejemplo: <h1>El Titulo<small>Texto más pequeño </small></h1>

Para destacar un párrafo:

<p class=”lead”>Párrafo destacado acto para responsive</p>

Otro ejemplo curioso para resaltar una combinación de teclas.

<kbd>Control+A </kbd>

Otro aspecto interesante de Bootstrap son las listas.

Las listas son elementos muy utilizados en HTML. Bootstrap emplea muchos estilos para las listas. Las <ol> y <ul> poseen un comportamiento estándar. Pero posee clases para otro tipo de listas.

Ejemplo: .list-unstyled , elimina indicador.

.list-inline, listas en línea, ejemplo: <ol class=”list-inline”> </ol>

.dl-horizontal, listas de descripción tanto vertical como horizontal. <dl><dd></dd></dl>

Tablas en Bootstrap

La clase es table. Esta clase nos permite definir la tabla de serie bootstrap.

Podremos modificar algunos elementos:

.table-bordered, .table-condensed, .table-striped

Ejemplo:  <table class=”table table-striped”> </table>

Además de estos modificadores podemos emplear otros efectos:

Ejemplo:  <table class=”table table-over”> </table>

Además para las filas:

.danger,.warning,.info,.success,.active

Ejemplos:

class=”text-active bg-active”

class=”text-success bg-success”

class=”text-danger bg-danger

….

Además la clase table-responsible como contenedor a una tabla nos permite crearla responsive.

Ejemplo:

<div class=”table-responsive”>

<table class=”table”> … </table>

</div>

Formularios en Bootstrap

Permite definir nuevos  y eficaces layouts así como sus comportamientos en diferentes modos responsive.

Elementos disponibles

<div class=”form-group”> </div> <!—permite crear grupos para cada elemento del formulario

Ejemplo input:

<div class=”form-group>

<label for=”email”> Correo</label>

<input id=”correo” type=”text” class=”form-control”>

</div>

Ejemplo checkbox

<div class=”checkbox”>

<label>

<input type=”checkbox” id=”elemento-a” value=”a”> A

</label>

</div>

Elemento select

<select class=”form-control”>

<option>primera opción </option>

<option>segunda opción </option>

….

</select>

Elemento radio

<div class=”radio”>

<label>

<input type=”radio” name=”onumero” id=”onumero” value=”1”>

</div>

La mayoría de los elementos del formulario tendrán la class “form-control” y el tipo de control.

Por defecto todos los campos del formulario ocupan 12 grids, es decir 1 sola columna por cada control del formulario.

Si colocamos en el formulario:

<form class=”form-inline” action=”*.php”>

<!—Automáticamente deja todos los campos en línea

Para realizar saltos entre campos podemos utilizar la clase clearfix

Ejemplo: <span class=”clearfix” </span>

Los layouts o diseños  de rejilla pueden ser aplicados a los formularios. Podremos separar cada campo en filas row para aplicar responsive en función del tamaño o resolución de pantalla.

Al alto de los campos puede ser ajustado con las class de ayuda.

Ejemplo: <input id=”mialto” type=”text” class”form-control input-lg”>

Respecto a las validaciones, bootstrap nos ofrece una serie de clases para realizar estas comprobaciones.

Ejemplos:

Para desactivar un campo

<input id=”nombre” class=”form-control” disabled>

Además podemos mostrar una ayuda

<span class=”help-block”> Ayuda debajo del input</span>

Para ver si esta correcto: class=”form-group has-success” , has-error, has-warning, has-info

Además podemos añadir un icono: has-feedback y debajo del input un span con el icono a mostrar.

Ejemplo para mostrar un ok

<div class=”form-group has-success has-feedback”>

                <label for=”username” class=”control-label”> Nombre </label>            

                <input id=”username” type=”text” class=”form-control”>

                <span class=”glyphicon glyphicon-ok form-control-feedback> </span

</div>

Para crear botones, mediante la class btn

<button class=”btn” >Mi botón </button>

Se pueden solapar más

<button class=”btn btn-primary”> Mi botón </button>

Otras pueden ser btn-info, btn-danger, etc…

Para las imágenes

Bootstrap proporciona una clase para las imágenes para gestionar el responsive que es:

class=”img-responsive”

Además ofrece otros estilos especiales:

class=”img-rounded”

class=”img-circle”

class=”img-thumbnail”

En la tercera parte veremos los componentes y algunos conceptos más avanzados y Consideraciones sobre bootstrap en editores CMS como WordPress.