Las clases de respuesta
W3.CSS incluye un sistema de respuesta, móvil primera rejilla para manejar su diseño:
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
descanso
1/4
descanso
100px
45px
descanso
sistema de red de W3.CSS es sensible, y las columnas se volverá a organizar de forma automática en función del tamaño de la pantalla:
| Clase | Descripción |
|---|---|
| w3-media | Ocupa 1/2 de la ventana (en las pantallas medianas y grandes) |
| w3-tercero | Ocupa 1/3 de la ventana (en las pantallas medianas y grandes) |
| W3-twothird | Ocupa 2/3 de la ventana (en las pantallas medianas y grandes) |
| W3 trimestre | Ocupa 1/4 de la ventana (en las pantallas medianas y grandes) |
| W3-threequarter | Ocupa 3/4 de la ventana (en las pantallas medianas y grandes) |
| W3-resto | Define el resto de una fila |
| W3-col | Define una columna en una columna de fluido 12 que responde rejilla (más en un capítulo posterior) |
Filas de respuesta
clases de respuesta deben ser colocados dentro de una fila W3 para responder plenamente.
| Clase | Descripción |
|---|---|
| W3-fila | Define un recipiente padding-menos para las clases de respuesta. |
| W3-fila-padding | Define un contenedor acolchado para las clases de respuesta. |
El w3-media Clase
La anchura de la clase w3-medio es un medio del elemento padre (style = "width: 50%").
En pantallas pequeñas * su tamaño al 100%.
w3-media
w3-media
Ejemplo
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div> Inténtalo tú mismo " El W3 tercio Clase
La anchura de la clase w3-tercero es 1/3 del elemento padre (style = "width: 33,33%").
En pantallas pequeñas * su tamaño al 100%.
w3-tercero
w3-tercero
w3-tercero
Ejemplo utilizando W3 tercio
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Inténtalo tú mismo " La clase W3-twothird
La anchura de la clase w3-twothird es 2/3 del elemento padre (style = "width: 66,66%").
En pantallas pequeñas * su tamaño al 100%.
W3-twothird
w3-tercero
Ejemplo utilizando W3 tercio
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Inténtalo tú mismo " El W3 cuarta clase
El ancho de la clase W3-trimestre es 1/4 del elemento padre (style = "width: 25%").
En pantallas pequeñas * su tamaño al 100%.
W3 trimestre
W3 trimestre
W3 trimestre
W3 trimestre
Ejemplo de uso de w3 trimestre
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Inténtalo tú mismo " La clase W3-threequarter
El ancho de la clase W3-threequarter es 3/4 del elemento padre (style = "width: 75%").
En pantallas pequeñas * su tamaño al 100%.
W3 trimestre
W3 trimestre
Ejemplo de uso de w3-threequarter
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Inténtalo tú mismo " combinaciones
W3 trimestre
w3-media
W3 trimestre
W3 trimestre
W3 trimestre
w3-media
w3-media
W3 trimestre
W3 trimestre
Las filas anidadas
Ejemplo: w3-medio interior w3-media
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div> Inténtalo tú mismo " El uso de columnas Resto
Estoy 150 píxeles
Soy el resto
Ejemplo de uso de w3-resto
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div> Inténtalo tú mismo " El uso de columnas Porcentaje
20%
60%
20%
Ejemplo usando ciento
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div> Inténtalo tú mismo " La clase w3-contenido
La clase W3-contenido define un contenedor de tamaño fijo centrado en el contenido:
Ejemplo
<body class="w3-content" style="max-width:500px">
page content...
</body> Inténtalo tú mismo " Diferencia entre W3-W3 fila y fila-padding
La clase W3-fila define un contenedor acolchado-menos, mientras que la clase W3-fila-padding añade un relleno de 8 píxeles izquierda y derecha de cada columna:
W3-fila:
W3-fila-padding:
Ejemplo
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div> Inténtalo tú mismo " 12 Columnas de fluido de respuesta
W3.CSS también es compatible con una columna de 12 rejilla avanzada fluido sensible.
Cambiar el tamaño de la página para ver el efecto!
Esta parte ocupará 12 columnas en una pantalla pequeña, 4 en una pantalla mediana y 3 en una pantalla grande.
Esta parte ocupará 12 columnas en una pantalla pequeña, 8 en una pantalla mediana y 9 en una pantalla grande.
Usted aprenderá más sobre la red de fluido en un capítulo posterior.
* Resoluciones de pantalla
La capacidad de respuesta integrada de W3.CSS utiliza el tamaño de una pantalla de DP.
W3.CSS tratará a un iPhone 6 con una resolución de 750 x 1334 píxeles como una pequeña pantalla de 375 x 667 píxeles.
Las pequeñas pantallas están a menos de 601 pixels DP, pantallas medianas están a menos de 993 píxeles DP.
A continuación se muestra una lista de resoluciones típicas de dispositivos y tamaños informó DP:
Iphone 4
Resolución
640 x 960
DP
320 x 480
iphone 5
Resolución
640 x 1136
DP
320 x 528
iphone 6
Resolución
750 x 1334
DP
375 x 667
iphone 6s
Resolución
1080 x 1920
DP
414 x 736
Galaxy S6
Resolución
1440 x 2560
DP
360 x 640
nota 4
Resolución
1440 x 2560
DP
400 x 853
Nexus 6
Resolución
1440 x 2560
DP
411 x 731
Ipad mini
Resolución
768 x 1024
DP
768 x 1024
Protectores
Resolución
1536 x 2048
DP
728 x 1024
Ordenador portátil típica
Resolución
1366 x 768
DP
1366 x 768
escritorio típica
Resolución
1920 x 1080
DP
1920 x 1080