Textos y contenidos, textos y contenidos, textos y contenidos, textos y contenidos, textos y contenidos, textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos.
... texto con frase destacado azul
Textos y contenidos,textos y contenidos, textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos.
... texto con frase destacado azul-2
Textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos.
... texto con frase destacado gris
textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos,textos y contenidos.
Ejemplo de elementos flotantes
Para flotar elementos de una forma responsive se utiliza un sistema llamado bootstrap, permite un máximo de 12 columnas en todo el ancho de la página. Es sensible, y las columnas se reordenarán en función del tamaño de la pantalla, en una pantalla grande puede verse el contenido organizado en columnas, pero en una pantalla pequeña se apilan los elementos de contenido uno encima del otro, hasta ocupar el ancho disponible.
Las etiquetas que utilizaremos serán :
Para definir cada fila horizontal crearemos un contenedor contenedor div con el estilo row-fluid, y en su interior insertaremos cada bloque/columna, que se definirá mediante un div con el estilo span(número), donde el número es la cantidad de espacio horizontal que ocupará el módulo, siendo un valor entre 1 y 12. Ej.: span12 corresponde al 100% del ancho, span6 corresponde al 50% del ancho, span3 corresponde al 25% del ancho .
Por tanto en una misma fila prodremos meter diversas columnas con la etiqueta span(numero), siempre que la suma de los números de todos los span de la fila sea igual o inferior a 12.
Ejemplo de como quedarÃa el código fuente de una fila:
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
Muestra de contenidos la propiedad span para flotar elementos y delimitar su tamaño, con fondo color de fondo azul.
Etiqueta SPAN12
Muestra de contenidos la propiedad span para flotar elementos y delimitar su tamaño, con fondo color de fondo azul.
SPAN6
Muestra de contenidos la propiedad span para flotar elementos y delimitar su tamaño, con fondo color de fondo azul.
SPAN6
Muestra de contenidos la propiedad span para flotar elementos y delimitar su tamaño, con fondo color de fondo azul.
SPAN4
Muestra de contenidos la propiedad span para flotar elementos y delimitar su tamaño, con fondo color de fondo azul.
SPAN4
Muestra de contenidos la propiedad span para flotar elementos y delimitar su tamaño, con fondo color de fondo azul.
SPAN4
Muestra de contenidos la propiedad span para flotar elementos y delimitar su tamaño, con fondo color de fondo azul.
SPAN3
Muestra de contenidos la propiedad span para flotar elementos y delimitar su tamaño, con fondo color de fondo azul.
SPAN3
Muestra de contenidos la propiedad span para flotar elementos y delimitar su tamaño, con fondo color de fondo azul.
SPAN3
Muestra de contenidos la propiedad span para flotar elementos y delimitar su tamaño, con fondo color de fondo azul.
SPAN3
SPAN2
SPAN2
SPAN2
SPAN2
SPAN2
SPAN2
SPAN1
SPAN5
SPAN4
SPAN2
Muestra de contenidos la propiedad span para flotar elementos y delimitar su tamaño, con fondo color de fondo gris.
SPAN5
Muestra de contenidos la propiedad span para flotar elementos y delimitar su tamaño, con fondo color de fondo gris.
SPAN7