¿Cuál es la diferencia entre col-lg- *, col-md- * y col-sm- * en Bootstrap?

¿Cuál es la diferencia entre col-lg-* , col-md-* y col-sm-* en Twitter Bootstrap?

Actualizado 2018 …

La grilla Bootstrap 3 viene en 4 niveles (o “puntos de interrupción”) …

  • Extra pequeño (para teléfonos inteligentes .col-xs-* )
  • Pequeño (para tabletas .col-sm-* )
  • Medio (para computadoras portátiles .col-md-* )
  • Grande (para computadoras portátiles / computadoras de escritorio .col-lg-* ).

Estos tamaños de cuadrícula le permiten controlar el comportamiento de la cuadrícula en diferentes anchos. Los diferentes niveles están controlados por consultas de medios de CSS.

Entonces en la grilla de 12 columnas de Bootstrap …

col-sm-3 tiene 3 de 12 columnas de ancho (25%) en un ancho de dispositivo pequeño típico (> 768 píxeles)

col-md-3 es 3 de 12 columnas de ancho (25%) en un ancho de dispositivo medio típico (> 992 píxeles)


El nivel más pequeño ( xs , sm o md ) también define el tamaño para anchos de pantalla más grandes . Por lo tanto, para la misma columna de tamaño en todos los niveles, simplemente configure el ancho de la ventana gráfica más pequeña …

..

es lo mismo que,

..

Los niveles más grandes están implícitos. Porque col-sm-3 significa 3 units on sm-and-up , a menos que sea anulado específicamente por un nivel más grande que usa un tamaño diferente.

xs (predeterminado)> reemplazado por sm > reemplazado por md > reemplazado por lg


Combine las clases para usar el ancho de columna de cambio en diferentes tamaños de cuadrícula . Esto crea un diseño receptivo.

..

Las cuadrículas sm , md y lg se “astackrán” verticalmente en pantallas / viewports de menos de 768 píxeles. Aquí es donde encaja la grilla xs . Las columnas que usan las clases col-xs-* no se col-xs-* verticalmente, y continuarán col-xs-* hacia abajo en las pantallas más pequeñas.

Cambia el tamaño de tu navegador usando esta demostración y verás los efectos de escala de la grilla.


En Bootstrap 4 hay un nuevo tamaño -xl- , vea esta demostración . También se ha eliminado el -xs- , por lo que las columnas más pequeñas son simplemente col-1 , col-2 .. col-12 , etc.

col-* – 0 (xs)
col-sm-* – 576px
col-md-* – 768px
col-lg-* – 992px
col-xl-* – 1200px

Bootstrap 4 Grid Demo

Además, este artículo explica más sobre la grilla Bootstrap

Los documentos de arranque sí lo explican, pero aún tardé un tiempo en conseguirlo. Tiene más sentido cuando me lo explico de dos maneras:

Si piensa que las columnas comienzan en horizontal, puede elegir cuándo quiere que se apilen .

Por ejemplo, si comienzas con columnas: ABC

Usted decide cuándo deben astackrse para ser así:

UN

segundo

do

Si elige col-lg, las columnas se astackrán cuando el ancho sea <1200px.

Si elige col-md, las columnas se astackrán cuando el ancho sea <992px.

Si elige col-sm, las columnas se astackrán cuando el ancho sea <768px.

Si elige col-xs, entonces las columnas nunca se acumularán.

Por otro lado, si piensas en las columnas que comienzan astackdas, puedes elegir en qué punto se vuelven horizontales :

Si elige col-sm, las columnas se volverán horizontales cuando el ancho sea> = 768px.

Si elige col-md, las columnas se volverán horizontales cuando el ancho sea> = 992px.

Si elige col-lg, las columnas se volverán horizontales cuando el ancho sea> = 1200px.

De la documentación de Twitter Bootstrap :

  • cuadrícula pequeña (≥ 768px) = .col-sm-* ,
  • cuadrícula media (≥ 992px) = .col-md-* ,
  • cuadrícula grande (≥ 1200px) = .col-lg-* .

Creo que el aspecto confuso de esto es el hecho de que BootStrap 3 es un primer sistema de respuesta móvil y no explica cómo afecta esto a la jerarquía col-xx-n en esa parte de la documentación de Bootstrap. Esto hace que se pregunte qué sucede en dispositivos más pequeños si elige un valor para dispositivos más grandes y hace que se pregunte si es necesario especificar valores múltiples. (No lo haces)

