¿Qué es una grilla de arranque? Sistema de bloques · Bootstrap en ruso Google AdWords - creación de grupos

Este tutorial proporciona información sobre el sistema de cuadrícula del marco Bootstrap 3.

El sistema de cuadrícula de Twitter Bootstrap ofrece una forma rápida y sencilla de crear diseños de páginas web. Twitter Bootstrap 3 viene con un sistema de cuadrícula flotante con capacidad de respuesta móvil que escala hasta 12 columnas a medida que aumenta el tamaño de su dispositivo o pantalla. Vamos a ver cómo funciona.

Para alinear y configurar correctamente el relleno interno de la cuadrícula, los bloques con la clase .row deben colocarse dentro de bloques con la clase .container (ancho fijo) o .container-fluid (se ajusta al ancho de la página).

Se deben utilizar bloques con la clase .row para crear grupos horizontales de columnas.

Las clases de cuadrícula predefinidas, como .row y .col-xs-4, le permiten crear rápidamente diseños de cuadrícula. También puede utilizar combinaciones de lenguajes con menos estilos para aumentar la cantidad de tipos de marcado semántico.

Las columnas crean medianil (interrupciones entre el contenido de la columna) mediante el relleno. Este relleno se compensa para la primera y la última columna debido al valor de margen negativo de los bloques con la clase .row.

Las columnas de cuadrícula se crean especificando el número requerido de doce columnas disponibles. Por ejemplo, para tres columnas idénticas necesitas usar tres contenedores con la clase .col-xs-4.

Las clases de malla se aplican a dispositivos cuyo ancho es mayor o igual que las dimensiones de referencia y anulan las clases de malla destinadas a dispositivos más pequeños. Por lo tanto, aplicar cualquier clase .col-md- a un elemento establecerá el estilo no solo para dispositivos medianos, sino también para dispositivos grandes si no se usa la clase .col-lg-.

Twitter Bootstrap 3 incluye clases de cuadrícula predefinidas para crear rápidamente diseños de cuadrícula para diferentes tipos de dispositivos, como teléfonos móviles, tabletas, computadoras de escritorio, etc. Por ejemplo, puede utilizar la clase .col-xs- para crear columnas de cuadrícula para dispositivos muy pequeños, como un teléfono móvil; de la misma manera, class.col-sm- se usa para dispositivos pequeños ~tabletas, class.col-md- para dispositivos medianos ~computadoras y .col-lg- para pantallas de computadora grandes. A continuación se muestran los tipos de diseño del sistema de cuadrícula Bootstrap.

