Un poco de Bootstrap

Soy de los que piensan que en el proceso del desarrollo de software nos encontramos con 2 partes muy diferenciadas, la vista, o parte gráfica, y la lógica, lo que hace el programa. Yo prefiero la parte lógica, me parece más interesante, aunque no le quito ningún mérito a los diseñadores, realizan una labor que yo, por lo pronto ni domino ni tengo la suficiente paciencia para hacerlo.

El problema viene cuando se piensa que un desarrollador de software es también diseñador gráfico, y viceversa. No suele ser común, aunque como las meigas, haberlas haylas. Lo más normal es que te encarguen un proyecto y tengas que encargarte de todo el proceso, tanto lógico como visual.

Por mi parte, cuando se trata de desarrollo web, hago uso de Bootstrap, desarrollada en sus inicios por Twitter, como podemos encontrar en wikipedia:

Es un framework o conjunto de herramientas de Código abierto para 
diseño de sitios y aplicaciones web. Contiene plantillas de diseño 
con tipografía, formularios, botones, cuadros, menús de navegación 
y otros elementos de diseño basado en HTML y CSS, así como, 
extensiones de JavaScript opcionales adicionales.

La característica de Bootstrap que más destacaría es la orientación al "Diseño Responsivo", es decir, la facilidad para desarrollar la interfaz gráfica para diferentes dispositivos, tales como pantallas de pcs, tablets o móviles.

Podemos usarla en cualquier entorno: JavaEE, PHP, AngularJS, etc.

Para empezar a usar este framework tan solo debemos ir a la web http://getbootstrap.com/

Tan solo debemos pinchar en "Download Bootstrap", apareciendo la siguiente web:

Para facilitar la instalación y uso, dejaremos la instalación en solo dos posibilidades:

La primera es pinchar sobre el botón "Download Bootstrap", de tal forma que se descarga un fichero zip que podemos descomprimir en nuestro proyecto.

El contenido del mismo son una serie de carpetas y ficheros para el uso de este framework:

En el caso de no querer descargar dicho archivo podemos hacer uso de los CDNCon tan solo copiar y pegar estas etiquetas ya podremos usar este framework, debido a que cuando carga la página de nuestro proyecto se descargan los archivos necesarios para un correcto funcionamiento.

Aquí podemos ver como debe quedar el contenido de nuestro fichero htm si usamos CDNl: 

Como datos importantes, en la línea 7 vemos que hemos pegado el enlace para la hoja de estilos de Bootstrap que se hace a través de CDN.

También importante como en las líneas 15 y 16 se introducen los scripts para javascript, primero de jquery y después de Bootstrap, resaltando que tiene que ser en este orden, de lo contrario podría no funcionar.

Llegados a este punto es necesario indicar como trata bootstrap el contenido para adecuarlo a los distintos dispositivos. Se usa un sistema de Rejilla, el cual puede contener 12 columnas o espacios, por lo tanto, podemos tener elementos, ya sean secciones, contenedores, divs, etc; que usen esos espacios o los que necesiten. Además se especifican que cantidad de espacios o tamaños ocupará ese elemento para cada dispositivo.

En el caso de que nuestro diseño necesite en total más de esos 12 espacios, se encargará de mostrarlo en la siguiente línea o fila de forma automática, aunque habrá que tener cuidado con el resultado, debido a que podría no ser el deseado.

Por ejemplo, imaginemos que queremos poner 6 imágenes con un título debajo de cada una de ellas. En el caso de dispositivos grandes, como un monitor de pc o portátil, queremos que se muestren 3 imágenes por fila, o lo que es lo mismo, que de 12 espacios que usa bootstrap, cada imagen ocupará 4 espacios.

Para una táblet queremos que se muestren 2 por línea, o lo que es lo mismo cada imagen use 6 espacios de los 12.

Y finalmente para móvil solo se mostrará una imagen, debido a que la anchura de estos dispositivos pocas veces nos permitirá poner más elementos en cada fila o línea.

Podemos encontrar más información al respecto en la documentación de bootstrap.

