Diseño W3.CSS
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Clases de diseño W3.CSS
W3.CSS versión 2.90 / 2.91 introdujo las siguientes clases para el diseño "tipo columna":
| Clase | Descripción |
|---|---|
| w3-fila de celdas | Contenedor para celdas (columnas). |
| celda w3 | Celda de diseño (columna). |
| w3-cell-top | Alinea el contenido en la parte superior de una celda (columna). |
| w3-celda-medio | Alinea el contenido en el medio vertical de una celda (columna). |
| fondo de celda w3 | Alinea el contenido en la parte inferior de una celda (columna). |
| w3-móvil | Agrega capacidad de respuesta móvil primero a una celda (columna). Muestra elementos como elementos de bloque en dispositivos móviles. |
Las clases de diseño reemplazan las clases de diseño en desuso.
Los nuevos clasificadores de diseño son más versátiles y fáciles de usar.
Las clases de diseño en desuso se enumeran en la parte inferior de esta página.
Elementos de bloque HTML
Originalmente, los elementos de bloque HTML (como los elementos <div>) se muestran como bloques verticales:
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Ejemplo
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
Diseño de celdas
La clase w3-cell redefine los elementos de bloque para que se muestren horizontalmente (como las celdas de una tabla):
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Ejemplo
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
Contenedor de diseño
w3 -cell-row es un contenedor de celdas (columnas).
El ancho del contenedor w3-cell-row define el ancho total de todas las celdas contenidas.
El ancho predeterminado es 100%:
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Ejemplo
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Si cambia el ancho del contenedor de celdas, reducirá el ancho total de las celdas contenidas:
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Ejemplo
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Las celdas de diseño se ajustan automáticamente
La clase w3-cell tiene un estándar de autoajuste incorporado muy agradable. Los elementos uno al lado del otro se ajustarán automáticamente al ancho necesario:
Hola Diseño W3.CSS.
Hola Diseño W3.CSS. Hola Diseño W3.CSS.
Ejemplo
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
Las celdas de diseño se ajustan a la misma altura
Los elementos w3-cell uno al lado del otro también se ajustarán automáticamente a la misma altura:
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Ejemplo
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
Disposición Responsive
La clase w3-mobile agrega la primera capacidad de respuesta móvil a cualquier elemento HTML.
Usado junto con w3-cell, mostrará las columnas de diseño verticalmente en pantallas pequeñas/teléfonos móviles y horizontalmente en pantallas medianas/grandes.
En pantallas medianas y grandes:
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
En pantallas pequeñas:
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Ejemplo
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
Fácil alineación
La clase w3-cell hace que sea muy fácil alinear el texto.
Hay 3 clases de alineación diferentes:
- w3-cell-top (predeterminado)
- w3-celda-medio
- fondo de celda w3
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Ejemplo
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
La clase w3-cell-row estira los elementos para que se ajusten al ancho de la página:
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Hola Diseño W3.CSS.
Ejemplo
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Clases de diseño de tabla W3.CSS en desuso
| w3-diseño-contenedor | Utilice w3-cell-row en su lugar. |
| w3-diseño-fila | |
| w3-disposición-celda | Utilice w3-cell en su lugar. |
| w3-diseño-superior | Utilice w3-cell-top en su lugar. |
| w3-diseño-medio | Utilice w3-cell-middle en su lugar. |
| w3-diseño-inferior | Utilice w3-cell-bottom en su lugar. |
| w3-diseño-col | Utilice w3-mobile en su lugar. |
Las clases en desuso se eliminarán de W3.CSS en la versión 4.0.