Dispositivos muy pequeños ~ teléfonos ( .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col -xs-6

Móvil, tablet, escritorio (Móvil, tablet, ordenadores). Cree un marcado de tableta aún más dinámico con la clase .col-sm-*, utilizando el ejemplo anterior.

Código de muestra:

.col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-sm-4 .col-xs-6 .col -sm-4 .col-xs-6 .col-sm-4

Envoltura de columnas. Si hay más de 12 columnas en el mismo bloque con la clase .row, cada grupo de columnas adicionales se moverá a una nueva fila como una sola unidad.

Código de muestra:

.col-xs-9 .col-xs-4
Dado que 9 + 4 = 13 > 12, este div de 4 columnas de ancho se envuelve en una nueva línea como una unidad contigua. .col-xs-6
Las columnas siguientes continúan a lo largo de la nueva línea.

Restablecimientos de columnas responsivos. Al utilizar las cuatro cuadrículas disponibles, se encontrará con un problema en el que, en ciertos puntos, las columnas se verán incorrectas debido a diferencias de altura. Para solucionar este problema, utilice una combinación de un bloque .clearfix y clases de utilidades adaptables.

Código de muestra:

.col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3

Columnas compensadas. Mueva las columnas hacia la derecha usando Classes.col-md-offset-* . Estas clases aumentan el margen izquierdo del bloque en * el número de columnas. Por ejemplo, class.col-md-offset-4 moverá el bloque con class.col-md-4 cuatro columnas.

Código de muestra:

.col-md-4 .col-md-4 .col-md-offset-4 .col-md-3 .col-md-offset-3 .col-md-3 .col-md-offset-3 .col -md-6 .col-md-offset-3

Columnas anidadas. Para anidar contenido dentro de la cuadrícula principal, agregue un nuevo bloque con la clase .row y un conjunto de columnas.col-sm-* dentro de la columna.col-sm-* existente. Los bloques anidados con la clase fila deben incluir un conjunto de 12 columnas o menos (no se recomienda utilizar las 12 columnas disponibles).

Código de muestra:

Nivel 1: .col-sm-9 Nivel 2: .col-xs-8 .col-sm-6 Nivel 2: .col-xs-4 .col-sm-6

Orden de columnas. El orden de visualización de las columnas de la cuadrícula integradas se puede cambiar utilizando las clases modificadas .col-md-push-* y .col-md-pull-*.

Código de muestra:

.col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9

Utilice las siguientes clases receptivas para controlar la visibilidad de elementos en dispositivos cuyos tamaños de pantalla se encuentran dentro de un tipo específico. En v3.2.0, las clases .visible-*-* para cada tamaño de control se representan en tres variantes, una para cada valor de propiedad de visualización CSS: en línea, bloque y bloque en línea.

De manera similar, puedes usar las clases de utilidad de ocultación para ocultar elementos en dispositivos específicos:

Puede utilizar las siguientes clases de utilidad para mostrar u ocultar ciertos elementos cuando se imprime una página.

Hola, queridos lectores del blog. En la primera parte del artículo, nos familiarizamos con las capacidades de este marco, aprendimos qué es el diseño responsivo y por qué es tan importante en nuestra era de crecimiento generalizado de la popularidad de varios dispositivos móviles. Allí también examinamos en detalle los problemas de conectar Bootstrap a una página HTML (conectar archivos de estilo, scripts y la biblioteca jQuery).

El artículo de hoy trata sobre el sistema de cuadrícula utilizado en Bootstrap 3. Aprenderá qué tamaños de cuadrícula se pueden usar, cómo se comportarán en dispositivos con diferentes tamaños de pantalla y cómo crear filas y celdas usted mismo basándose en una o más cuadrículas. Todo esto se contará con ejemplos que, espero, mejorarán la percepción.

Bootstrap 3 viene con un sistema de cuadrícula de doce columnas diseñado principalmente para dispositivos móviles. Aquellos. está diseñado principalmente para pantallas pequeñas y, en segundo lugar, para pantallas anchas. La nueva versión de este marco tiene cuatro tamaños de cuadrícula. Toda esta información se puede estudiar en detalle en el sitio web oficial GetBootstrap.com yendo a la pestaña “CSS” del menú superior y seleccionando “Sistema de red” a la derecha.

Allí recibirá una explicación completa de cómo funciona el sistema, consultas de medios relacionadas, etc. La fila de elementos HTML (por ejemplo, anuncios de artículos en la página principal) que desea colocar en la cuadrícula deberá estar rodeada por un contenedor (por ejemplo, encerrado en etiquetas Div) y una clase .row asignada ( la etiqueta de apertura en este caso se verá así).

Bueno, puedes distribuir los elementos dentro de una fila en uno o varios tipos de cuadrículas a la vez especificando el atributo de clase con un valor, por ejemplo, .col-xs-digit (en este caso, solo se permite una cuadrícula ultrapequeña). usado).

Por ejemplo, si necesita obtener tres columnas del mismo tamaño como resultado, entonces debe dividir 12 (el tamaño de la cuadrícula en Bootstrap 3) entre 3 (el número requerido de columnas). Esto significa que para cada elemento HTML dentro de la fila (estos también pueden ser contenedores Div), deberá registrar las mismas clases: . Si necesita columnas de ancho desigual, simplemente deberá cumplir la condición de que los números después de col-xs- en las tres clases deben sumar 12 (por ejemplo, 2-4-6). Pero primero, veamos qué es la "x" en esta entrada y qué significa.

A continuación, en el área "Opciones de cuadrícula", encontrará una explicación de los cuatro tamaños de cuadrícula Bootstrap modernos mencionados anteriormente.

Las últimas tres cuadrículas serán horizontales sólo si el ancho de la pantalla es mayor que el punto en el que se produce el "colapso". Por ejemplo, para una cuadrícula grande en pantallas de menos de 1200 píxeles, ya no será horizontal y se volverá vertical. La página del sitio web oficial GetBootstrap.com que estamos viendo actualmente proporciona ejemplos y explicaciones sobre este asunto. Sin embargo, en mi opinión, todo allí es algo confuso y complicado.

Intentaré explicar todo esto con un ejemplo ya preparado. Solo necesitará copiar el archivo setka.html (para hacer esto, seleccione el elemento "Guardar enlace como..." en el menú contextual). Si abre este archivo directamente en el navegador (haciendo clic en el enlace proporcionado con el botón izquierdo del mouse), nada funcionará porque el marco Bootstrap no se conectará.

Coloque el archivo setka.html descargado en la carpeta Bootstrap, de la que hablamos en . Debería estar al mismo nivel que el archivo index.html que creamos anteriormente.

