Buscar
alojamiento wordpress

 

alojamiento digital ocean

¿Usas el cloud? Consigue $100 gratis para 2 meses en Digital Ocean

Colabora con nosotros

Deja un comentario o comparte el artículo que más te guste

Contacta con nosotros para disponer de más información.

Introducción a Bootstrap

   Destacado

imagen bootstrap

 

En este articulo hacemos una introducción a Bootstrap.

Antes de entrar en detalle con el tutorial de Bootstrap vamos a dar unas pinceladas de la composición en el diseño web.
Por razones culturales que ya conocemos, leemos de izquierda a derecha y de arriba a abajo, así pues ese es el esquema general de la web a partir del cual tenemos que distribuir la información.
Es recomendable posicionar el logo o la marca en la parte superior izquierda de la pantalla.

En el caso de los menús de navegación, se pueden ubicar horizontalmente o verticalmente, en la parte superior, o en la parte izquierda.
El contenido principal se ubica debajo del menú superior, o a la derecha del menú lateral.

El contenido secundario, debería ser más pequeño y ubicado en el lateral. 
Ahí tiene cabida el contenido extra, anuncios, etc... Aunque también se podría poner debajo del contenido principal en forma de tres bloques en una fila.

Una cosa importante es ubicar bien la direccionalidad que nos sugieren las personas u objetos en las fotos. Si ponemos imágenes de personas, su postura tiene que hacernos mirar al contenido, no hacia fuera de la página.

Y por último, debajo de todo, ubicaremos el pie de página, donde el usuario puede encontrar enlaces directos a ciertas páginas de la web.

Bootstrap es un framework que nos ayudará a realizar el diseño de un sitio web de un modo más fácil y más rápido.
Al mismo tiempo nos proporcionará herramientas para construir una web responsive, esto es, una web que se pueda usar tanto en un ordenador como en un dispositivo móvil, con la mejor experiencia de usuario posible.

En Internet podremos encontrar multitud de templates de blogger y templates de bootstrap, incluso de templates con bootstrap para blogger.
Al final del artículo hemos puesto un enlace para descagar un template de blogger que funciona con bootstrap.

El contenido se suele organizar en una rejilla de filas y columnas. 
Habitualmente se ubica el contenido en un bloque de 12 columnas, 2 bloques de 6 columnas, 3 bloques de 4 columnas, 4 bloques de 3 columnas, etc...


También es importante dejar suficiente espacio en blanco entre elementos de la página para no dar la sensación de apiñamiento y ofrecer comodidad al usuario a la hora de consumir el contenido.

Para empezar tenemos que descargar las librerías de Boostrap v.3.3.7.
Actualmente ya están trabajando en una versión 4.x, pero nosotros vamos a utilizar la versión 3.3.7.

Una vez tengamos descargado el fichero lo tenemos que descomprimir en una carpeta. Necesitaremos los ficheros que hay dentro de la carpeta "dist", que son "css", y "js".


Primero creamos una carpeta donde pondremos los ficheros del proyecto, y empezamos con una página html sencilla:

Añadimos en la sección del <header>:

<link href= 'css/bootstrap.min.css' rel= 'stylesheet' >


y antes de la etiqueta </body> añadimos:

<script  src= 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' ></script>
<script  src= 'js/bootstrap.min.js' ></script>


jquery es otro framework de Javascript opcional, pero nos puede servir para realizar algunas otras funcionalidades.

La clase css que podemos utilizar por defecto para dar formato y posicionar el contenido es:

container que envuelve el contenido en un ancho fijo y actualiza los márgenes basado en el actual tamaño de la ventana del navegador.

Nota: esta clase no cambia la fuente de la letra del contenido.

La otra clase que podemos usar para envolver el contenido es:

container-fluid si queremos que el contenido se estire a lo largo de toda la ventana del navegador.

Así pues ponemos dentro del <body>:

<div class= "container" >contenido</div>


Rejillas


Tal como hemos comentado, la filosofía de Bootstrap se basa en distribuir el contenido en columnas y filas.
Bootstrap nos dará hasta 12 columnas para distribuir el contenido a lo largo de la pantalla.

