1. Home
  2. Fundación Grids - equipos de gran tamaño

El mejor tutorial de Fundación Grids - equipos de gran tamaño en 2024. En este tutorial podrás aprender uso apretado en equipos de gran tamaño,

Fundación Grids - equipos de gran tamaño

El último capítulo se introduce la proporción de equipos de tamaño mediano y el diseño de equipos de cuadrícula pequeña, equipo pequeño para el 25% / 75% (.small-3 y .small-9), pero la proporción de equipos de tamaño medio para 50% / 50% (.medium-6 y .medium-6): 

<div class="small-3 medium-6 columns">eses</div>
<div class="small-9 medium-6 columns">eses</div>

En los equipos a gran escala, se recomienda una proporción de 33% / 66%.

Consejo: El tamaño de la pantalla es más grande que la definición de gran 64.0625em equipo.

El uso de equipos de gran tamaño .large-* categoría.

Ahora añadimos dos en el equipo a gran escala: 

<div class="small-3 medium-6 large-4 columns">eses</div>
<div class="small-9 medium-6 large-8 columns">eses</div>

resolver

  • La proporción de dispositivos pequeños con dos columnas de% 25/75% ( .small-3 y .small-9 )
  • La proporción de dispositivo de tamaño mediano con dos columnas de% 50/50% ( .medium-6 y .medium-6 )
  • La proporción de equipos de gran tamaño con dos columnas de% 33/66% ( .large-4 y .large-8 )

Ejemplos

<Div class = "fila">
<Div class = "pequeña-3 6 medio-columnas-4 grandes" style = "background-color: amarillo;">
<P> Este tutorial </ p>
</ Div>
<Div class = "pequeños-9 medio-6-8 grandes columnas" style = "background-color: rosa;">
<P> Este tutorial </ p>
</ Div>
</ Div>

Trate »
nota Nota: Para garantizar que el número de columnas se suman a 12!

uso apretado en equipos de gran tamaño

En el siguiente ejemplo, se especifica .large-6 clase (y no .medium- * .small-* ). Esto indica que una gran proporción de los equipos es 50% / 50%. Sin embargo, en el aparato de tamaño mediano o pequeño apilados horizontalmente (100% ancho):

Ejemplos

<Div class = "fila">
<Div class = "grandes-6 columnas" style = "background-color: amarillo;">
<P> Este tutorial </ p>
</ Div>
<Div class = "grandes-6 estilo de columnas" = "background-color: rosa;">
<P> Este tutorial </ p>
</ Div>
</ Div>

Trate »

Hot Tutorials

Contact US

Fundación Grids - equipos de gran tamaño
10/30