Ahora abra este archivo setka.html en cualquier navegador que le resulte conveniente y haga algunos experimentos con el tamaño de la ventana de su navegador para ver Bootstrap 3 en acción y comprender cómo funciona el sistema grid. ¿Cuáles? Te lo explicaré ahora.

El ancho de la pantalla de mi monitor es de 1280 píxeles, que es mayor que el punto de ruptura de 1200 píxeles establecido para la cuadrícula grande. ¿Qué vemos como resultado? Algo como esto:

A continuación se muestran cinco ejemplos de diseños de sitios web creados en diferentes tipos de cuadrículas:

De esta manera podemos observar y comparar cómo funcionan estas grillas Bootstrap 3 juntas y cómo funcionan individualmente (usando solo un tipo). Porque Cuando tomé la captura de pantalla anterior, mi navegador estaba maximizado para ocupar toda la pantalla (más de 1200 píxeles de ancho), luego estos cinco ejemplos de diseño de sitio se implementan horizontalmente (las columnas están ubicadas una al lado de la otra a lo ancho de la pantalla). ).

Ahora reduzcamos ligeramente el tamaño de la ventana del navegador para que podamos observar la avería (colapso) que se ha producido.

El texto sobre la fila superior y los prefijos de clase en sus celdas han cambiado (para esto se utilizaron clases de visibilidad, de las que hablaremos más adelante). La cuadrícula del medio ahora se utiliza y todavía se muestra horizontalmente. Al mismo tiempo, la fila inferior (que ilustra el uso de solo una malla grande) se dobló verticalmente, es decir. Los bloques adyacentes ya no se muestran uno al lado del otro en ancho, sino uno debajo del otro (en alto).

Resulta que una cuadrícula grande, en ausencia de influencia externa, se comporta exactamente de esta manera: se pliega verticalmente en todos los dispositivos cuyo tamaño de pantalla tiene menos de 1200 píxeles de ancho. Sin embargo, todas las demás cuadrículas utilizadas en la cuadrícula de ejemplo se muestran horizontalmente. La primera fila utiliza una combinación de cuadrículas, por lo que ahora está controlada por el sistema de cuadrícula mediana (el sistema grande ya no tiene efecto).

Reduzcamos una vez más el ancho de la ventana del navegador para que quede. Se producirá otra avería:

