Artículo de ejemplo para maquetar contenidos

 

Textos intro, textos intro, textos intro, textos intro, textos intro, textos intro, textos intro.

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

  

More information

 

©2016 Colegio Menesiano Madrid || Provincia Nuestra Señora del Pilar

Diseño web: abacocreacion.com