Por ejemplo un diseño típico sería:

  • una cabecera que puede ocupar las 12 columnas
  • dos bloques que pueden ocupar 6 columnas cada uno
  • un pie de página con tres bloques que puede ocupar 4 columnas cada uno.
Como vemos todos los números son múltiples exactos de 12. 
Vamos a empezar a escribir los estilos: 

Para la cabecera podemos tener una clase col-md-12. 
Para los dos bloques centrales podemos poner una clase col-md-6. 
Y para los tres bloques del pie de página podemos poner una clase col-md-4.

<div class= "col-md-12" >Cabecera</div>
<div class= "col-md-6" >Bloque 1</div>
<div class= "col-md-6" >Bloque 2</div>
<div class= "col-md-4" >Pie 1</div>
<div class= "col-md-4" >Pie 2</div>
<div class= "col-md-4" >Pie 3</div> 



Pero una vez puesto cada div, como podemos saber donde empieza y donde acaba cada línea horizontal? Y cada zona? Para eso existe la clase row, que define una fila en la cual podemos meter dentro los bloques con las clases col-md-*

Así pues distinguimos 3 zonas de row; una para la cabecera, otra para los dos bloques centrales y otra para los 3 bloques del pie de página. 

Nota:  las columnas han de sumar 12 en cada row 

<div class= "row" >
   <div class= "col-md-12" >Cabecera</div> 
</div>
<div class= "row" >
   <div class= "col-md-6" >Bloque 1</div> <div class= "col-md-6" >Bloque 2</div>
</div>
<div class= "row" >
   <div class= "col-md-4" >Pie 1</div>
   <div class= "col-md-4" >Pie 2</div>
   <div class= "col-md-4" >Pie 3</div>
</div>

Otro diseño típico es un bloque de 9 columnas junto a un bloque de 3 columnas, es lo que conocemos como los "sidebars" de los blogs, habitualmente a la derecha aunque alguno podemos encontrar a la izquierda. 

Si queremos añadir columnas vacías de relleno a la izquierda, podemos añadir las clase 'col-md-3 col-md-offset-1'. En este caso seguiría ocupando 4 columnas (3 + 1).

Qué pasa si navegamos en el móvil? Resulta que las clases md-* no están pensadas para el móvil, sino para un ordenador de escritorio (de unos 1000px o más de ancho), por eso todo el contenido se esparciría por la pantalla del móvil.

Para eso se definen clases diferentes para cada dispositivo.
Para "tablets" existen las clases col-sm-* que llega a unos 768px de ancho. 
Para "móviles" tenemos que usar las clases col-xs-*

Se pueden poner así dos tipos de clases para que el elemento de contenido se muestre en función del dispositivo: móviles, tablets, portátiles o ordenadores. 

Por ejemplo:  <div class= 'col-md-12 col-sm-6 col-xs-2' >   
Pero tener en cuenta, que desde 'extra pequeño (col-xs)'  se propaga hasta el tamaño más grande, así que no haría falta poner: 'col-md-2 col-sm-2 col-xs-2'. 

Incluso hay una clase para resoluciones más grandes que es col-lg-* y corresponde a 1200px o más de ancho.

Pero qué ocurre si tenemos una imagen de una cabecera que ocupa muchos píxeles y la queremos ocultar para tablets o móviles? 
Para ello podemos usar las clases hidden-sm y hidden-xs que esconden ese contenido para esas resoluciones (sm y xs).  Y a la inversa, si queremos que sólo se muestre un contenido para una resolución concreta existen las clases: visible-md y visible-lg,  por si tuviéramos una imagen de alta resolución muy grande. 

Nota: 'clearfix' para extra small hace clear:left

 

Tipografía


Aquí podríamos hablar largo y tendido, pues se trata de una rama del diseño gráfico con entidad propia.
Vamos a comentar brevemente que es una disciplina que se encarga de definir el aspecto de la fuente, su tamaño, sus estilos, y sus iconos para dar una intención y un diseño a un contenido concreto.