Ahora (según el tamaño de la pantalla) estamos trabajando con una cuadrícula pequeña. De este modo, no sólo la rejilla grande, sino también la mediana se pliegan verticalmente. Bueno, en la primera fila, donde se usa una combinación de cuadrículas, ahora todo está controlado por el pequeño sistema de cuadrícula de Bootstrap. Al mismo tiempo, en el archivo setka.html, la distribución de columnas en esta primera fila también cambia, lo cual no es del todo necesario, pero esto se puede hacer para satisfacer algunas de sus necesidades en términos de diseño (y "one- dos”, sin ningún problema).

Seguimos reduciendo el ancho de la ventana del navegador a valores. Se produce otra avería:

Como resultado, no sólo las cuadrículas grande y mediana se extienden verticalmente a lo largo de la página, sino que también se une a ellas la cuadrícula pequeña. La única horizontal que queda es una cuadrícula muy pequeña, que permanece así (como acabamos de ver) bajo cualquier circunstancia. Incluso si reduce la página a un ancho súper pequeño, la cuadrícula súper pequeña no se convertirá en una cuadrícula vertical (incluso cuando el contenido no quepa en las celdas).

Este ejemplo (archivo setka.html) está hecho exactamente. Hablaremos en detalle sobre cómo funciona todo allí. Pero por ahora quiero llamar su atención sólo sobre algunos matices que puede notar en el código fuente del archivo setka.html.

En la parte superior, se han agregado estilos para el diseño visual de diseños (sangrías, colores de cuadrícula, etc.), que no tienen ningún significado especial. Si se desplaza hacia abajo en el código fuente, notará este bloque:

lg Se utiliza una cuadrícula grande para pantallas de más de 1200 px. md Utiliza la cuadrícula del medio para pantallas de menos de 1200 px pero de más de 992 px. sm Utiliza una cuadrícula pequeña para pantallas de menos de 992 px pero de más de 768 px. xs Utiliza una cuadrícula ultrapequeña para tamaños de pantalla inferiores a 768 px, que siempre permanece horizontal.

Hay cuatro contenedores a los que se asignan diferentes clases (leer más). Permiten mostrar contenido específico en función de consultas de medios correspondientes a diferentes tamaños de cuadrícula. ¿Cómo funciona? Los cuatro encabezados se cargan en el navegador (si observa el código fuente), pero solo se muestra un encabezado dependiendo de la resolución de pantalla actual o del tamaño de la ventana del navegador.

.col-lg-4 .col-md-1 .col-sm-5 .col-xs-5 .col-lg-4 .col-md-5 .col-sm-1 .col-xs-6 .col -lg-4 .col-md-6 .col-sm-6 .col-xs-1

Esta es una cuadrícula maestra, donde se combinan los cuatro sistemas de cuadrícula (puede ver esto en los atributos de celda como class="col-lg-4 col-md-1 col-sm-5 col-xs-5", que enumera la clase antepone las cuatro cuadrículas). La fila en sí, como se mencionó anteriormente, se define colocando todos sus elementos constituyentes en un contenedor con clase = "fila" (en nuestro ejemplo, este es un contenedor basado en div).

Tenga en cuenta que nuestra cuadrícula maestra consta de tres celdas (columnas) y si suma todos los números asignados a cada una de las columnas, por ejemplo, para los prefijos de la cuadrícula Bootstrap ultrapequeña (col-xs), obtendrá un total de 12. Entonces lo mismo será cierto para los números después de los prefijos de todos los demás sistemas. Esto es comprensible, porque este marco, como se mencionó anteriormente, tiene una estructura de 12 columnas, es decir. Horizontalmente, todo el espacio disponible para el diseño se divide en doce columnas del mismo ancho (invisibles en el sitio; son similares a las celdas de los cuadernos escolares).

Bueno, usando los números después de los prefijos de clase, simplemente estableces las proporciones para cada una de las celdas (columnas reales) de tu diseño. Aquellos. las proporciones podrían ser, por ejemplo, así:

En general, puede utilizar uno, dos, tres o los cuatro sistemas de cuadrícula en un diseño (fila). Todo depende de tus preferencias de diseño y de lo que intentas lograr con tu página web (cómo debería verse en diferentes resoluciones de pantalla). El sitio web oficial proporciona un ejemplo:

Ahora, para una mejor comprensión, creemos una página HTML que se parezca un poco a una página web real (con un encabezado, texto y contenido gráfico, y un pie de página) y diseñémosla usando el sistema de cuadrícula Bootstrap 3.

Más precisamente, crearé la plantilla yo mismo y solo les ofreceré, por analogía con el ejemplo anterior, descargar el archivo sait.html (para ello, seleccione el elemento "Guardar como..." del menú contextual). ), para que luego juntos podamos agregar la información necesaria a este “pez” clases de bootstrap. También deberá colocarse en la carpeta Bootstrap en el mismo nivel que el archivo index.html que creamos en el primer artículo (y setka.html, con el que trabajamos un poco más arriba).

Si observa el código fuente del archivo sait.html, verá que ya incluye Bootstrap y jquery, y también contenido agregado para simular la apariencia de una página web promedio. Sí, también necesitarás una carpeta con las imágenes utilizadas en esta página. Puede descargarlo desde aquí: img.zip. Simplemente descomprima el archivo y coloque la carpeta img (asegúrese de que contenga archivos de imagen y no otra carpeta img) en su carpeta Bootstrap al mismo nivel que el archivo sait.html. La estructura se verá así:

Ahora (desde la carpeta Bootstrap) en el navegador verá la página web que utilicé como ejemplo. Lo que llama la atención es que todos los bloques de la página están ubicados uno debajo del otro, y esto interfiere en gran medida con la correcta percepción visual de la información. Sería lógico colocarlos en columnas para que cuando el tamaño de la pantalla disminuya, el diseño "responda" a esto, cambiando el número de columnas para facilitar la visualización en dispositivos con diferentes anchos de área visible.

En el código fuente HTML del archivo sait.html solía mostrar los límites de las filas (rows) que propuse, para lo cual configuraremos la visualización de columnas usando algún tipo de sistema de grid Bootstrap. Solo hay cuatro filas (están numeradas en la captura de pantalla anterior): encabezado (encabezado con el nombre y el logotipo del sitio), título y descripción de la página, parte del contenido (contenido principal que consta de anuncios de cuatro artículos) y pie de página.

Ahora necesitaremos agregar el marcado Bootstrap al archivo sait.html, que. Para crear filas, como recordarás, bastará con encerrar todo su contenido en un contenedor (la mayoría de las veces son etiquetas Div, aunque puede haber otras) y agregarle la clase class="row". Para la primera fila se verá así:

sitio web

Se debe hacer lo mismo con todas las demás filas (líneas): coloque la etiqueta de apertura al comienzo de la fila futura y la etiqueta al final. No mostraré el código completo del archivo sait.html con los cambios realizados, porque es demasiado voluminoso.