Intentaré aclarar esto indicando que … Los tipos de grano más bajo (xs, sm) intentan retener la apariencia del diseño en pantallas más pequeñas y los tipos más grandes (md, lg) se mostrarán correctamente solo en pantallas más grandes pero envolverán columnas en dispositivos más pequeños. Los valores citados en los ejemplos anteriores se refieren al umbral según el cual bootstrap degrada la apariencia para adaptarse al estado de la pantalla disponible.

Lo que esto significa en la práctica es que si convierte las columnas col-xs-n, éstas conservarán la apariencia correcta incluso en pantallas muy pequeñas, hasta que la ventana baje a un tamaño que sea tan restrictivo que la página no pueda mostrarse correctamente. Esto debería significar que los dispositivos que tienen un ancho de 768px o menos deben mostrar su tabla como la diseñó en lugar de degradarse (forma de columna individual o envolvente). Obviamente, esto todavía depende del contenido de las columnas y ese es el punto. Si la página intenta mostrar varias columnas de datos grandes, una al lado de la otra en una pantalla pequeña, las columnas se envolverán naturalmente de una manera horrible si no se contabiliza. Por lo tanto, dependiendo de los datos dentro de las columnas, puede decidir el punto en el que se sacrifica el diseño para mostrar el contenido de manera adecuada.

Por ejemplo, si su página contiene tres columnas col-sm-n, bootstrap envolvería las columnas en filas cuando el ancho de la página caiga por debajo de 992px. Esto significa que los datos aún son visibles, pero requerirán desplazamiento vertical para verlos. Si no desea que su diseño se degrade, elija xs (siempre que sus datos puedan mostrarse adecuadamente en un dispositivo de menor resolución en tres columnas)

Si la posición horizontal de los datos es importante, entonces debe intentar elegir valores de granularidad más bajos para conservar la naturaleza visual. Si la posición es menos importante pero la página debe estar visible en todos los dispositivos, se debe usar un valor más alto.

Si elige col-lg-n, las columnas se mostrarán correctamente hasta que el ancho de la pantalla caiga por debajo del umbral xs de 1200 px.

Tamaños de dispositivo y prefijo de clase:

  • Dispositivos extra pequeños Teléfonos (<768px) - .col-xs-
  • Dispositivos pequeños Tabletas (≥768px) – .col-sm-
  • Escritorios de dispositivos medianos (≥992px) – .col-md-
  • Equipos grandes Equipos de escritorio (≥1200px) – .col-lg-

Opciones de cuadrícula

Bootstarp Grid System

Referencia: Sistema de rejilla

 .col-xs-$ Extra Small Phones Less than 768px .col-sm-$ Small Devices Tablets 768px and Up .col-md-$ Medium Devices Desktops 992px and Up .col-lg-$ Large Devices Large Desktops 1200px and Up 

TL; DR

.col-XY significa en el tamaño de pantalla X y superior , estirar este elemento para rellenar las columnas Y.

Bootstrap proporciona una cuadrícula de 12 columnas por .row , por lo que Y = 3 significa ancho = 25%.

xs, sm, md, lg son los tamaños para teléfono inteligente, tableta, computadora portátil, escritorio respectivamente.

El objective de especificar diferentes anchuras en diferentes tamaños de pantalla es permitirle agrandar las cosas en pantallas más pequeñas.

Ejemplo

 

Significado: 50% de ancho en computadoras de escritorio, 100% de ancho en dispositivos móviles, tabletas y computadoras portátiles.

Un caso particular: antes de aprender el sistema de grilla bootstrap, asegúrese de que el zoom del navegador esté configurado al 100% (cien por ciento). Por ejemplo: si la resolución de la pantalla es (1600px x 900px) y el zoom del navegador es 175%, los elementos “bootstrap-ped” se astackrán.

HTML

 
class="col-lg-4"
class="col-lg-4"

Chrome zoom 100%

Navegador 100 por ciento – elementos colocados horizontalmente

Zoom de cromo 175%

Navegador 175 por ciento – elementos astackdos

bueno, se usa para indicar a bootstrap cuántas columnas se van a colocar en una fila dependiendo del tamaño de la pantalla

 col-xs-2 

mostraría solo 2 columnas seguidas en una pantalla extrapequeña (xs), del mismo modo que sm define una pantalla pequeña, md (tamaño mediano), lg (tamaño grande), pero de acuerdo con la primera regla de arranque más pequeña, si menciona

 xs-col-2 md-col-4 

luego se mostrarán 2 columnas en cada fila para los tamaños de pantalla de xs hasta sm (incluido) y cambia cuando scope el siguiente tamaño, es decir, para md hasta lg (incluido) para una mejor comprensión de los tamaños de pantalla intente ejecutarlos en varios modos de pantalla en el modo de desarrollador de Chrome (ctr + shift + i) y prueba varios píxeles o dispositivos