Por defecto Bootstrap usa un font-size de 14px.

Podemos usar la clase lead para destacar algo, por ejemplo una frase.
La clase 'row text-center' sirve para centrar el texto en toda esa fila, así como 'text-justify, text-right, text-nowrap, text-left' que sirven para justificar, alinear a la derecha, no saltar de línea, alinear  a la izquierda, respectivamente.

Bootstrap viene con un conjunto de iconos también. Para los que ya conocen Font-Awesome, la sintaxis es muy similiar.

<i class= "glyphicon glyphicon-envelope"></i>

(dibuja un sobre)  bootstrap glyphicon envelope

Para listas <ul>, tenemos la clase list-unstyled que elimina los puntitos y los alinea.
Es algo típico que se usa por ejemplo en los enlaces de los pies de página.
La clase list-inline por ejemplo los muestra horizontalmente uno al lado del otro.

 

Botones y pozos

La clase well pinta un pozo con un fondo gris alrededor de un contenido, well-lg añade más padding al pozo, aunque debemos decir que la well-md no existe como tal.

Para los botones tenemos la clase btn, que añade un fondo, padding, y 'btn btn-lg' xs, sm, que son para definir varios tamaños de los botones.

La clase 'btn-default btn-primary' añade colores además, un fondo azul para el botón primario.
Luego hay diferentes estilos de botones: btn-success, btn-info, btn-danger, btn-warning cada uno con colores diferentes.

botones bootstrap

Navegación


Estas clases no se usan con el sistema de grids (row, col, etc.).
Algo bastante habitual es poner la cabecera también con un link para que al pinchar sobre él nos lleve siempre al 'home' o a la página principal.
Para eso podemos usar la clase navbar-brand.
Es un buen sitio también para poner el logo o la marca.

Para los menús partimos de una lista <ul> con varios links <a> y les aplicamos estilos posteriormente.

Se puede aplicar la clase 'nav nav-pills' para distribuirlo horizontalmente en forma de pastillas.
O la clase nav-tabs para aplicar estilos como pestañas.
O la clase navbar-nav para aplicar estilos horizontales sin pastillas, y añadir un efecto "on hover".

La clase navbar-right alinea los enlaces hacia la derecha.
 
<ul class= 'nav navbar-nav navbar-right' > 
Para el div container podemos usar 'container navbar navbar-default' que aplica colores y padding en toda la cabecera, el navbar-inverse que sería el inverso, en fondo negro, para temas web con colores oscuros.
Pero si mezclamos nav con container, nos centrará todo en la página, a lo mejor queremos destacar el menú a lo largo de toda la pantalla por lo tanto vamos a desacoplarlo:
<div class= 'navbar navbar-default' >
<div class= 'container' >
--contenido--
</div>
</div>
	

Tenemos un par de opciones más para los menús:
navbar-fixed-top que deja el menú fijo en el top aunque hagamos scroll (la parte superior).
navbar-static-top   que no lo deja fijo.
y lo mismo para el bottom (la parte inferior).

navbar bootstrap

 

Funciones de javascript

Adicionalmente Bootstrap también viene con librerías de Javascript para modelar el comportamiento de ciertos elementos de la página. Por ejemplo podemos colapsar paneles o bloques, y crear menús desplegables hacia abajo, que es lo que se llama "dropdown". 
 

Collapse

 
Para navbar tenemos collapse y navbar-collapse que esconde el menú para dispositivos móviles,  aunque para colapsar paneles también sirve.
Para ello tendremos que añadir un botón encima:
<button type= 'button' >activar navegación</button> 

Nota: si añadimos sr-only solo se mostrará para screen-readers

Luego añadimos:
<button type= 'button' class= 'navbar-toggle' >activar navegacion</button>
<span class= 'icon-bar' ></span>
<span class= 'icon-bar' ></span>
<span class= 'icon-bar' ></span> 

que añade las 3 rallitas típicas del menú para móviles.
Ahora definimos el comportamiento:
Para quitar o poner una clase se puede hacer con data-toggle. Y para definir el div de destino se hace con data-target.
 