Ahora comencemos a formar celdas en aquellas filas (filas) donde tiene sentido hacerlo. Sería bastante lógico colocar los anuncios de artículos (de la tercera fila) en cuatro columnas y, al reducir el ancho de la pantalla, dejar que estas cuatro columnas se conviertan en dos. ¿Cómo hacerlo? Echemos un vistazo.

Entonces, en Bootstrap 3 hay una cuadrícula de 12 columnas, de la que hablamos anteriormente. Dado que decidimos hacer cuatro columnas con anuncios, sería lógico hacerlas iguales en ancho, lo que significa que cada una de las columnas tendrá tres celdas (celdas) de ancho en nuestro sistema de cuadrícula invisible (independientemente del tamaño de cuadrícula que elijamos - ultra -pequeña, pequeña, mediana o grande).

¿Qué malla debo elegir para el trabajo? Tomemos primero el promedio, como una opción de compromiso. En este caso, necesitarás agregar la clase “col-md-3” - . Te mostraré el código de una celda como ejemplo, para no saturar el artículo:

Después de guardar los cambios que has realizado, verás que nuestra página web ha adquirido un aspecto mucho más usable:

Es cierto que cuando la ventana del navegador se reduce al ancho del punto de ruptura más pequeño (en el caso de la cuadrícula promedio que usamos, será de 992 píxeles), todos los anuncios se alinearán nuevamente en una columna, lo cual no es bueno, porque la usabilidad en este caso es reducida (una resolución de casi 1000 píxeles permite organizar la información de forma más densa). Para corregir esta situación, puedes agregar otra cuadrícula del arsenal de Bootstrap para las mismas celdas con anuncios. ¿Cómo hacerlo? Echemos un vistazo.

Usemos los prefijos "col-xs-6" para el nombre de la clase en cada celda de anuncio (el resultado será una clase compuesta class="col-md-3 col-sm-6"). Se verá así (usando el ejemplo de una celda):

Texto del anuncio.

Como puede ver, aquí violamos la regla recientemente anunciada de que los números después de los prefijos de una cuadrícula en todas las celdas deben sumar 12. Obtuvimos 24 (cuatro por seis). Pero hicimos esto a propósito para lograr el resultado deseado: obtener dos columnas en lugar de cuatro al pasar el punto de ruptura del sistema de cuadrícula Bootstrap promedio (esto es 992 píxeles). Aquellos. Las celdas estarán ubicadas en dos filas, dos en cada una:

Porque Elegimos un sistema de cuadrícula ultrapequeño, luego, con una reducción adicional en el ancho de la ventana del navegador, la disposición vertical de los bloques con anuncios uno debajo del otro (colocación en una columna) no sucederá, porque este sistema siempre permanece horizontal.

Si desea que cuatro columnas se conviertan en dos a medida que el ancho de la pantalla disminuye, y luego en una columna, entonces en lugar de "col-xs-6" debe usar un sistema de cuadrícula pequeño usando "col-sm-6":

Luego, cuando reduce el ancho de la ventana del navegador por debajo de 768 píxeles, verá un desglose en el que dos columnas con anuncios se convierten en una. Simplemente experimenta y siente la diferencia.

Experimentemos un poco más y probémoslo, en el que esencialmente hay dos celdas potenciales: el nombre del sitio con una descripción y también el logotipo. De hecho, los posicionaremos. Esta vez usemos una cuadrícula más grande con "col-lg-6" para crear dos columnas iguales.

sitio web

Todo sobre la creación de sitios web, blogs, foros, tiendas online, su promoción en buscadores y ganar dinero en el sitio.

Es cierto que cuando se utiliza una cuadrícula grande, la avería se produce en resoluciones de pantalla bastante grandes (ventanas del navegador, en nuestro caso, porque allí estamos simulando dispositivos con diferentes anchos de pantalla). Después de lo cual las celdas se pliegan verticalmente. Para evitar esto, agregaremos otra cuadrícula Bootstrap 3 para la primera fila. Creo que un sistema de cuadrícula pequeño (prefijo de clase col-sm) sería adecuado. Entonces el código se verá así:

sitio web

Todo sobre la creación de sitios web, blogs, foros, tiendas online, su promoción en buscadores y ganar dinero en el sitio.

Sin embargo, no hice las mismas celdas con el nombre del sitio y el logotipo para la cuadrícula pequeña, porque el logotipo es significativamente más estrecho (en el sentido de estrecho) que el nombre con la descripción. Con un ancho de pantalla menor, no sería lógico asignarles celdas iguales. Es por eso que cuando activé el pequeño sistema de cuadrícula de Bootstrap hice la primera columna con el nombre y la descripción del sitio dos veces más grande que la columna con el logo.