Para nuestro ejemplo debemos descargar una imágen que ubicaremos en nuestro proyecto, posteriormente, dentro del body insertamos el siguiente contenido:

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 text-center">
      <img src="images/001.png" class="img-responsive">
      <h3 class="text-heading">Título</h3>
      <h4 class="text-subtitle-heading">Subtitulo</h4>
    </div>
    <div class="col-sm-6 col-md-4 text-left">
      <img src="images/001.png" class="img-responsive">
      <h3 class="text-heading">Título</h3>
      <h4 class="text-subtitle-heading">Subtitulo</h4>
    </div>
    <div class="col-sm-6 col-md-4 text-right">
      <img src="images/001.png" class="img-responsive">
      <h3 class="text-heading">Título</h3>
      <h4 class="text-subtitle-heading">Subtitulo</h4>
    </div>
    <div class="col-sm-6 col-md-4 text-center">
      <img src="images/001.png" class="img-responsive">
      <h3 class="text-heading">Título</h3>
      <h4 class="text-subtitle-heading">Subtitulo</h4>
    </div>
    <div class="col-sm-6 col-md-4 text-center">
      <img src="images/001.png" class="img-responsive">
      <h3 class="text-heading">Título</h3>
      <h4 class="text-subtitle-heading">Subtitulo</h4>
    </div>
    <div class="col-sm-6 col-md-4 text-center">
      <img src="images/001.png" class="img-responsive">
      <h3 class="text-heading">Título</h3>
      <h4 class="text-subtitle-heading">Subtitulo</h4>
    </div>
  </div>
</div>

Como podemos ver, el código se estructura de la siguiente forma: un div de la clase container, será el contenedor donde se integrarán los demás elementos. Esta clase container está ya definida por Bootstrap, por lo tanto ya tiene unas propiedades asignadas.

Después vemos otro div de la clase row, indicando que ahí va a haber una fila que contendrá diferentes columnas. También definida por Bootstrap.

Posteriormente vemos 6 elementos con el siguiente código:

<div class="col-sm-6 col-md-4 text-center">
  <img src="images/001.png" class="img-responsive">
  <h3 class="text-heading">Título</h3>
  <h4 class="text-subtitle-heading">Subtitulo</h4>
</div>

En este div vemos que se usan diferentes clases, el más fácil de identificar es text-center, el cual indica que el texto que contenga estará centrado. Lo realmente importante está en las clases col-sm-6 y col-md-4. Quiere decir que se trata de un tratamiento con columnas, el sm o el md hacen referencia al tipo de dispositivo, sm para tablet y md para pantallas de pc a partir de 992 píxeles. Los números del final nos indican la cantidad de espacios que va a usar ese elemento.

Para aclarar las cosas, col-md-4: para dispositivos de más de 992 píxeles, cada elemento que contenga usará 4 espacios de la fila. Esto nos facilitará poder usar 3 elementos en los 12 espacios de cada fila (4 espacios * 3 elementos = 12 espacios).

Para col-sm-6: dispositivos a partir de 768 píxeles, cada elemento que contenga usará 6 espacios, por lo tanto nos mostrará por fila 2 elementos (6 espacios * 2 elementos = 12 espacios).

Por último podemos indicar que en la etiqueta de la imagen se usa la clase img-responsive, de tal forma que se tratarán las imágenes de forma responsiva, con lo que aumentarán o disminuirán su tamaño para ajustarse al dispositivo especificado.

Aquí podemos ver como se verá en pantallas de pcs: 

Ahora en táblets: 

Por último como se vería en un dispositivo móvil: Podemos apreciar como cambia de forma automática si cambiamos el tamaño de la pantalla que se muestra. Esto nos da una idea de la facilidad y rapidez con la que podemos desarrollar un diseño responsive sin necesidad, en principio, de tocar ficheros CSS, aunque obviamente si queremos un mayor grado de personalización sí será necesario usar Hojas de Estilos definida por nosotros.

Por último mostrar la facilidad de introducir una tabla, este sería el resultado: El código usado es el siguiente:

<div class="container">
   <div class="row">
      <table class="table">
         <thead>
            <th>Nombre</th>
            <th>Apellidos</th>
            <th>Edad</th>
            <th>Ciudad</th>
         </thead>
         <tbody>
            <tr>
                <td>José</td>
                <td>Pérez</td>
                <td>23</td>
                <td>Madrid</td>
            </tr>
            <tr>
                <td>María</td>
                <td>Fernández</td>
                <td>55</td>
                <td>Málaga</td>
            </tr>
            <tr>
                <td>Antonio</td>
                <td>Luque</td>
                <td>44</td>
                <td>Sevilla</td>
            </tr>
            <tr>
                <td>Alfonso</td>
                <td>Sánchez</td>
                <td>24</td>
                <td>Valladolid</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

El uso de las tablas es exactamente la misma, lo único que hay que indicar es que se usan las clases container y row para acotar el espacio que usará la tabla. Y en la misma tabla hacemos uso de la clase table, la cual ya nos da el formato que podemos apreciar en la imagen. Podemos ver más características que de las tablas en Bootstrap en su documentación.

Para no alargar demasiado este post, solo indicar que a través de Bootstrap podemos añadir Barras de Navegación, Formularios y demás elementos que podemos ver en cualquier web actual.

Como último dato, decir que la documentación oficial viene en inglés, aunque en librosweb.es, podemos encontrar la misma documentación, traducida al castellano, a excepción de la última parte, Plugins de Javascript, que todavía no ha sido traducida.