<button type= 'button' class= 'navbar-toggle' data-toggle= 'collapse' data-target= '#id del div' > 
 
Por cierto la clase caret añade el triángulo pequeñito que se suele significar: desplegar más opciones.
 
<span class= 'caret' ></span> 
 

Dropdown menús

 

Para definir listas desplegables hacia abajo tenemos las clases dropdown-menu que se aplica a un <ul>.

<ul class= 'dropdown-menu' >
	<li><a href= 'opciona.html' >opcion a</a></li>
	<li><a href= 'opcionb.html' >opcion b</a></li>
	<li><a href= 'opcionc.html' >opcion c</a></li>
</ul>
	

Hay que añadir un par de atributos como el caso anterior:
el data-toggle='dropdown' y data-target="id del div destino".

<a class= 'dropdown-toggle' data-target= '#' data-toggle= 'dropdown' href= '#' >Sobre mi <span class= 'caret' /></a> 

Para añadir separadores en las opciones de menú podemos poner un:

<li class= 'divider' ></li> 
dropdown bootstrap

 

Template de bootstrap para Blogger


Vamos a ver en la práctica toda esta teoría con un ejemplo bastante visual.
Hemos creado un blog con Blogger que utiliza estilos con Bootstrap.
Este template funciona con los widget habituales de Blogger.

Los beneficios de Blogger son muchos aunque también tiene sus limitaciones. 
No podemos usar PHP, ni subir ficheros, pero disponemos de un motor de blog respaldado por Google, gratuito y muy potente para la mayoría de blogs personales.

El diseño que hemos pensado consta de:
  • una barra de navegación superior con unos menús y un buscador
  • una zona de contenido central que alberga la zona de los artículos más un sidebar a la derecha
  • una zona con un footer con cuatro apartados en la zona inferior.
Hemos titulado a la web " Bootstrap con Blogger". 
Descargar la plantilla de Blogger | Ver la DEMO.

En este artículo explicamos cómo aplicar plantillas a un blog con Blogger, por si os interesa poner en práctica vuestras propias ideas en los estilos de Blogger.


Novedades Bootstrap 4

En Bootstrap 4 hay muchas características nuevas e interesantes que simplifican el proceso de trabajo. La actualización más importante es la integración con Flexbox.

Los puntos fuertes de Bootstrap siguien siendo la creación rápida de prototipos y el diseño web responsive.

Para los desarrolladores poco experimentados, Bootstrap resuelve este problema con gran facilidad.

Si no conoces CSS muy bien, te recomiendo comenzar con estos libros.
Y Necesitas saber cómo funciona Flexbox por supuesto.

El valor predeterminado para border-box ha sido cambiado.
Las primeras versiones de Bootstrap establecen el valor de border-box en el cuadro de contenido. La mayoría de los expertos lo encuentran molesto. Ahora este problema fue eliminado.

Los resets CSS han recorrido un largo camino para cambiar, y ahora en la nueva versión de Bootstrap tienen el nombre "Reiniciar".
"Reiniciar" se basa en Normalize. Evita margin-top, usa inherit, un rem bloque y su propia pila de fuentes para una representación de texto óptima.

Bootstrap 4 ya no incluye Glyphicons, en su defecto puedes usar Font Awesome, que tiene estupendos iconos.

Se incluye un nivel más de tamaño de rotura (el xl: a 1200px).

Se incluyen los REM (unidades relativas de medida) lo que posibilita el escalado.

 

Conclusión


En este tutorial, hemos realizado una aproximación al framework de Bootstrap desde cero y hemos comentado varios de los componentes que incorpora dicha librería. Hay que comentar, que esto es sólo lo básico y existen muchos más componentes de los que no hemos hablado en este artículo.

Para ver información ampliada y actualizada podéis visitar la web oficial de Bootstrap.

Adicionalmente hemos desarrollado un blog utilizando Boostrap con Blogger y hemos creado un template para poner un ejemplo real.