Como resultado, cuando se reduce la ventana del navegador, estas celdas se acercarán hasta el punto de ruptura del pequeño sistema de cuadrícula Bootstrap, lo que ocurrirá cuando el ancho sea inferior a 768 píxeles, y luego ambas celdas se ubicarán una debajo de la otra. .

Probablemente hayas notado que el texto de la página se pega al borde izquierdo de la pantalla, lo que provoca . Puede agregarlo a la etiqueta del cuerpo para corregir esta situación, lo que lo permitirá. Pero puedes resolver todo usando las herramientas estándar de Bootstrap 3.

Para hacer esto, deberá empaquetar todo el contenido de la página web (todo lo contenido en las etiquetas Body) en un contenedor Div con la clase del mismo nombre: . Aquellos. coloque esta etiqueta inmediatamente después de la etiqueta Body de apertura y ciérrela antes de llamar a los scripts que se encuentran inmediatamente antes de la etiqueta Body de cierre. Después de esto, el texto ya no se apoyará en la ventana del navegador.

También puede ver que las imágenes de los anuncios se superponen entre sí a medida que disminuye el ancho de la pantalla. El caso es que todavía “no responden”, pero lo haremos en los siguientes artículos de esta sección. También continuaremos analizando cómo trabajar con el sistema de grid Bootstrap 3, aprenderemos a diseñar botones, tablas, formularios HTML, crear menús desplegables, navegación y mucho más. Por lo tanto, no cambies y mantente atento a nuevas publicaciones.

Continuará >>> (Puedes suscribirte a la newsletter para no perdértela)

Y aquí está la continuación: (pero aún así te suscribes, habrá mucho más interesante y útil).

Twitter Bootstrap Grid proporciona una forma rápida y sencilla de crear diseños de páginas web. A diferencia de la cuadrícula del sistema anterior, que está fijada de forma predeterminada, la nueva versión de Twitter Bootstrap 3 presenta un diseño móvil responsivo que se expande a 12 columnas a medida que aumenta el tamaño del dispositivo o el tipo de pantalla.

Bootstrap 3 incluye clases de cuadrícula predefinidas para crear rápidamente diseños para diferentes tipos de dispositivos: teléfonos celulares, tabletas, computadoras de escritorio, etc. Por ejemplo, puede utilizar la clase .col-xs- para crear una cuadrícula de columnas para dispositivos pequeños adicionales, como teléfonos móviles. Class.col-sm- para dispositivos de pantalla pequeña como PDA. Class.col-MD- para dispositivos de tamaño mediano como computadoras de escritorio y .col-lg- para pantallas de escritorio grandes. La siguiente tabla resume algunas de las características clave del nuevo sistema de red.

La tabla anterior muestra una cosa importante: al aplicar cualquier clase .col-sm, el estilo del elemento se verá afectado no solo en dispositivos pequeños como tabletas, sino también en dispositivos medianos y grandes con un tamaño de pantalla mayor o igual a 768px. .si no hay clases .col-md- y .col-lg-. Asimismo, .col-md-class afectará no solo al estilo de los elementos en dispositivos medianos, sino también en dispositivos grandes si no se especifica .col-lg-class.

Con el nuevo Twitter Bootstrap 3, la cuadrícula se puede manipular fácilmente para ver cómo aparecerá el diseño de su sitio web en diferentes tipos de dispositivos que tienen diferentes tamaños de pantalla. Veamos el siguiente ejemplo.

En la ilustración anterior, hay un total de 12 columnas de contenido en todos los dispositivos, pero su ubicación varía según el tamaño de la pantalla del dispositivo. En un dispositivo móvil, el diseño se muestra como una cuadrícula que tiene 1 columna y 12 filas colocadas una encima de la otra, mientras que en una tableta se muestra como una cuadrícula que tiene 2 columnas y 6 filas. De manera similar, en dispositivos de tamaño de pantalla mediano, como computadoras portátiles y de escritorio, se proporciona en un diseño que tiene 3 columnas y 4 filas. Finalmente, en dispositivos con pantallas más grandes, el diseño es una cuadrícula que tiene 4 columnas y 3 filas.

Ahora surge la pregunta de cómo podemos crear diseños tan responsivos usando Twitter Bootstrap. Comencemos con dispositivos de tamaño mediano: una computadora portátil o una computadora de escritorio normal. Nuestro diseño tiene 3 columnas y 4 filas (es decir, un diseño de cuadrícula de 3x4). Introduzca el siguiente marcado:

Si vemos el ejemplo anterior en una computadora portátil o de escritorio que tiene un ancho de pantalla o ventana gráfica mayor o igual a 992 px y menor a 1200 px, veremos 4 filas donde cada fila tiene 3 columnas iguales.

