Aprender html5 online
Animaciones css con ejemplos
Curso de Scratch desde cero
Keepcoding Bootcamp en detalle
Analizamos el hosting vps de Hostinger
Cómo aprender blockchain gratis
Primeros pasos con la blockchain de Libra
Curso de desarrollo de Skills de Alexa
Curso Smart Contracts en Ethereum con Solidity
Desarrollo seguro de aplicaciones
Desmitificando el IOT
Smart contracts
¿Qué tipo de programador eres?
Keepcoding Connect 2018
El lenguaje Go
Programar en Python
Aprender programación en un bootcamp
Introducción moment js
Kotlin vs java
Tutorial de Vue js
Minar criptomonedas
La criptomoneda NEM
Crear un contrato Ethereum con solidity
Tutorial de React JS
Tutorial de solidity en español
Qué es y para qué sirve Docker
Novedades de ECMA Script 2015
angular cli
Como crear una página web
Aprender a programar en un bootcamp
Curso Java gratis
Electron js desde cero
Angular js para principiantes
Validar json online
Servidor node js
Compilador de Java onlineIntroducción a 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.
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.
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)
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.
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.
<ul class= 'nav navbar-nav navbar-right' >
<div class= 'navbar navbar-default' > <div class= 'container' > --contenido-- </div> </div>
Tenemos un par de opciones más para los menús:
y lo mismo para el bottom (la parte inferior).
Funciones de javascript
Collapse
<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.
<button type= 'button' class= 'navbar-toggle' data-toggle= 'collapse' data-target= '#id del div' >
<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>
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.
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.
