21.01.2022
¿Qué es una grilla de arranque? Sistema de bloques · Bootstrap en ruso Bootstrap 3 de ancho fijo
En este artículo, analizaremos el sistema Bootstrap Grid.
¿Qué es una malla?
En diseño gráfico, una cuadrícula Bootstrap es una estructura (generalmente bidimensional) que consta de una serie de líneas rectas (verticales, horizontales) que se cruzan y que se utilizan para estructurar el contenido. Se utiliza ampliamente para diseñar el diseño y la estructura del contenido en el diseño impreso. En diseño web, es una forma muy eficaz de crear de forma rápida y eficaz un diseño coherente utilizando HTML y CSS.
En pocas palabras, las cuadrículas en el diseño web organizan y estructuran el contenido, hacen que los sitios web sean más fáciles de rastrear y reducen la carga cognitiva de los usuarios.
¿Qué es un sistema de rejilla de carga?
Como se indica en la documentación oficial de Bootstrap para el sistema grid:
Bootstrap incluye un primer sistema de fluido móvil receptivo que escala hasta 12 columnas en consecuencia a medida que aumenta el tamaño del dispositivo o de la ventana gráfica. Incluye clases predefinidas para opciones de diseño simples, así como potentes mixins para crear diseños más semánticos.
Expliquemos lo dicho anteriormente. Bootstrap 3 es móvil primero en el sentido de que el código de Bootstrap ahora comienza apuntando a pantallas más pequeñas, como dispositivos móviles, tabletas, y luego "extiende" componentes y cuadrículas para pantallas más grandes, como computadoras portátiles y de escritorio.
estrategia movil
- Contenido
- Determina qué es lo más importante.
- Disposición
- Primero cree un ancho más pequeño.
- Primero, un dispositivo móvil básico con una dirección CSS; consultas de medios para tabletas, computadoras de escritorio.
- Mejora progresiva
- Agregue elementos a medida que aumenta el tamaño de la pantalla.
Cómo funciona el sistema Grid de Bootstrap
Los sistemas de red se utilizan para crear diseños de página a través de una serie de filas y columnas en las que se coloca su contenido. Asi es como funciona la cuadricula Bootstrap:
- Las filas deben colocarse en class.container para una alineación y un relleno adecuados.
- Utilice filas para crear grupos horizontales de columnas.
- El contenido debe colocarse en columnas y solo las columnas pueden ser hijas directas de las filas.
- Para crear rápidamente un diseño de cuadrícula, se encuentran disponibles clases de cuadrícula predefinidas como .row y .col-xs-4. MENOS mixins también se pueden utilizar para diseños más semánticos.
- Las columnas crean medianiles (los espacios entre el contenido de la columna) a través del espaciador. Este relleno se compensa en las filas de la primera y última columna utilizando un margen negativo en .rows.
- Las columnas de cuadrícula se crean especificando el número de doce columnas disponibles que desea abarcar. Por ejemplo, tres columnas iguales usarían three.col-xs-4.
Preguntas de los medios
Una consulta de medios es un término realmente elegante para una "regla condicional CSS". Simplemente aplica algo de CSS según ciertas condiciones. Si se cumplen estas condiciones, se aplica el estilo.
Las consultas de medios en Bootstrap le permiten mover, mostrar y ocultar contenido según el tamaño de la vista de pantalla. Las siguientes consultas de medios se utilizan en archivos LESS para crear puntos de interrupción clave en una cuadrícula Bootstrap.
/* Dispositivos extra pequeños (teléfonos, menos de 768 px) */ /* Sin consulta de medios ya que este es el valor predeterminado en Bootstrap */ /* Dispositivos pequeños (tabletas, 768 px y superiores) */ @media (min-width: @screen -sm-min) ( ... ) /* Dispositivos medianos (escritorios, 992 px y superiores) */ @media (min-width: @screen-md-min) ( ... ) /* Dispositivos grandes (escritorios grandes, 1200px y más) */ @media (ancho mínimo: @screen-lg-min) (...)
A veces se expanden al ancho máximo para limitar el CSS a un conjunto más reducido de dispositivos.
@media (ancho máximo: @screen-xs-max) (...) @media (ancho mínimo: @screen-sm-min) y (ancho máximo: @screen-sm-max) (... ) @media (ancho mínimo: @screen-md-min) y (ancho máximo: @screen-md-max) ( ... ) @media (ancho mínimo: @screen-lg-min) ( .. . )
Las solicitudes de medios tienen dos partes: la especificación del dispositivo y luego la regla de tamaño. En el caso anterior se establece la siguiente regla:
Considere esta línea -
@media (ancho mínimo: @screen-sm-min) y (ancho máximo: @screen-sm-max) (...)
Para todos los dispositivos, independientemente del tipo con un ancho mínimo: @screen-sm-min si el ancho de la pantalla es menor que @screen-sm-max entonces haga algo.
Opciones de cuadrícula
La siguiente tabla resume aspectos de cómo funciona el sistema grid de Bootstrap en múltiples dispositivos:
| Dispositivos pequeños de emergencia Teléfonos (menores de 768 px) | Dispositivos pequeños Tabletas (mayores o iguales a 768px) | Dispositivos de gama media Computadoras de escritorio (mayor o igual a 992px) | Dispositivos grandes Escritorios (mayores o iguales a 1200px) | |
|---|---|---|---|---|
| Comportamiento de la malla | Horizontalmente en todo momento | Contraído para comenzar, horizontalmente sobre los puntos de interrupción | Contraído para comenzar, horizontalmente sobre los puntos de interrupción | |
| Ancho máximo del contenedor | No (automático) | 750px | 970px | 1170px |
| Prefijo de clase | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Número de columnas | 12 | 12 | 12 | 12 |
| Ancho máximo de columna | Auto | 60px | 78px | 95px |
| Ancho del canal | 30px (15px a cada lado de la columna) | 30px (15px a cada lado de la columna) | 30px (15px a cada lado de la columna) | |
| Anidado | Sí | Sí | Sí | Sí |
| Compensaciones | Sí | Sí | Sí | Sí |
| Columna de orden | Sí | Sí | Sí | Sí |
Estructura de cuadrícula básica
A continuacion se muestra la estructura basica de la cuadricula Bootstrap:
Veamos algunos ejemplos de cuadrículas simples:
- Ejemplo: plegado horizontalmente
- Ejemplo: dispositivo mediano y grande
- Ejemplo: móvil, tableta, escritorio
La columna responsiva se restablece
Con cuatro niveles de cuadrículas disponibles, debería encontrarse con problemas en los que en ciertos puntos de interrupción las columnas no están del todo claras porque una es más alta que las otras. Para solucionar este problema, utilice una combinación de la clase .clearfix y las clases de utilidad correspondientes como se muestra en el siguiente ejemplo:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
Cambie el tamaño de la ventana gráfica o pruébela en su teléfono para obtener el resultado deseado en este ejemplo.
Columnas desplazadas
Los desplazamientos son una característica útil para diseños más especializados. Se pueden utilizar para arrastrar columnas a mayor distancia (por ejemplo). Las clases .col-xs-* no admiten compensaciones, pero se replican fácilmente usando una celda vacía.
Para utilizar compensaciones en pantallas grandes, utilice las clases .col-md-offset-*. Estas clases aumentan el margen de la columna izquierda en * columnas, donde * varía de 1 a 11.
En el siguiente ejemplo tenemos div class = "col-md-6". Centramos esto usando la clase .col-md-offset-3.
¡Hola Mundo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Esto producirá el siguiente resultado:
Columnas anidadas
Para anidar contenido en la cuadrícula predeterminada, agregue una nueva.fila y un conjunto de columnas.col-md-* dentro de la columna.col-md-* existente. Las filas anidadas deben contener un conjunto de columnas que sumen 12.
En el siguiente ejemplo, el diseño tiene dos columnas y la segunda está dividida en cuatro rectángulos en dos filas.
¡Hola Mundo!
Primera columna
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Segunda columna: dividida en 4 cuadros
Fiesta del arte Consectetur Semiótica del Tonx culpa. Pinterest asume requisitos orgánicos mínimos.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Esto producirá el siguiente resultado:
Ordenar columnas
Otra característica interesante del sistema de cuadrícula de Bootstrap es que puede escribir columnas fácilmente en un orden y mostrarlas en un orden diferente. Puede reordenar fácilmente las columnas de la cuadrícula integradas con las clases .col-md-push-* y .col-md-pull-* , donde * varía de 1 a 11.
En el siguiente ejemplo, tenemos dos diseños de columnas, siendo la columna de la izquierda la más estrecha y que actúa como barra lateral. Invertiremos el orden de estas columnas usando las clases .col-md-push-* y .col-md-pull-*.
¡Hola Mundo!
Antes de realizar el pedido
Después de realizar el pedido
Esto producirá el siguiente resultado:
En este artículo, nos familiarizaremos con las clases del marco Bootstrap 3, diseñado para crear un "esqueleto" (diseño) adaptativo de un sitio web.
Bootstrap 3 bloques de construcción de cuadrícula
La cuadrícula Bootstrap consta de elementos "constructivos". Los principales son contenedores para envolver, filas , bloques adaptativos Y clases de utilidad responsivas.
Básicamente, una cuadrícula es solo una lista de clases predefinidas con las que puede establecer el comportamiento necesario para los bloques (elementos HTML) y utilizarlos para crear un diseño de sitio web adaptable específico.
Envolver contenedores
Contenedor de envoltura- este es el elemento de cuadrícula "constructivo" a partir del cual comienza la creación del diseño para toda la página o parte de ella (por ejemplo, encabezado, menú principal, área principal, pie de página), dependiendo de la estrategia de desarrollo.
El contenedor en Bootstrap puede ser adaptativo-fijo o caucho adaptable.
Primero ( contenedor fijo adaptativo) se caracteriza por el hecho de que tiene un ancho constante dentro de un cierto rango de anchos de ventana gráfica.
La siguiente tabla muestra qué ancho tiene un contenedor fijo con capacidad de respuesta para un ancho de ventana gráfica del navegador determinado:
| Ancho de la ventana gráfica | Ancho del contenedor |
|---|---|
| <768px | El ancho del contenedor es igual al ancho de la ventana gráfica. |
| >= 768px y<992px | 750px |
| >= 992px y<1200px | 970px |
| <=1200px | 1170px |
Además de establecer el ancho, el contenedor Bootstrap fijo y responsivo también se centra horizontalmente con respecto a los bordes de la página. Lo hace utilizando las propiedades CSS margin-left:auto y margin-right:auto . Un contenedor fijo con capacidad de respuesta también establece un relleno izquierdo y derecho de 15 píxeles (usando las propiedades CSS padding-left:15px y padding-right:15px) para el contenido que se coloca en él.
Un contenedor de goma adaptativo se diferencia de uno fijo adaptativo en que ocupa todo el ancho(100%) ventana del navegador. Además, al igual que un contenedor fijo adaptativo, establece un relleno de 15 píxeles hacia la izquierda y hacia la derecha para el contenido que se coloca en él.
Al desarrollar el diseño de un sitio web, normalmente no utilizan anidar un contenedor contenedor Bootstrap dentro de otro.
Entonces, el primer elemento "constructivo" de la grilla Bootstrap es el contenedor contenedor. Determina el ancho del diseño en diferentes ventanas gráficas y también lo centra (solo contenedor fijo responsivo) en relación con los bordes izquierdo y derecho de la pestaña del navegador o el área del cliente de la ventana.
El siguiente elemento de construcción es una fila (un div con una clase de fila). Una fila es un bloque especial que se utiliza únicamente para envolver otros elementos de construcción (bloques adaptativos). Su objetivo principal es contrarrestar el relleno positivo (15px a izquierda y derecha) de un contenedor contenedor o bloque responsivo.
Un ejemplo de formación de sangrías internas:
Contenedor (+15px) -> fila (-15px) -> columna (+15px) -> contenedor de contenido (+15px) -> fila (-15px) -> columna (+15px) -> fila (-15px) -> col (+15px) -> contenido *col es un bloque responsivo
El ejemplo muestra que no importa en qué bloque responsivo se encuentre el contenido, siempre tendrá el margen correcto (es decir, 15 píxeles a la izquierda y a la derecha).
El siguiente elemento de "construcción" de la grilla Bootstrap es un bloque responsivo (div con clase col-?-?).
Bloques adaptativos son elementos de la grilla Bootstrap que tienen una o más clases col-?-? configuradas. . Estos bloques son los principales ladrillos de “construcción”, forman la estructura necesaria.
Se establece el ancho del bloque adaptativo. en relación con el tipo de dispositivo. Esto significa que el bloque responsivo puede tener diferentes anchos en diferentes dispositivos. Es por esto que este bloque se llama adaptativo.
¿Cómo se establece el ancho de un bloque adaptativo? La configuración del ancho que debe tener un bloque responsivo en un dispositivo específico se establece de forma predeterminada en un número del 1 al 12 (el número de columnas Bootstrap). ¿Se indica este número en lugar del segundo carácter? en clase col-?-? .
Este número (por defecto del 1 al 12) determina ¿Qué porcentaje del ancho del elemento padre? debe tener un bloque adaptativo.
Por ejemplo, el número 1: establece el ancho del bloque adaptativo igual al 8,3% (1/12) del ancho del bloque principal. El número 12 es un ancho igual al 100% (12/12) del ancho del bloque principal.
Además de especificar el ancho del bloque adaptativo También debe especificar el tipo de dispositivo(en lugar de 1 pregunta). La clase de dispositivo determinará en qué ventana gráfica tendrá efecto este ancho. Bootstrap 3 tiene 4 clases principales. Estos son xs (ancho de la ventana gráfica >0), sm (ancho de la ventana gráfica >= 768 px), md (ancho de la ventana gráfica >= 992 px) y lg (ancho de la ventana gráfica del navegador >= 1200 px).
Por ejemplo, un bloque adaptativo con clase col-xs-12 col-sm-6 col-md-4 col-lg-3 tendrá un ancho del 100% (12/12) en el dispositivo xs y del 50% (6 /12) en el dispositivo sm. , en md - 33,3% (4/12), en lg - 25% (3/12).
Además, vale la pena prestar atención al hecho de que los bloques adaptativos no limitan su alcance. Aquellos. Si especificó xs en el atributo de clase de un bloque adaptativo, pero no especificó sm, entonces su efecto se extenderá al alcance de este rango.
Por ejemplo, un bloque adaptativo con clase col-xs-6 col-lg-3 tendrá un ancho del 50% (6/12) en dispositivos xs, sm y md, y del 25% (3/12) en lg.
Un bloque adaptativo, al igual que un contenedor, establece márgenes izquierdo y derecho positivos de 15 píxeles para el contenido que se colocará en él.
En un diseño adecuado basado en cuadrícula Bootstrap, un bloque responsivo siempre debe tener una fila como padre.
Por ejemplo, dividamos el bloque en 3 columnas iguales, que se mostrarán verticalmente en xs y horizontalmente en sm y superiores:
Por ejemplo, calculemos el ancho del contenido disponible para el primer y segundo bloque:
| Puntos de control | Ancho disponible 1 cuadra | Ancho disponible 2 cuadras |
|---|---|---|
| 320 píxeles - 749,98 píxeles | de 290 px (320 px - relleno (30 px)) a 719,98 px (749,98 px - relleno (30 px)) | |
| 750 píxeles - 969,98 píxeles | 720 px (750 px - relleno (30 px)) | |
| 970 píxeles - 1169,98 píxeles | 616,7 px (970 px*8/12 - relleno (30 px)) | 293,3 px (70 px*4/12 - relleno (30 px)) |
| 1170px y más | 750 px (1170 px*8/12 - relleno (30 px)) | 360px (1170px*4/12 - relleno (30px)) |
Los bloques adaptativos se ubican en el elemento principal uno tras otro en líneas. Los bloques adaptativos con un número total de columnas de no más de 12 (de forma predeterminada) se colocan en una línea. Aquellos. los bloques que no caben en la primera línea se colocan en la siguiente línea, etc.
¿Cómo se organizan los bloques adaptativos? 
En Bootstrap 3, los bloques responsivos flotan (flotante: izquierda). Esto debe tenerse en cuenta al crear el diseño de su página web.
Antes de un bloque que debería comenzar en una nueva línea, debes colocar un elemento div vacío con la clase clearfix. También debe estar oculto para los dispositivos en los que no es necesario realizar esta acción. El bloque se oculta utilizando las clases correspondientes que se detallan a continuación.
Los bloques flotantes también tienen una característica. Por ejemplo, si en el ejemplo anterior la altura de 1 bloque será mayor que la de 2 bloques. Entonces el tercer bloque no se ubicará en una nueva línea, sino que se “pegará” al lado derecho del primer bloque.
Para evitar esto, debe agregar un bloque con la clase clearfix y hacerlo visible para los dispositivos necesarios (por ejemplo, en md y lg):
El principio básico de crear un diseño.
El principio básico de la creación de un diseño es anidar algunos bloques adaptativos dentro de otros. Además, su ancho es siempre un parámetro relativo, que se establece como un porcentaje (por el número de columnas) del ancho del bloque principal. Aquellos. en cualquier nivel de anidamiento, por ejemplo, el ancho de un bloque adaptativo de 6 columnas es siempre el 50% (6/12*100%) del ancho del elemento principal.
Por ejemplo, dividamos un determinado bloque (el principal) en 4 bloques (2 en la primera línea y 2 en la segunda). Para simplificar, crearemos un diseño que no responde:
Creemos un diseño de 3 bloques (3 x 2):
Es fácil ver que el marcado del bloque adaptativo anidado se realiza de la misma forma que el principal. Esto significa que no importa qué nivel de anidamiento tenga un bloque, su diseño se crea según las mismas reglas.
Clases para desplazamiento de bloque adaptativo
Bootstrap tiene clases responsivas (col-?-offset-?) con las que puedes mover un bloque una cierta cantidad de columnas hacia la derecha. ¿Primero? debe reemplazarse con el tipo de dispositivo (xs, sm, md o lg). ¿Segundo? por el número de columnas.
Por ejemplo, configuremos el bloque en dispositivos md para que tenga 8 columnas de ancho y colóquelo en el centro de la línea (es decir, muévalo 2 columnas hacia la derecha):
Además de las herramientas para el desplazamiento adaptativo de bloques, Bootstrap 3 también tiene clases especiales con las que puedes cambiar el orden de los elementos dentro de una línea.
Clases de utilidad Bootstrap 3 responsivas
Bootstrap 3 contiene clases adaptativas (de utilidad) que le permiten controlar la visibilidad de los elementos según el tipo de dispositivo.
Además de especificar el dispositivo (xs, sm, md, lg) en el que será visible el bloque, también debe especificar cómo se debe mostrar en este dispositivo. Las opciones posibles son inline, block y inline-block.
| Clase | Descripción |
|---|---|
| ¿visible-xs-? | Hace que el elemento sea visible solo en dispositivos con una pantalla muy pequeña xs (ancho de la ventana gráfica<768px). На других устройствах эти элементы не отображаются. |
| visible-sm-? | Hace que el elemento sea visible solo en dispositivos con una pantalla pequeña (ancho de ventana gráfica >=768px y<992px). На других устройствах эти элементы не отображаются. |
| visible-md-? | Hace que el elemento sea visible solo en dispositivos con una pantalla md (ancho de ventana gráfica >=992px y<1200px). На других устройствах эти элементы не отображаются. |
| visible-lg-? | Hace que el elemento sea visible solo en dispositivos con pantalla LG (ancho de ventana gráfica >=1200px). Estos elementos no se muestran en otros dispositivos. |
¿En lugar de una señal? debe especificar block , inline o inline-block . Aquellos. especifique cómo se debe mostrar este elemento.
Por ejemplo, agregar la clase visible-md-block a un elemento significará que solo se mostrará en dispositivos que tengan una ventana gráfica md (ancho de ventana gráfica >=992px y<1200px). Выглядеть данный элемент на странице будет как блок (CSS: display:block;).
Nota: Estas clases también se pueden usar juntas para hacer que los elementos sean visibles en múltiples dispositivos. Por ejemplo, si aplica las clases visible-xs-inline y visible-md-inline a un elemento, esto lo hará visible en dispositivos de pantalla pequeña y mediana. Este elemento se mostrará como en línea (CSS: display:inline;).
Además de estas, Bootstrap 3 también tiene clases con el efecto contrario. Se pueden utilizar para ocultar elementos en determinados dispositivos.
Estas clases también se pueden usar juntas para hacer que un elemento sea invisible en múltiples dispositivos.
Por ejemplo, un elemento con las clases oculta-xs y oculta-sm no será visible en 2 dispositivos (xs y sm) a la vez.
Además de las clases receptivas anteriores, el marco Bootstrap 3 también contiene aquellas que le permiten controlar la visibilidad de los elementos al imprimir.
| Clase | Descripción |
|---|---|
| bloque de impresión visible | Un elemento con la clase especificada no se mostrará en la página. Cuando se imprima, este elemento será visible y tendrá la propiedad de visualización CSS configurada en bloquear. |
| impresión-visible-en línea | Un elemento con la clase especificada no se mostrará en la página. Cuando se imprima, este elemento será visible y tendrá la propiedad de visualización CSS configurada en inline. |
| bloque-en-línea-de-impresión-visible | Un elemento con la clase especificada no se mostrará en la página. Cuando se imprima, este elemento será visible y tendrá la propiedad de visualización CSS establecida en inline-block. |
| impresión oculta | Un elemento con la clase especificada no se mostrará cuando se imprima. Este elemento será visible en la página (en el navegador). |
Ejemplo de creación de un diseño usando la cuadrícula Bootstrap 3
En esta sección del artículo, veremos el proceso de creación de un diseño responsivo para un bloque usando la cuadrícula Bootstrap 3.
El trazado consta de tres bloques. Estos bloques deben estar ubicados en los dispositivos como se muestra en la imagen.
El diseño de un diseño generalmente comienza con dispositivos pequeños (xs). En este dispositivo, los bloques tienen el mismo ancho, igual a 12 columnas Bootstrap.
En sm los bloques están dispuestos de la siguiente manera:
- 1 - ocupa todo el ancho del bloque principal;
- 2 y 3 (cada uno de ellos): ancho igual a 6 columnas Bootstrap.
En md, los bloques 1 y 2 están ubicados en la primera línea y el bloque 3 está en la segunda línea. 1 bloque tiene un ancho igual a 8 columnas Bootstrap (col-md-8), 2 bloques - 4 columnas (col-md-4).
El bloque 3 siempre debe estar situado en la línea 2. Para garantizar esto, se debe colocar un bloque vacío adicional con clase clearfix antes de este bloque. Este bloque no permitirá que el bloque 3 fluya alrededor de los bloques anteriores. Además, debes tener en cuenta que un bloque con la clase clearfix debe mostrarse únicamente en md , porque Esta acción no es necesaria en otros dispositivos.
En LG, los bloques adaptativos están dispuestos horizontalmente y juntos ocupan todo el ancho. 1 bloque tiene un ancho igual a la mitad del ancho del elemento principal (col-lg-6), 2 bloques - un cuarto del ancho (col-lg-3) y 3 bloques - también deben ocupar un cuarto del ancho del elemento padre (col-lg-3).
Temas más interesantes.
En este artículo, nos familiarizaremos con las clases del marco Bootstrap 3, diseñado para crear un "esqueleto" (diseño) adaptativo de un sitio web.
Bootstrap 3 bloques de construcción de cuadrícula
La cuadrícula Bootstrap consta de elementos "constructivos". Los principales son contenedores para envolver, filas , bloques adaptativos Y clases de utilidad responsivas.
Básicamente, una cuadrícula es solo una lista de clases predefinidas con las que puede establecer el comportamiento necesario para los bloques (elementos HTML) y utilizarlos para crear un diseño de sitio web adaptable específico.
Envolver contenedores
Contenedor de envoltura- este es el elemento de cuadrícula "constructivo" a partir del cual comienza la creación del diseño para toda la página o parte de ella (por ejemplo, encabezado, menú principal, área principal, pie de página), dependiendo de la estrategia de desarrollo.
El contenedor en Bootstrap puede ser adaptativo-fijo o caucho adaptable.
Primero ( contenedor fijo adaptativo) se caracteriza por el hecho de que tiene un ancho constante dentro de un cierto rango de anchos de ventana gráfica.
La siguiente tabla muestra qué ancho tiene un contenedor fijo con capacidad de respuesta para un ancho de ventana gráfica del navegador determinado:
| Ancho de la ventana gráfica | Ancho del contenedor |
|---|---|
| <768px | El ancho del contenedor es igual al ancho de la ventana gráfica. |
| >= 768px y<992px | 750px |
| >= 992px y<1200px | 970px |
| <=1200px | 1170px |
Además de establecer el ancho, el contenedor Bootstrap fijo y responsivo también se centra horizontalmente con respecto a los bordes de la página. Lo hace utilizando las propiedades CSS margin-left:auto y margin-right:auto . Un contenedor fijo con capacidad de respuesta también establece un relleno izquierdo y derecho de 15 píxeles (usando las propiedades CSS padding-left:15px y padding-right:15px) para el contenido que se coloca en él.
Un contenedor de goma adaptativo se diferencia de uno fijo adaptativo en que ocupa todo el ancho(100%) ventana del navegador. Además, al igual que un contenedor fijo adaptativo, establece un relleno de 15 píxeles hacia la izquierda y hacia la derecha para el contenido que se coloca en él.
Al desarrollar el diseño de un sitio web, normalmente no utilizan anidar un contenedor contenedor Bootstrap dentro de otro.
Entonces, el primer elemento "constructivo" de la grilla Bootstrap es el contenedor contenedor. Determina el ancho del diseño en diferentes ventanas gráficas y también lo centra (solo contenedor fijo responsivo) en relación con los bordes izquierdo y derecho de la pestaña del navegador o el área del cliente de la ventana.
El siguiente elemento de construcción es una fila (un div con una clase de fila). Una fila es un bloque especial que se utiliza únicamente para envolver otros elementos de construcción (bloques adaptativos). Su objetivo principal es contrarrestar el relleno positivo (15px a izquierda y derecha) de un contenedor contenedor o bloque responsivo.
Un ejemplo de formación de sangrías internas:
Contenedor (+15px) -> fila (-15px) -> columna (+15px) -> contenedor de contenido (+15px) -> fila (-15px) -> columna (+15px) -> fila (-15px) -> col (+15px) -> contenido *col es un bloque responsivo
El ejemplo muestra que no importa en qué bloque responsivo se encuentre el contenido, siempre tendrá el margen correcto (es decir, 15 píxeles a la izquierda y a la derecha).
El siguiente elemento de "construcción" de la grilla Bootstrap es un bloque responsivo (div con clase col-?-?).
Bloques adaptativos son elementos de la grilla Bootstrap que tienen una o más clases col-?-? configuradas. . Estos bloques son los principales ladrillos de “construcción”, forman la estructura necesaria.
Se establece el ancho del bloque adaptativo. en relación con el tipo de dispositivo. Esto significa que el bloque responsivo puede tener diferentes anchos en diferentes dispositivos. Es por esto que este bloque se llama adaptativo.
¿Cómo se establece el ancho de un bloque adaptativo? La configuración del ancho que debe tener un bloque responsivo en un dispositivo específico se establece de forma predeterminada en un número del 1 al 12 (el número de columnas Bootstrap). ¿Se indica este número en lugar del segundo carácter? en clase col-?-? .
Este número (por defecto del 1 al 12) determina ¿Qué porcentaje del ancho del elemento padre? debe tener un bloque adaptativo.
Por ejemplo, el número 1: establece el ancho del bloque adaptativo igual al 8,3% (1/12) del ancho del bloque principal. El número 12 es un ancho igual al 100% (12/12) del ancho del bloque principal.
Además de especificar el ancho del bloque adaptativo También debe especificar el tipo de dispositivo(en lugar de 1 pregunta). La clase de dispositivo determinará en qué ventana gráfica tendrá efecto este ancho. Bootstrap 3 tiene 4 clases principales. Estos son xs (ancho de la ventana gráfica >0), sm (ancho de la ventana gráfica >= 768 px), md (ancho de la ventana gráfica >= 992 px) y lg (ancho de la ventana gráfica del navegador >= 1200 px).
Por ejemplo, un bloque adaptativo con clase col-xs-12 col-sm-6 col-md-4 col-lg-3 tendrá un ancho del 100% (12/12) en el dispositivo xs y del 50% (6 /12) en el dispositivo sm. , en md - 33,3% (4/12), en lg - 25% (3/12).
Además, vale la pena prestar atención al hecho de que los bloques adaptativos no limitan su alcance. Aquellos. Si especificó xs en el atributo de clase de un bloque adaptativo, pero no especificó sm, entonces su efecto se extenderá al alcance de este rango.
Por ejemplo, un bloque adaptativo con clase col-xs-6 col-lg-3 tendrá un ancho del 50% (6/12) en dispositivos xs, sm y md, y del 25% (3/12) en lg.
Un bloque adaptativo, al igual que un contenedor, establece márgenes izquierdo y derecho positivos de 15 píxeles para el contenido que se colocará en él.
En un diseño adecuado basado en cuadrícula Bootstrap, un bloque responsivo siempre debe tener una fila como padre.
Por ejemplo, dividamos el bloque en 3 columnas iguales, que se mostrarán verticalmente en xs y horizontalmente en sm y superiores:
Por ejemplo, calculemos el ancho del contenido disponible para el primer y segundo bloque:
| Puntos de control | Ancho disponible 1 cuadra | Ancho disponible 2 cuadras |
|---|---|---|
| 320 píxeles - 749,98 píxeles | de 290 px (320 px - relleno (30 px)) a 719,98 px (749,98 px - relleno (30 px)) | |
| 750 píxeles - 969,98 píxeles | 720 px (750 px - relleno (30 px)) | |
| 970 píxeles - 1169,98 píxeles | 616,7 px (970 px*8/12 - relleno (30 px)) | 293,3 px (70 px*4/12 - relleno (30 px)) |
| 1170px y más | 750 px (1170 px*8/12 - relleno (30 px)) | 360px (1170px*4/12 - relleno (30px)) |
Los bloques adaptativos se ubican en el elemento principal uno tras otro en líneas. Los bloques adaptativos con un número total de columnas de no más de 12 (de forma predeterminada) se colocan en una línea. Aquellos. los bloques que no caben en la primera línea se colocan en la siguiente línea, etc.
¿Cómo se organizan los bloques adaptativos?
En Bootstrap 3, los bloques responsivos flotan (flotante: izquierda). Esto debe tenerse en cuenta al crear el diseño de su página web.
Antes de un bloque que debería comenzar en una nueva línea, debes colocar un elemento div vacío con la clase clearfix. También debe estar oculto para los dispositivos en los que no es necesario realizar esta acción. El bloque se oculta utilizando las clases correspondientes que se detallan a continuación.
Los bloques flotantes también tienen una característica. Por ejemplo, si en el ejemplo anterior la altura de 1 bloque será mayor que la de 2 bloques. Entonces el tercer bloque no se ubicará en una nueva línea, sino que se “pegará” al lado derecho del primer bloque.
Para evitar esto, debe agregar un bloque con la clase clearfix y hacerlo visible para los dispositivos necesarios (por ejemplo, en md y lg):
El principio básico de crear un diseño.
El principio básico de la creación de un diseño es anidar algunos bloques adaptativos dentro de otros. Además, su ancho es siempre un parámetro relativo, que se establece como un porcentaje (por el número de columnas) del ancho del bloque principal. Aquellos. en cualquier nivel de anidamiento, por ejemplo, el ancho de un bloque adaptativo de 6 columnas es siempre el 50% (6/12*100%) del ancho del elemento principal.
Por ejemplo, dividamos un determinado bloque (el principal) en 4 bloques (2 en la primera línea y 2 en la segunda). Para simplificar, crearemos un diseño que no responde:
Creemos un diseño de 3 bloques (3 x 2):
Es fácil ver que el marcado del bloque adaptativo anidado se realiza de la misma forma que el principal. Esto significa que no importa qué nivel de anidamiento tenga un bloque, su diseño se crea según las mismas reglas.
Clases para desplazamiento de bloque adaptativo
Bootstrap tiene clases responsivas (col-?-offset-?) con las que puedes mover un bloque una cierta cantidad de columnas hacia la derecha. ¿Primero? debe reemplazarse con el tipo de dispositivo (xs, sm, md o lg). ¿Segundo? por el número de columnas.
Por ejemplo, configuremos el bloque en dispositivos md para que tenga 8 columnas de ancho y colóquelo en el centro de la línea (es decir, muévalo 2 columnas hacia la derecha):
Además de las herramientas para el desplazamiento adaptativo de bloques, Bootstrap 3 también tiene clases especiales con las que puedes cambiar el orden de los elementos dentro de una línea.
Clases de utilidad Bootstrap 3 responsivas
Bootstrap 3 contiene clases adaptativas (de utilidad) que le permiten controlar la visibilidad de los elementos según el tipo de dispositivo.
Además de especificar el dispositivo (xs, sm, md, lg) en el que será visible el bloque, también debe especificar cómo se debe mostrar en este dispositivo. Las opciones posibles son inline, block y inline-block.
| Clase | Descripción |
|---|---|
| ¿visible-xs-? | Hace que el elemento sea visible solo en dispositivos con una pantalla muy pequeña xs (ancho de la ventana gráfica<768px). На других устройствах эти элементы не отображаются. |
| visible-sm-? | Hace que el elemento sea visible solo en dispositivos con una pantalla pequeña (ancho de ventana gráfica >=768px y<992px). На других устройствах эти элементы не отображаются. |
| visible-md-? | Hace que el elemento sea visible solo en dispositivos con una pantalla md (ancho de ventana gráfica >=992px y<1200px). На других устройствах эти элементы не отображаются. |
| visible-lg-? | Hace que el elemento sea visible solo en dispositivos con pantalla LG (ancho de ventana gráfica >=1200px). Estos elementos no se muestran en otros dispositivos. |
¿En lugar de una señal? debe especificar block , inline o inline-block . Aquellos. especifique cómo se debe mostrar este elemento.
Por ejemplo, agregar la clase visible-md-block a un elemento significará que solo se mostrará en dispositivos que tengan una ventana gráfica md (ancho de ventana gráfica >=992px y<1200px). Выглядеть данный элемент на странице будет как блок (CSS: display:block;).
Nota: Estas clases también se pueden usar juntas para hacer que los elementos sean visibles en múltiples dispositivos. Por ejemplo, si aplica las clases visible-xs-inline y visible-md-inline a un elemento, esto lo hará visible en dispositivos de pantalla pequeña y mediana. Este elemento se mostrará como en línea (CSS: display:inline;).
Además de estas, Bootstrap 3 también tiene clases con el efecto contrario. Se pueden utilizar para ocultar elementos en determinados dispositivos.
Estas clases también se pueden usar juntas para hacer que un elemento sea invisible en múltiples dispositivos.
Por ejemplo, un elemento con las clases oculta-xs y oculta-sm no será visible en 2 dispositivos (xs y sm) a la vez.
Además de las clases receptivas anteriores, el marco Bootstrap 3 también contiene aquellas que le permiten controlar la visibilidad de los elementos al imprimir.
| Clase | Descripción |
|---|---|
| bloque de impresión visible | Un elemento con la clase especificada no se mostrará en la página. Cuando se imprima, este elemento será visible y tendrá la propiedad de visualización CSS configurada en bloquear. |
| impresión-visible-en línea | Un elemento con la clase especificada no se mostrará en la página. Cuando se imprima, este elemento será visible y tendrá la propiedad de visualización CSS configurada en inline. |
| bloque-en-línea-de-impresión-visible | Un elemento con la clase especificada no se mostrará en la página. Cuando se imprima, este elemento será visible y tendrá la propiedad de visualización CSS establecida en inline-block. |
| impresión oculta | Un elemento con la clase especificada no se mostrará cuando se imprima. Este elemento será visible en la página (en el navegador). |
Ejemplo de creación de un diseño usando la cuadrícula Bootstrap 3
En esta sección del artículo, veremos el proceso de creación de un diseño responsivo para un bloque usando la cuadrícula Bootstrap 3.
El trazado consta de tres bloques. Estos bloques deben estar ubicados en los dispositivos como se muestra en la imagen.
El diseño de un diseño generalmente comienza con dispositivos pequeños (xs). En este dispositivo, los bloques tienen el mismo ancho, igual a 12 columnas Bootstrap.
En sm los bloques están dispuestos de la siguiente manera:
- 1 - ocupa todo el ancho del bloque principal;
- 2 y 3 (cada uno de ellos): ancho igual a 6 columnas Bootstrap.
En md, los bloques 1 y 2 están ubicados en la primera línea y el bloque 3 está en la segunda línea. 1 bloque tiene un ancho igual a 8 columnas Bootstrap (col-md-8), 2 bloques - 4 columnas (col-md-4).
El bloque 3 siempre debe estar situado en la línea 2. Para garantizar esto, se debe colocar un bloque vacío adicional con clase clearfix antes de este bloque. Este bloque no permitirá que el bloque 3 fluya alrededor de los bloques anteriores. Además, debes tener en cuenta que un bloque con la clase clearfix debe mostrarse únicamente en md , porque Esta acción no es necesaria en otros dispositivos.
En LG, los bloques adaptativos están dispuestos horizontalmente y juntos ocupan todo el ancho. 1 bloque tiene un ancho igual a la mitad del ancho del elemento principal (col-lg-6), 2 bloques - un cuarto del ancho (col-lg-3) y 3 bloques - también deben ocupar un cuarto del ancho del elemento padre (col-lg-3).
Temas más interesantes.
El sistema de cuadrícula Twitter Bootstrap 3 es una forma rápida y sencilla de crear un diseño de sitio web.
Descripción del sistema de grid Twitter Bootstrap 3
Las cuadrículas Bootstrap se utilizan para desarrollar diseños de páginas web y crear diseños de bloques en los que es necesario garantizar la correcta disposición de los elementos. El desarrollo de una cuadrícula comienza con un contenedor que tiene un ancho fijo o flotante.
Contenedor de ancho fijo
Contenedor de ancho fijo (
Contenedor de ancho flotante
Contenedor de ancho flotante (
Colocar filas dentro de un contenedor
El siguiente paso es colocar las filas (divs con clase .row) dentro del contenedor. Ancho de fila (
Colocar bloques dentro de filas Bootstrap
Dentro de la fila hay bloques con la clase col-*-* , dentro de los cuales se coloca el contenido u otras filas. El ancho de los bloques con clase col-*-* se especifica en forma relativa especificando el número de columnas Bootstrap. Dado que una fila en Bootstrap consta de 12 columnas de forma predeterminada, el ancho mínimo de un bloque col-*-* es una columna Bootstrap, y el ancho máximo de un bloque col-*-* es 12 columnas Bootstrap.
Por ejemplo, si queremos crear 3 bloques con el mismo ancho en una fila, entonces debemos establecer el ancho de estos bloques en 4 columnas Bootstrap (
Cálculo de anchos de bloque.
Por ejemplo: puede calcular el ancho del bloque en píxeles de la siguiente manera:
[Ancho del bloque] = [Ancho de columna Bootstrap]*[Número de columnas que componen el bloque],
donde: [Ancho de columna Bootstrap] = [Ancho de fila] / 12.
[Ancho de columna Bootstrap] = 970/12 = 81px.
[Ancho de bloque] = 81 * 4 = 324px.
Sistema de rejilla para varios dispositivos.
Para crear diseños de páginas web para varios dispositivos (teléfonos inteligentes, tabletas, portátiles y ordenadores personales), debe utilizar las clases de cuadrícula predefinidas de Twitter Bootstrap 3.
Por ejemplo, puede utilizar la clase .col-xs-* para crear una cuadrícula para dispositivos de pantalla pequeña, como teléfonos inteligentes. Exactamente la misma clase. col-sm-* - para dispositivos con pantallas pequeñas, como tabletas, class.col-md-* - para dispositivos con pantallas de tamaño mediano, como computadoras personales y portátiles, así como class.col-lg-* - para dispositivos con pantallas grandes.
La siguiente tabla resume algunas de las características clave del nuevo sistema de cuadrícula de Bootstrap 3.
| Características del sistema de cuadrícula Bootstrap 3 | Ancho de pantalla pequeño Teléfonos inteligentes (<768px) |
Ancho de pantalla pequeño tabletas (≥768px y<992) |
Ancho promedio de pantalla portátiles (≥992px y<1200px) |
Gran ancho de pantalla Ordenadores (≥1200 píxeles) |
|---|---|---|---|---|
| Ancho del contenedor fijado disposición (.envase) |
750px | 970px | 1170px | |
| Ancho del contenedor de diseño flotante (.container-fluid) | Igual al ancho del área de trabajo de la ventana del navegador. | |||
| Prefijo de clase | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Ancho máximo de columna de Bootstrap para un contenedor de ancho fijo (.container) | ~62 píxeles (750 píxeles/12) | ~81px (970px/12) | ~97 píxeles (1170 píxeles/12) | |
| Ancho máximo de columna de Bootstrap para un contenedor de ancho flotante (.container-fluid) | Ancho del área de trabajo de la ventana del navegador / 12 | |||
| Relleno para contenido en bloques de columnas Bootstrap | 15px en el lado izquierdo y derecho del bloque | |||
Nota:
Si aplica class.col-sm-* a un bloque, afectará no solo el marcado para dispositivos de pantalla pequeña (tabletas), sino también para dispositivos de pantalla mediana y grande, a menos que especifique clases.col-md- * y .col- lg-*. Del mismo modo, class.col-md-* afectará el diseño no solo para dispositivos de pantalla mediana, sino también para dispositivos de pantalla grande si no se especifica class.col-lg-*.
Creación de un diseño de sitio web utilizando el sistema de cuadrícula Twitter Bootstrap 3
Con el nuevo sistema de cuadrícula Bootstrap 3 de Twitter, puedes controlar fácilmente cómo aparece el diseño de tu sitio en diferentes dispositivos que tienen diferentes anchos de pantalla.
Como ejemplo, consideremos el proceso de desarrollo de un diseño de sitio web que consta de 3 bloques para todos los dispositivos. El diseño que se está desarrollando se verá diferente en diferentes dispositivos (teléfonos inteligentes, tabletas, computadoras portátiles, computadoras personales). Por ejemplo, en los teléfonos inteligentes estos bloques están ubicados verticalmente, pero en una pantalla de computadora personal grande están ubicados horizontalmente. Es decir, nuestro diseño cambiará automáticamente cuando se alcancen los límites de ancho de la ventana del navegador.
Crear un diseño para un dispositivo de pantalla grande
El diseño del sitio para un dispositivo con pantalla grande (ancho >=1200px) consta de tres bloques ubicados horizontalmente, que ocupan todo el ancho del contenedor. El primer bloque tiene la mitad del ancho del contenedor (col-lg-6), el segundo bloque tiene un cuarto del ancho del contenedor (col-lg-3) y el tercer bloque tiene un cuarto del ancho del contenedor (col-lg-3).
Configurar un diseño para un dispositivo de pantalla media
Diseño de sitio web para un dispositivo con pantalla mediana (ancho >=992px y<1200) состоит из трёх блоков, два из которых расположены в одной строке и один в другой. Первый блок имеет ширину равную 8 колонкам Bootstrap (col-md-8), второй блок занимает оставшуюся ширину, т.е. 12 - 8 = 4 колонки (col-md-4). Так как третий блок должен располагаться с новой строки, то необходимо перед ним поместить дополнительный пустой блок с классом.clearfix , который не будет обтекать предыдущие блоки. Также необходимо иметь в виду, что это надо сделать только для экранов со средней шириной. Для этого необходимо к пустому блоку дополнительно добавить класс.visible-md-block . Ширина 3 блока равна ширине контейнера (col-md-12).
Personalice el diseño para dispositivos con tamaños de pantalla pequeños y diminutos
Configuremos el diseño para otros dispositivos de la misma manera. Diseño del sitio web para un dispositivo con una pantalla pequeña (ancho >=768px y<992px) состоит из 3 блоков, первый блок занимает всю ширину контейнера, остальные 2 блока расположены под ним и занимают каждый ширину, равную 6 колонкам Bootstrap.
<div clase="contenedor" > <clase div="fila" > <clase div="col-lg-6 col-md-8" estilo = "alto: 300 px; fondo: verde;"> Bloque No. 1div> <clase div="col-lg-3 col-md-4" estilo = "alto: 100 px; fondo: naranja;"> Bloque No. 2div> <clase div = "clearfix visible-md-bloque" >