En el ejemplo anterior hay un problema importante de alineación. Si la altura de una columna es mayor que la de otra, entonces no se ajustará correctamente a la otra y se romperá la integridad. Para solucionar este problema, utilice la clase .clearfix y las clases de utilidades adaptables.

Dado que la cuadrícula tiene 12 columnas de forma predeterminada y en nuestro diseño la suma de cada tres columnas (es decir, col-md-*) es 12, borramos las columnas cada tres apariciones. En cualquier otro caso donde las columnas col-md-* sean diferentes, debemos usar .clearfix después de la columna, lo que forma una cuadrícula completa de 12 columnas. La clase de utilidad adaptativa .visible-md-block hace que la clase .clearfix solo sea efectiva en dispositivos de tamaño mediano y esté oculta en otros dispositivos.

Consejo: Primero debe seleccionar un dispositivo de destino principal y crear un diseño para ese dispositivo, luego agregar clases para que el diseño responda a otros dispositivos.

Ahora es el momento de personalizar nuestro diseño para otros dispositivos. Configurémoslo para una tableta. Dado que nuestro diseño se muestra como una cuadrícula de 2x6 en la tableta (es decir, 2 columnas y 6 filas), debemos agregar la clase .col-sm-6 a cada columna.

Ahora bien, dado que la suma de cada dos columnas, es decir col-sm-* es 12, después de cada segunda columna, las siguientes están debajo.

Después de realizar la limpieza para dispositivos pequeños, nuestro código final se verá así:

De forma similar, podemos personalizar la apariencia para dispositivos de gran tamaño, como por ejemplo la pantalla del escritorio de un ordenador personal.

Consejo: Según el código anterior, no es necesario configurar el diseño para dispositivos pequeños adicionales, como teléfonos móviles. Después de todo, las columnas de dispositivos pequeños adicionales siempre son horizontales y aparecen como una sola columna en el diseño de cuadrícula predeterminado.

Puede utilizar las siguientes clases receptivas para controlar la visibilidad de los elementos en algunos dispositivos cuando el tamaño de la pantalla se reduce desde un cierto rango.

En la versión del marco v3.2.0, la clase.visible-*-* para cada punto viene en tres variaciones, una para cada visualización CSS: en línea, bloque y bloque en línea.

Consejo: También puedes combinar estas clases para que los elementos sean visibles en múltiples dispositivos. Por ejemplo, puede aplicar las clases .visible-xs-* y .visible-md-* en cualquier elemento para hacerlo visible en dispositivos adicionales pequeños y medianos.

Este elemento aparece solo en dispositivos pequeños adicionales.

Este elemento aparece sólo en dispositivos pequeños.

Este elemento solo se muestra en dispositivos medianos.

Este elemento solo es visible en dispositivos más grandes.

De manera similar, puede utilizar estas clases de utilidades ocultas para ocultar elementos en algunos dispositivos.

Consejo: También puedes combinar estas clases para ocultar elementos en varios dispositivos. Por ejemplo, puede aplicar las clases .hidden-xs y .hidden-md en cualquier elemento para ocultarlo en dispositivos pequeños y medianos adicionales.

Este elemento está oculto sólo en dispositivos pequeños adicionales.

Este elemento está oculto sólo en dispositivos pequeños.

Este elemento está oculto sólo en dispositivos medianos.

Este elemento está oculto sólo en dispositivos grandes.

Además de las clases receptivas habituales, puede utilizar las siguientes clases de utilidad para mostrar u ocultar ciertos elementos para imprimir en dispositivos.

01.06.2016

¡Hola a todos!
Seguimos aprendiendo los conceptos básicos de "bootstrap 3". Es hora de familiarizarse con el concepto de cuadrícula en "bootstrap 3".
Usando una cuadrícula, puede crear su primer marco de sitio web responsivo (página web).
Entonces, la cuadrícula Bootstrap consta de filas y columnas.

Antes de crear columnas, debes escribir una línea. Para hacer esto, simplemente agregue una etiqueta div con la clase "fila".

...habrá oradores aquí...

Entonces, primero se escribe una línea y las columnas ya están construidas en la línea.

1. Crea una línea:

... las columnas estarán aquí... ... las columnas estarán aquí...

2. Cree columnas (cuadrícula):

La cuadrícula Bootstrap consta de 12 columnas de igual ancho.
Si es necesario, las columnas se pueden combinar y colocar en la posición deseada.

Para crear columnas, necesita escribir una clase de "fila" dentro
"col-(*1)-(*2)".
Donde (*1) indicamos para qué grupos de dispositivos necesitas realizar ( ver tabla 1 ).
Donde (*2) indicamos el número (número de columnas)
(ver tabla 2 ).

(mesa 1) Tabla de marcado Bootstrap para diferentes grupos de dispositivos

Miremos este punto con un ejemplo.
Mirando la tabla, podemos crear columnas (construir una cuadrícula) para diferentes grupos de dispositivos (teléfonos móviles, tabletas, PC, etc.).

Por ejemplo:

sitio de blogs

Así indicamos para qué dispositivos queremos crear altavoces.

Ahora averigüemos qué es (*2). Como ya hablé de ello arriba, este es un número que representa el número de columnas.
(ver tabla 2 ).

(mesa 2) Diseño de cuadrícula Bootstrap3

En la tabla puede ver que la cuadrícula Bootstrap consta de 12 columnas de igual ancho.
Para especificar 12 columnas idénticas para todos los dispositivos, debe reemplazar (*2) con un número apropiado. Pero recuerda que el total debe ser 12.

Veamos un ejemplo:

tabla de diseño Bootstrap del sitio web del blog

Para que entiendas las palabras que dije de que la cantidad total debe ser igual a 12, hagamos un cálculo aritmético.
Nos fijamos en las líneas nº 2 y nº 3.

○ col-lg-12 y col-lg-12. (tamaño de pantalla ≥1200px).

Resultado:

○ col-md-8 y col-md-4. (tamaño de pantalla ≥992px).
Habrá dos columnas en la pantalla, ya que 8 + 4 = 12 (justo la cantidad exacta que compone la cuadrícula).
El lado izquierdo combinará 8 columnas y el lado derecho 4.

Resultado:

○ col-sm-6 y col-sm-6 (tamaño de pantalla ≥768px).
Habrá dos columnas en la pantalla, ya que 6 + 6 = 12 (justo la cantidad exacta que compone la cuadrícula).
El lado izquierdo combinará 6 columnas y el derecho 6.

Resultado:

○ col-xs-12 y col-xs-12 (tamaño de pantalla .col-lg-12, .col-lg-3, .col-lg-4, .col-lg-8, .col-md-12, .col-md-3, .col-md-4, .col-md-8, .col-sm-12, .col-sm-3, .col-sm-4, .col-sm-8, . col-xs-12 ( borde:1px sólido #ccc; altura:60px; ) Bloque 1 Bloque 2 Bloque 3 Bloque 4 Contenido del menú

Podrás ver el resultado y al mismo tiempo comprobar desde tu teléfono, tableta o PC cómo se abrirá el diseño creado.

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.

La cuadrícula Bootstrap consta de elementos "constructivos". Los principales son contenedores contenedores, filas, bloques responsivos 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.

El contenedor contenedor es el elemento "constructivo" de la cuadrícula 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 fijo o fluido.

El 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:

= 768px y = 992px y ... Al desarrollar el diseño de un sitio web, generalmente no se utiliza el anidamiento de contenedores contenedores Bootstrap dentro de otros. 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-?-?). Los bloques responsivos son elementos de la cuadrícula Bootstrap que están configurados en una o más clases col-?-?. . Estos bloques son los principales ladrillos de “construcción”, forman la estructura necesaria. El ancho del bloque adaptativo se establece junto 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 (de 1 a 12 de forma predeterminada) determina qué porcentaje del ancho del elemento principal debe tener el 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: 1 cuadra... 2 cuadras... 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): 1 cuadra... 2 cuadras... 3 cuadras... 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: 1 cuadra... 2 cuadra... 3 cuadra... 4 cuadra... Creemos un diseño de 3 bloques (3 x 2): 1 cuadra... 2 cuadra... 3-1 cuadra... 3-2 cuadra... 3-3 cuadra... 3-4 cuadra... 3-5 cuadra... 3-6 cuadra. ..4 cuadras... 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): 1 cuadra... 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. Descripción de clase ¿visible-xs-? Hace que el elemento sea visible solo en dispositivos con una pantalla xs muy pequeña (ancho de la ventana gráfica =768px y =992px y =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 hogar ventana 7 ¿Qué es una grilla de arranque? Sistema de bloques · Bootstrap en ruso Google AdWords - creación de grupos Publicaciones relacionadas Plantillas y editores de plantillas para newsletters por correo electrónico Descargar carta de correo electrónico adaptable en html Sistema de bloques · Bootstrap en ruso Google AdWords - creación de grupos Puertos antiguos entre Escila y Caribdis o el Remolino Hipebóreo El plan de Petrodvorets. Fuentes de Peterhof. Horario de atención de Peterhof