Bootstrap 4 con formación de editor. Clases de orden de elementos
Un artículo en el que analizaremos la cuadrícula Bootstrap 4, que se utiliza para crear diseños de sitios web responsivos.
Propósito de la cuadrículaEl marco de cuadrícula Bootstrap 4 está diseñado para crear diseños de sitios web responsivos.
La cuadrícula Bootstrap 4 se basa en CSS Flexbox y consultas de medios CSS. Estudiarlos le permitirá comprender con más detalle cómo funciona la cuadrícula Bootstrap 4.
Un diseño adaptativo es un diseño que puede cambiar su apariencia dependiendo del ancho del área principal (ventana gráfica) del navegador. Esto significa que en algunos anchos de ventana gráfica el diseño responsivo puede verse de una manera, pero en otros puede verse completamente diferente.
En Bootstrap 4, el cambio de apariencia del diseño se implementa mediante consultas de medios. Cada solicitud de medios en Bootstrap se basa en el ancho mínimo de la ventana gráfica del navegador (punto de interrupción, punto de interrupción, nombre del dispositivo).
El marco Bootstrap 4 tiene 5 puntos de interrupción o nombres de dispositivos (sin etiquetar, sm, md, lg, xl) y, por lo tanto, le permite crear un diseño que puede verse diferente en cada uno de ellos.
En Bootstrap 4, en comparación con Bootstrap 3, se ha cambiado la cantidad de puntos de interrupción. En Bootstrap 3 había cuatro: xs, sm, md y lg.
Elementos de cuadrículaLa grilla Bootstrap 4 consta de los siguientes elementos:
- Envases de envases (contenedor y contenedor-fluido);
- Filas (fila);
- Bloques adaptativos (col).
Un contenedor contenedor es un elemento de cuadrícula Bootstrap 4 a partir del cual comienza la creación de una página responsiva o un diseño de bloque. Otros elementos de la cuadrícula (filas y bloques adaptativos) deben colocarse dentro de ella.
Bootstrap 4 tiene 2 tipos de contenedores: responsivo-fijo y responsivo-fluido.
Marcado HTML de un contenedor fijo responsivo:
...
Marcado HTML del contenedor de caucho responsivo:
...
El primer contenedor (fijo y responsivo) se utiliza cuando necesita crear un diseño con un ancho que debe permanecer constante dentro de un determinado ancho de ventana gráfica del navegador.
La dependencia del ancho de un contenedor fijo adaptativo del ancho de la ventana gráfica del navegador se muestra en la tabla:
Esto significa que un contenedor fijo adaptativo tendrá:
- 100% de ancho para un ancho de ventana gráfica de hasta 576 px;
- 540 px con ancho de ventana gráfica de 576 a 768 px;
- 720 px con ancho de ventana gráfica de 768 a 992 px, etc.
En la dirección horizontal, el contenedor de respuesta fija se coloca centrado, esto se hace en bootstrap.css a través de las propiedades CSS margin-left: auto y margin-right: auto .
El segundo contenedor (caucho responsivo) se utiliza cuando necesita crear un diseño completamente flexible de una página o algún bloque. Este contenedor tiene un ancho del 100% para cualquier ancho de ventana gráfica.
Además, los contenedores envolventes (contenedor y contenedor de fluido) también tienen un relleno interno a la izquierda y a la derecha de 15 px. La configuración del relleno para envolver contenedores se realiza en el archivo CSS Bootstrap 4 usando las propiedades padding-left: 15px y padding-right: 15px.
Al crear un diseño utilizando la cuadrícula Bootstrap 4, no coloque contenedores contenedor dentro de otros.
FilasUna fila es un elemento de cuadrícula especial (fila) que se utiliza al crear un diseño en los siguientes casos:
- entre el contenedor y los bloques adaptativos que deben colocarse en él;
- entre uno y otros bloques adaptativos, que deben colocarse en el primer bloque adaptativo.
Marcado HTML de fila:
...
A diferencia de Bootstrap 3, en el que la fila actuaba solo para compensar el relleno interno izquierdo y derecho de los contenedores envolventes o bloques responsivos, en Bootstrap 4 juega un papel muy importante. Esto se debe al hecho de que esta cuadrícula está construida en CSS Flexbox. En esta grilla, actúa como un contenedor flexible para elementos flexibles (bloques adaptativos). Aquellos. Si usa bloques adaptativos fuera de la fila, no funcionarán. En Bootstrap 4, los bloques responsivos deben estar en un bloque con la clase fila.
La compensación del relleno interno de los márgenes se realiza de la misma manera que en Bootstrap 3, debido a los márgenes izquierdo y derecho negativos iguales a 15px (margen izquierdo: -15px y margen derecho: -15px).
Un ejemplo de cómo se compensa el relleno de campo:
contenedor (+15px) -> fila (-15px) -> columna (+15px) -> contenido contenedor-fluido (+15px) -> fila (-15px) -> columna (+15px) -> fila (-15px) -> columna (+15px) -> contenido
Como resultado, el margen desde los bordes izquierdo y derecho del contenedor envolvente hasta el contenido siempre será de 15 píxeles.
Además, los bloques adaptativos que no están relacionados lógicamente entre sí no tienen que colocarse en una fila dentro del marco de algún tipo de contenedor contenedor u otro bloque adaptativo. La forma más correcta es dividirlos en grupos lógicos separados y colocar cada uno de ellos en una fila separada.
Por ejemplo:
... … … … ...
Bloques adaptativosLos bloques adaptativos son los componentes principales de un diseño responsivo; determinarán cómo se verá el diseño de la página web en diferentes puntos de control (sin símbolo, sm, md, lg y xl).
Crear un bloque adaptativo es muy simple: agregando una o más clases col-?-? al elemento HTML requerido.
En la clase col-?-?>, en lugar del primer signo de interrogación, se indica el nombre del punto de control: sin designación, sm, md, lg o xl. En lugar del segundo signo de interrogación, se indica el ancho del bloque adaptativo que debería tener en el punto de control especificado. El ancho del bloque responsivo se especifica en forma relativa utilizando un número del 1 al 12 (columnas Bootstrap).
Este número determina qué parte del ancho ocupará el bloque adaptativo en el punto de control especificado respecto del ancho del bloque principal, es decir, fila. El ancho de fila en términos numéricos (columnas Bootstrap) es 12.
Por ejemplo, un bloque con clase col-md-4 en el punto de control md ocupará 4/12 del ancho de la fila, es decir 33,3% (es decir, 4/12*100% = 33,3%).
Los bloques adaptables, así como los contenedores, tienen un relleno de 15 píxeles a la izquierda y a la derecha. Estos rellenos para bloques adaptativos del marco Bootstrap 4 se configuran utilizando las propiedades CSS padding-left: 15px y padding-right: 15px.
Los bloques adaptativos deben colocarse en una fila. Aquellos. Cualquier bloque adaptativo debe tener un bloque con una fila de clase como padre.
Por ejemplo, considere qué tan ancho será el siguiente bloque responsivo en cada dispositivo:
...
Este bloque adaptativo tendrá:
- hasta sm (por xs) un ancho igual a 12 columnas Bootstrap (es decir, 12/12*100%=100% del ancho de la fila);
- en un dispositivo sm, un ancho igual a 9 columnas Bootstrap (es decir, 9/12*100%=75% del ancho de la fila);
- en un dispositivo md, un ancho igual a 7 columnas Bootstrap (es decir, 7/12*100%=58,3% del ancho de la fila);
- en un dispositivo LG, un ancho igual a 5 columnas Bootstrap (es decir, 5/12*100%=41,6% del ancho de la fila);
- en un dispositivo xl, un ancho igual a 3 columnas Bootstrap (es decir, 3/12*100%=25% del ancho de la fila).
Además, al especificar el ancho del bloque adaptativo para algún punto de control, se aplicará no solo a este punto, sino también a todos los siguientes, si no se especifican.
Se han agregado clases especiales col, col-sm, col-md, col-lg, col-xl, col-auto, col-sm-auto, col-md-auto, col-lg-auto y col-xl. Bootstrap 4 cuadrícula -auto.
El primer grupo de clases (col, col-sm, col-md, col-lg, col-xl) está destinado a crear bloques adaptativos, cuyo ancho dependerá del espacio libre de la línea. El ancho desocupado (espacio libre) de la línea se distribuye uniformemente entre todos esos bloques. Además, estos bloques adaptativos tienen un ancho cero antes de asignar espacio de línea libre (de forma predeterminada).
Veamos algunos ejemplos.
1. Crea 5 bloques adaptativos con el mismo ancho en una fila.
1/5 2/5 3/5 4/5 5/5
Cálculo de ancho:
- espacio de línea libre: 100% (ya que su ancho es 0);
- el ancho de cada bloque adaptativo es 20% (100%/5);
2. El ancho de los bloques con clase col si hay un bloque adaptativo con el número de columnas en la línea.
? 7 columnas? ?
Cálculo de ancho:
- espacio de línea libre: 41,67% ((12-7)/12*100%);
- el ancho de cada bloque adaptativo, excepto col-7, es 13,89% (41,67%/3).
En algunas versiones de los navegadores Safari hay un error al utilizar dicho marcado; se puede dividir en varias líneas;
Hay 2 formas de solucionar este problema:
- configurando los bloques adaptables border.col (borde: 1px sólido transparente;)
- configurando la propiedad CSS de los bloques receptivos flex-basis .col (flex: 1 0 20%;)
Además, la cuadrícula Bootstrap 4 le permite colocar bloques receptivos sin especificar el número de columnas en varias líneas.
... ... ... ...
Esta acción se lleva a cabo agregando un elemento div vacío con clase w-100 al marcado antes del bloque adaptativo, que debe comenzar con una nueva línea.
Si esta acción necesita usarse solo para algunos puntos de control, entonces también debe agregarle clases de utilidad responsivas Bootstrap 4 (la clase w-100).
En este ejemplo, los bloques adaptativos se transferirán a una nueva línea solo en dispositivos con una ventana gráfica pequeña o pequeña.
... ... ... ...
El segundo grupo de clases (col-auto, col-sm-auto, col-md-auto, col-lg-auto y col-xl-auto) está diseñado para crear bloques adaptativos, cuyo ancho se determinará según su contenido.
Por ejemplo:
(1) (2) - el ancho en los puntos de control md, lg y xl se determinará en función del contenido (3)
Como resultado:
- en xs y sm los bloques adaptativos se ubicarán verticalmente (uno debajo del otro) y ocuparán todo el ancho de la fila;
- en md, el bloque responsivo 2 tendrá el ancho necesario para mostrar su contenido; si el bloque 2 no ocupa todo el ancho de la fila, entonces los bloques adaptativos 1 y 3 lo dividirán en partes iguales entre ellos; si el bloque 2 ocupa todo el ancho de la línea, entonces la imagen será la misma que en los puntos de control xs y sm;
- en lg y xl, el bloque responsivo 2 tendrá el ancho requerido para mostrar su contenido; si el bloque 2 no ocupa todo el ancho de la fila, entonces el bloque 3 ocupará un ancho igual a 2 columnas Bootstrap y el bloque 1 ocupará todo el ancho restante de la fila; Si el bloque 2 ocupa todo el ancho de la fila, entonces el marcado será el mismo que en xs y sm, solo el bloque 3 en 3 líneas tendrá un ancho igual a 2 columnas Bootstrap.
De forma predeterminada, los bloques adaptativos de una fila están organizados en líneas horizontales. Dentro de la línea horizontal, los bloques adaptativos se alinean secuencialmente de izquierda a derecha. Los bloques adaptativos con un número total de columnas de no más de 12 pueden caber en una línea horizontal. Los bloques adaptativos que no caben en la línea actual pasan a la siguiente.
(1)
(2)
(3)
(4)
Veamos otro ejemplo en el que los bloques adaptativos tienen diferentes anchos en diferentes puntos de control:
El principio básico del diseño.
El principio básico del diseño de una página web utilizando la cuadrícula Bootstrap 4 es anidar algunos bloques adaptativos dentro de otros.
Al mismo tiempo, el ancho de los bloques adaptativos es siempre un valor relativo, que se establece en las columnas Bootstrap y depende únicamente del ancho del padre, es decir. fila.
El contenido de la página web sólo debe colocarse en bloques responsivos.
Por ejemplo, en el diseño existente, es decir, en el bloque adaptativo col-8, agregaremos 2 bloques más:
... ...
Para hacer esto, primero debe colocar una fila (contenedor para bloques adaptativos) en el bloque col-8:
... ... Bootstrap 4: insertar una fila en el contenido de un bloque responsivo col-8 
Después de eso, agregue 2 bloques adaptativos seguidos:
... ... ... Bootstrap 4: insertar bloques receptivos en una fila 
La alineación de bloques adaptativos en las direcciones horizontal y vertical se realiza en Bootstrap 4 utilizando clases flexibles de utilidad.
Alineación vertical de bloques adaptativos.La alineación vertical de bloques adaptativos dentro de una línea de fila se realiza utilizando una de las siguientes clases, que además debe agregarse a la fila:
- align-items-start (relativo al inicio de la línea);
- alinear-elementos-centro(centro);
- align-items-end (relativo al final).
Por ejemplo, alineemos todos los bloques adaptativos con el centro de la línea de la fila:
1/2 2/2
De forma predeterminada, los elementos responsivos ocupan toda la altura de la línea de fila en la que se encuentran.
La alineación vertical de un bloque adaptativo específico dentro de una línea se puede realizar mediante una de las siguientes clases:
- align-self-start (relativo al inicio de la línea);
- alinear-autocentrar (centro);
- align-self-end (relativo al final).
Estas clases deben agregarse a bloques adaptativos, no a una fila.
Por ejemplo, alineamos el bloque adaptativo 2 con el borde inferior de la línea:
(1) (2)
Alineación horizontal de bloques adaptativos.Las siguientes clases están destinadas a alinear bloques adaptativos en dirección horizontal:
- justificar-contenido-inicio (relativo al inicio de la línea de fila - predeterminado);
- justificar-centro-de-contenido (centro);
- justificar-contenido-end (relativo al final de la línea);
- justificar-contenido-alrededor (uniformemente, teniendo en cuenta el espacio antes del primer y último bloque adaptativo);
- justificar-contenido-entre (uniformemente, con el mismo espacio entre bloques receptivos).
Por ejemplo, distribuyamos bloques adaptativos en dirección horizontal de manera uniforme:
(1) (2)
Diseño responsivo sin bordesEl relleno interno de los bloques adaptativos y los márgenes negativos externos de las filas se pueden eliminar si se agrega la clase sin márgenes a este último (es decir, fila).
... ... ...
Tenga en cuenta que esta clase (sin medianiles) solo afecta a los bloques adaptativos que se colocan directamente en esta fila. Aquellos. Las propiedades CSS para eliminar el relleno no se aplicarán a los bloques adaptables que no tengan esta fila como principal.
En Bootstrap 4, las compensaciones de bloques responsivos se pueden realizar usando:
- compensación de clases (para un cierto número de columnas);
- clases de margen de servicios (servicios públicos).
Las clases de compensación están diseñadas para desplazar bloques adaptativos hacia la derecha una cierta cantidad de columnas.
Estas clases tienen la siguiente sintaxis:
Desplazamiento-(1) o desplazamiento-(punto de interrupción)-(1)
(punto de interrupción): punto de control a partir del cual se aplicará un desplazamiento a este bloque (si no se especifica, el desplazamiento se aplicará a partir de los dispositivos más pequeños).
(2): el valor de compensación especificado utilizando el número de columnas Bootstrap.
Como ejemplo, establezcamos el desplazamiento de los bloques adaptativos como se muestra en la figura.
(1) (2) (1) (2) (1)
Compensación usando clases de margenEn la cuarta versión de Bootstrap, también puede establecer el desplazamiento para bloques adaptativos usando sangrías de margen (margen izquierdo: automático y (o) margen derecho: automático). Esta opción de compensación surge porque la cuadrícula en la nueva versión de Bootstrap (4) está basada en CSS Flexbox.
Esta opción de desplazamiento (usando clases de margen) se utiliza cuando es necesario desplazar los bloques entre sí en una cantidad variable.
En Bootstrap 4, para una configuración más conveniente y adaptable de sangrías de margen para bloques (margin-left: auto y (o) margin-right: auto), puede usar las clases ml-auto, mr-auto, ml-(breakpoint )-auto y mr-(punto de interrupción)-auto.
Bootstrap 4: compensación de bloque receptivo 
(1) (2) (1) (2) (3) (1) (2)
Cambiar el orden visual de los bloques adaptativosDe forma predeterminada, los bloques responsivos se muestran visualmente en el orden en que se encuentran en el código HTML.
El cambio del orden visual de un bloque responsivo en Bootstrap 4 se realiza utilizando la clase order-(visual_number). Esta clase es para el punto de control xs. Si es necesario determinar el orden de un elemento no para el punto de control xs, sino para sm, md, lg o xl, entonces se utiliza la siguiente versión de esta clase:
Orden-(punto de interrupción)-(número_visual)
En lugar de (visual_number) debes especificar un número del 1 al 12.
Este número determina cómo aparecerán visualmente los elementos en la página. Es decir, todos los elementos adaptativos seguirán visualmente en orden ascendente a estos números. Si un elemento no tiene una clase de orden establecida, su valor predeterminado es 0.
Por ejemplo, cambiemos el orden de dos bloques adaptativos:
Primero (no ordenado, sin clase de orden) Segundo, pero se mostrará en último lugar Tercero, pero se mostrará en segundo lugar
Otro ejemplo (usando clases de orden adaptativo):
Primero (en xs, sm se mostrará en segundo lugar) Segundo (en xs, sm se mostrará primero)
Además de los números (del 1 al 12 por defecto), también puedes utilizar las palabras primero y último. Estas clases (orden-primero, orden-(punto de interrupción)-primero, orden-último, orden-(punto de interrupción)-último) le permiten mover visualmente un elemento al principio o al final, respectivamente.
Las clases orden primero y orden (punto de interrupción) primero ejercen su efecto estableciendo la propiedad de orden CSS del elemento en -1 (orden: -1), y las clases orden último y orden (punto de interrupción) último establecen el CSS Ordene la propiedad al valor 13 (orden: $columnas + 1).
Reescribamos el ejemplo anterior usando las clases de orden, que usan la primera y la última palabra clave:
Primero (en xs, sm se mostrará al final) Último (en xs, sm se mostrará primero)
Un ejemplo que utiliza las clases de orden con un número y las palabras primero y último:
#1 (XS), #ÚLTIMO (SM), #1 (MD, LG y XL) #2 (XS), #7 (MD, LG y XL) #3 (XS), #6 (MD, LG y XL) ) #4 (XS), #5 (MD, LG y XL) #5 (XS), #4 (MD, LG y XL) #6 (XS), #3 (MD, LG y XL) #7 (XS) ), #2 (MD, LG y XL) #8 (XS), #FIRST (SM), #8 (MD, LG y XL)
Un ejemplo de diseño adaptativo en la cuadrícula Boostrap 4Creemos un diseño responsivo para el bloque de página web que se muestra en la figura usando la cuadrícula Bootstrap 4: ejemplo de diseño de bloque responsivo. 
1. Cree un marcado de bloque para dispositivos móviles (xs).
(1) (2) (3) (4) (5)
2. Configure el marcado para el punto de control sm:
(1) (2) (3) (4) (5)
3. Configure los bloques según la cantidad de columnas que deberían tener en los dispositivos md y lg:
(1) (2) (3) (4) (5)
4. Cree marcas para xl:
(1) (2) (3) (4) (5)
Eliminamos puntos de control innecesarios de los bloques adaptativos:
(1) (2) (3) (4) (5)
Además, inicialmente en Bootstrap 4 el bloque responsivo tiene un ancho del 100%. Esto le permite no especificar el número de columnas al crear bloques adaptativos, si su ancho inicial debe ser de 12 columnas (100%).
(1) (2) (3) (4) (5)
Basado en la cantidad de estrellas en GitHub.
Si desea dominar Bootstrap, en particular su última cuarta versión, este material ha sido preparado especialmente para usted. Aquí, utilizando un pequeño ejemplo de un extremo a otro que realmente se puede dominar en media hora, se demostrarán los conceptos básicos de Bootstrap; una vez que los comprenda, podrá hacer algo propio usando este marco.
Aquí hay un sitio web de una página sobre el que hablaremos sobre cómo crear usando Bootstrap.
Proyecto listo para usar creado con Bootstrap
Arranque de instalación de npm
Bootstrap se puede conectar a una página mediante una red de entrega de contenido. Para hacer esto, agregue el siguiente enlace a la etiqueta:
La última versión de Bootstrap se puede descargar desde aquí y utilizar localmente.
La estructura del proyecto debería verse como la siguiente figura.
Estructura del proyecto Acerca de las capacidades de Bootstrap 4 La primera versión estable de Bootstrap 4 se lanzó a finales de enero de este año. Bootstrap ahora incluye algunas características interesantes que no estaban presentes en su versión anterior. Es decir, si hablamos de mejoras y cambios, podemos notar lo siguiente:
- Bootstrap 4 se reescribió usando tecnología flexbox, mientras que Bootstrap 3 usó tecnología float. Si no está familiarizado con flexbox, consulte este recurso.
- El CSS de Bootstrap 4 usa unidades rem, mientras que anteriormente usaba unidades px. puedes descubrir en qué se diferencian.
- Se han eliminado algunos componentes, como los paneles. Puede encontrar detalles sobre los cambios realizados en Bootstrap 4.
La grilla está dividida en 12 columnas, esta estructura, configurada según las necesidades del desarrollador, es la base del diseño de la página.
Para utilizar la cuadrícula Bootstrap, debe agregar la clase .row al elemento principal de la página. Al configurar los tamaños de elementos anidados, se utilizan las siguientes clases (en lugar de un asterisco al final del nombre de la clase, se indica el número de columnas de la cuadrícula básica de 12 columnas que debe ocupar un elemento en particular):
- col-lg-*: clase utilizada para páginas destinadas a dispositivos de pantalla grande, como computadoras portátiles;
- col-md-* - clase para páginas diseñadas para dispositivos de pantalla de tamaño mediano, como tabletas;
- col-sm-*: clase para páginas diseñadas para pantallas pequeñas, como las que se encuentran en los teléfonos inteligentes.
Barra de navegación
Entonces, para que aparezca una barra de navegación en la página, agregaremos una etiqueta a index.html con la clase .navbar, dentro de la cual, usaremos otras clases como .navbar-brand, .navbar-toggler y .nav. -item , creamos algunos elementos especiales y una estructura del sistema de navegación del sitio. La clase .fixed-top le permite arreglar la barra de navegación en la parte superior de la página. Aquí está el diseño de la barra de navegación:
Hogar
Ahora creemos un archivo main.css y lo conectaremos a la página colocando lo siguiente en la etiqueta del archivo index.html:
Esto le permitirá personalizar los estilos de los elementos de la página colocando reglas CSS en este archivo. Agreguemos reglas a este archivo CSS que establezcan el diseño de color de la barra de navegación:
Barra de navegación (fondo:#F97300;) .nav-link, .navbar-brand( color: #f4f4f4; cursor: puntero; ) .nav-link( margen derecho: 1em !importante; ) .nav-link:hover( fondo : #f4f4f4; color: #f97300; ) .navbar-collapse( justify-content: flex-end; ) .navbar-toggler( fondo:#fff !importante; )
La nueva cuadrícula Bootstrap se basa en flexbox, por lo que debe utilizar las propiedades adecuadas para alinear el contenido. Por ejemplo, para colocar el menú de la barra de navegación a la derecha, debe usar la propiedad justify-content y establecer su valor en flex-end:
Navbar-collapse (justificar contenido: flex-end;)
Para personalizar el color de fondo de la barra de navegación, puede utilizar las clases .bg-light (fondo claro), .bg-dark (fondo oscuro) y .bg-primary (color de fondo principal). Usamos la siguiente configuración:
Bg-dark( color de fondo:#343a40!importante ) .bg-primary(color de fondo:#343a40!importante )
Encabezado de página La siguiente etiqueta se utiliza para describir el encabezado de página:
Preparemos un diseño para el encabezado de la página. Queremos que ocupe toda la altura de la ventana, por lo que jQuery será útil aquí. Creemos un archivo main.js y conectémoslo a index.html antes de la etiqueta de cierre:
Agreguemos lo siguiente al archivo main.js:
$(documento).ready(función())( $(".header").height($(ventana).height()); ))
Sería una buena idea colocar una bonita imagen de fondo en el encabezado de la página. Hagámoslo así:
/*estilo de encabezado*/ .header( imagen de fondo: url("../images/headerback.jpg"); archivo adjunto de fondo: fijo; tamaño de fondo: portada; posición de fondo: centro; )
Esto es con lo que terminamos.
Encabezado de página con imagen de fondo
Por ahora, el encabezado del sitio parece un poco vacío, así que agreguemos un elemento, asignándole la clase .overlay, lo que conducirá a la creación de un bloque que se ubica encima de la imagen de fondo del encabezado. Cambiemos la sección del archivo index.html donde describimos el encabezado de la siguiente manera:
Luego, en main.css, agregue lo siguiente:
Superposición (posición: absoluta; altura mínima: 100%; ancho mínimo: 100%; izquierda: 0; arriba: 0; fondo: rgba(244, 244, 244, 0,79); )
Ahora agreguemos una descripción del proyecto al encabezado. Lo colocaremos en un nuevo elemento con la clase .containter. Esta es una clase auxiliar para el marco Bootstrap diseñada para diseñar contenido según las necesidades de un diseño responsivo. Así es como cambiará el marcado en este paso:
Ahora agreguemos otro elemento aquí, al que le asignaremos la clase.descripción:
▍ Hola, bienvenido a mi sitio web oficial
Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ver másTambién asignaremos la clase .text-center a esta etiqueta, lo que permitirá alinear su contenido con el centro de la página. Hay un botón al final de la descripción del sitio. Hablemos de cómo configurarlo. Botones Bootstrap proporciona muchas clases para botones. Puedes ver algunos ejemplos de diseño de botones. Nosotros, como puede ver en el ejemplo de marcado de la sección anterior, agregamos las clases .btn y al elemento. btn-esquema-secundario.
Ahora configuremos estilos para class.description:
Descripción( posición: absoluta; superior: 30%; margen: automático; relleno: 2em; ) .descripción h1( color:#F97300 ; ) .descripción p( color:#666; tamaño de fuente: 20px; ancho: 50%; altura de línea: 1.5; botón .descripción (borde: 1px sólido #F97300; fondo:#F97300; color:#fff;)
Así es como se verá el encabezado de la página después de completar los pasos anteriores:
Encabezado de página que contiene una descripción del proyecto. Acerca de la sección Primero, veamos lo que queremos crear. Aquí hay una sección de la página con información sobre el desarrollador web.
Acerca de la sección
Aquí usaremos las capacidades de cuadrícula de Bootstrap para crear un diseño de sección de dos partes. Comencemos agregando class.row al elemento principal de la sección:
La primera parte del diseño estará ubicada a la izquierda y contendrá una foto. La segunda parte, situada a la derecha, contiene una descripción.
Así es como se ve el marcado en el lado izquierdo de esta sección:
// lado izquierdo 
Desarrollador web S.
Y esto es lo que sucederá después de que se agregue aquí la descripción del lado derecho del diseño:
S.Desarrollador web ▍D.John
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
Tenga en cuenta la configuración de los anchos de columna utilizando las clases col-lg-* , col-md-* y col-sm-* descritas anteriormente.
Aquí están los estilos para todo esto:
Acerca de( margen: 4em 0; relleno: 1em; posición: relativa; ) .about h1( color:#F97300; margen: 2em; ) .about img( altura: 100%; ancho: 100%; radio de borde: 50% ) .about span( display: block; color: #888; posición: absoluta; izquierda: 115px; ) .about .desc( padding: 2em; border-left:4px solid #10828C; ) .about .desc h3( color: #10828C; ) .about .desc p( altura de línea:2; color:#888; )
Sección Portafolio Pasemos ahora a la sección en la que se presentará el portafolio del desarrollador. Contendrá una galería de obras.
Sección de cartera
Al crear el diseño de esta sección, se aplican los mismos principios de trabajo con la cuadrícula que comentamos anteriormente:
portafolio 
Agregar la clase .img-fluid a cada una de las imágenes las hace responsivas.
Cada elemento de nuestra galería, en pantallas medianas y grandes, ocupa 4 columnas (recuerde: la clase col-sm-12 se usa para dispositivos con pantallas pequeñas, la clase col-md-4 se usa para pantallas medianas, col-lg-4 - para dispositivos con pantallas grandes). Como resultado, en pantallas grandes y medianas, un elemento representará aproximadamente el 33,3% del elemento contenedor; en dispositivos pequeños, cada elemento ocupará toda la pantalla (12 columnas).
Estilizando la galería de obras:
/*Portfolio*/ .portfolio( margen: 4em 0; posición: relativa; ) .portfolio h1( color:#F97300; margen: 2em; ) .portfolio img( alto: 15rem; ancho: 100%; margen: 1em; )
Sección de blog y trabajo con tarjetas Hablemos de crear una sección que contenga anuncios de materiales del blog mantenido por nuestro desarrollador web condicional.
Sección de blogs
Para crear esta sección, necesitaremos las llamadas tarjetas (tarjetas en la terminología Bootstrap).
Para crear una tarjeta, debe incluir un elemento en el diseño y agregarle la clase .card. Puede utilizar las siguientes clases para configurar varios elementos de la tarjeta:
- .card-header: encabezado
- .card-body: contenido principal
- .card-title: título
- .card-footer: pie de página
- .card-image: imagen
Blog 
Título de la entrada
Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Leer más
Título de la entrada Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Leer más
Título de la entrada Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Leer másAquí están los estilos de las tarjetas:
Blog( margen: 4em 0; posición: relativa; ) .blog h1( color:#F97300; margen: 2em; ) .blog .card( box-shadow: 0 0 20px #ccc; ) .blog .card img( ancho: 100%; altura: 12em; ) .blog .card-title( color:#F97300; ) .blog .card-body( relleno: 1em; )
Así es como se verá nuestra página de una página después de crear la sección Blog:
Página después de agregar la sección Blog Sección de Equipo Esta sección contendrá información sobre el equipo del proyecto.
Sección de equipo
Para formar esta sección usaremos una cuadrícula, dividiendo el espacio disponible en partes iguales entre las imágenes. Cada imagen (en pantallas grandes y medianas) ocupará 3 columnas de la cuadrícula, lo que representa el 25% del espacio total.
Aquí está el marcado HTML para esta sección:
Nuestro equipo 
Sara Gerente 
Chris S. ingeniero Desarrollador front-end Layla Gerente de equipo J.Jirard
Y aquí están los estilos:
Equipo( margen: 4em 0; posición: relativa; ) .team h1( color:#F97300; margen: 2em; ) .team .item( posición: relativa; ) .team .des( fondo: #F97300; color: #fff ; alineación de texto: centro; radio de borde inferior izquierdo: 93%;
Decoremos esta sección con una animación que aparece al pasar el mouse sobre las imágenes. Debería verse como la imagen de abajo.
Animación al pasar el ratón sobre una imagen.
Para lograr este efecto, agregue los siguientes estilos a main.css:
Equipo .item:hover .des( altura: 100%; fondo:#f973007d; posición: absoluta; ancho: 89%; relleno: 5em; arriba: 0; borde-inferior-radio-izquierda: 0; )
Formulario de comentarios Esta sección de la página contendrá un formulario con el cual los visitantes del sitio pueden enviar mensajes al propietario del sitio. Aquí, como de costumbre, para diseñar los elementos y garantizar su capacidad de respuesta, utilizaremos las capacidades de Bootstrap.
Formulario de comentarios
Al igual que Bootstrap 3, Bootstrap 4 usa la clase .form-control para los campos de entrada, pero ahora hay algo nuevo. Por ejemplo, en lugar del obsoleto class.input-group-addon, se utiliza el nuevo class.input-group-prepend (para iconos y etiquetas). Se pueden encontrar más detalles sobre esto en la documentación de Bootstrap 4. En nuestro caso, cada campo de entrada se colocará en un elemento al que se le asigna una clase .form-group.
Agreguemos lo siguiente al archivo index.html:
Ponerse en contacto
Estos son los estilos para la sección del formulario de comentarios, que deben colocarse en el archivo main.css:
Formulario de contacto (margen: 6em 0; posición: relativa;) .formulario de contacto h1( padding:2em 1px; color: #F97300; ) .formulario de contacto .right( ancho máximo: 600px; ) .formulario de contacto . right .btn-secundario( fondo: #F97300; color: #fff; borde:0; ) .contact-form .right .form-control::placeholder( color: #888; tamaño de fuente: 16px; )
Fuentes Las fuentes estándar no son adecuadas para todos. Aprovechamos la API de fuentes de Google para utilizar la fuente Raleway en nuestro proyecto. Aquí quedará muy bien. Para importar la fuente, agregue la siguiente directiva al archivo main.css:@importar URL("https://fonts.googleapis.com/css?family=Raleway");
A continuación, configuremos estilos globales para varias etiquetas HTML:
Html,h1,h2,h3,h4,h5,h6,a( familia de fuentes: "Raleway"; )
Efectos de desplazamiento La siguiente imagen muestra el comportamiento de la página que queremos lograr.
Desplazarse por la página al hacer clic en enlaces en la barra de navegación
Para que la página se desplace suavemente a la sección deseada al hacer clic en los enlaces de la barra de navegación, necesitaremos recurrir a las capacidades de jQuery. Si no está muy familiarizado con esta biblioteca, sepa que no hay nada complicado aquí; simplemente agregue el siguiente código a su archivo main.js:
$(".navbar a").click(function())( $("body,html").animate(( scrollTop:$("#" + $(this).data("value")).offset ( ).arriba ),1000) ))
Después de eso, agregue un atributo de valor de datos a cada uno de los enlaces en la barra de navegación y haga que el marcado se vea así:
Para que todo esto finalmente funcione solo queda agregar el atributo id al elemento principal de cada sección de la página. En este caso, debe asegurarse de que su valor sea idéntico al especificado en el atributo de valor de datos del enlace correspondiente. Por ejemplo, aquí está el atributo correspondiente a la sección Acerca de:
Esto completa nuestro ejemplo. Agregar etiquetas
El lanzamiento de la nueva versión de Bootstrap4 me impulsó a escribir esta guía porque la nueva versión es significativamente diferente. Tendrás que dedicar algo de tiempo a estudiarlo, pero merece la pena. Esta guía no es una guía completa de Bootstrap4 y sin duda necesitarás consultar la documentación más de una vez, pero aquí cubriremos los conceptos básicos de la creación de un diseño de sitio web con Bootstrap4 de dos maneras diferentes.
Instalación En nuestro caso usaremos SASS y por lo tanto usaremos la instalación completa.Si solo necesita Bootstrap para la creación rápida de prototipos, tiene sentido utilizar el método CDN. Simplemente conecta archivos que se encuentran en otros recursos de Internet, sin instalación (descarga). De esta manera los agregas a tu proyecto como enlaces.
Simplemente puede agregar el código del siguiente ejemplo a su archivo de proyecto: index.html
Plantilla de inicio Bootstrap 4 Hola< /h1>
Este código proviene directamente de la página de arranque de Bootstrap 4.
Con esta plantilla puedes empezar a usar Bootstrap de inmediato. La ventaja es que es fácil comenzar, pero la desventaja es que se pierde la personalización que ofrece Sass.
Instalación de Bootstrap 4 a través de NPM Vamos a comenzar nuestro proyecto aquí mismo en este punto. Esto requerirá el uso de Node.js y su administrador de paquetes para instalar el dispositivo de arranque junto con varios otros paquetes. Esto nos dará acceso a Sass, recarga en tiempo real, etc.Primero, asegúrese de tener Nodejs instalado abriendo la consola o la línea de comando:
Si obtiene la versión actual, entonces todo está bien y puede continuar, pero si no, descargue el instalador apropiado según su sistema operativo y siga el procedimiento de instalación con la configuración predeterminada.
Puede leer información de configuración útil en mi publicación: NPM Configurando Gulp y Compilación SASS
Una vez que se complete la instalación, reinicie su consola o línea de comando y tendrá acceso a los comandos de Node.js.
Creemos una carpeta para nuestro proyecto y entremos en ella:
mkdir bs4 && cd bs4
Luego ejecutaremos npm init para crear un archivo package.json que simplemente almacene nuestras dependencias.
(Nota: el indicador -y simplemente nos permite omitir respuestas a varias consultas y proporcionarles valores predeterminados en su lugar)
Luego usaremos npm nuevamente para instalar varios paquetes diferentes dependiendo de nuestras dependencias de desarrollo:
Npm instala gulp sincronización del navegador gulp-sass --save-dev
Luego usaremos npm por última vez para instalar algunos paquetes como dependencias regulares del proyecto:
Npm instala bootstrap jquery popper.js --save
Ahora es el momento de abrir nuestro proyecto en el editor de código. Usaré Sublime 3.
Debemos crear una carpeta src para nuestro proyecto y varias subcarpetas dentro de ella. El árbol se ve así:
/src /activos /css /js /scss
Dentro de /src también cree 4 carpetas como se muestra arriba.
Luego cree un archivo index.html dentro de /src/ con el siguiente contenido:
Diseño de Bootstrap 4< /title> < meta name="viewport" content="width=device-width, initial-scale=1.0" /> < /head> < body> < /body> < /html>
Estoy importando la fuente Raleway junto con FontAwesome para los íconos. Luego hago referencia al archivo bootstrap.css y estilos.css. Aún no existen, pero los crearemos pronto.
También creemos un archivo estilos.scss dentro de la carpeta /src/scss/. Introduciremos una variable rápida y un conjunto de reglas para asegurarnos de que la compilación de Sass funcione:
$bg-color:rojo; cuerpo (fondo: $bg-color;)
En la carpeta raíz (carpeta del proyecto), cree un archivo gulpfile.js y pegue el siguiente contenido:
Var trago = require("trago"); var browserSync = require("browser-sync").create(); var sass = require("trago-sass"); // Compile sass en CSS e inyecte automáticamente en los navegadores gulp.task("sass", function() ( return gulp.src(["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss "]).pipe(sass()) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); )); // Mueve los archivos javascript a nuestra carpeta /src/js gulp.task("js", function() ( return gulp.src(["node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/ jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js"]) .pipe(gulp.dest("src/js")) .pipe(browserSync.stream ()); // Servidor estático + visualización de archivos scss/html gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "./src" )); gulp.watch(["node_modules /bootstrap/scss/bootstrap.scss", "src/scss/*.scss"], ["sass"]); gulp.watch("src/*.html").on("cambiar", browserSync.reload ); gulp.task("predeterminado", ["js","servir"]);
Describiré lo que sucede aquí en función de las tareas definidas anteriormente:
Ejecutemos gulp en la línea de comando:
Funciona así:
- Usas m para margen o p para relleno
- Después de m o p, agrega: t (arriba -), b (abajo), l (izquierda), r (derecha), x (izquierda y derecha), y (arriba y abajo) o nada para los 4 lados.
- Después del guión, especifica tamaños de 0 a 5 (siendo 5 el mayor número de espacios).
Entonces, en nuestro ejemplo parece que necesitamos usar margen Y abajo para alejar las cartas que están debajo.
En el primer contenedor de tarjetas agregue mb-4:
Ahora arreglado:
Así es como puedes manejar fácilmente tanto los márgenes como el relleno en Bootstrap 4.
Juguemos un poco usando diferentes componentes de Bootstrap 4.
Trabajando con "Tipografía" en Bootstrap 4 Agreguemos una sección debajo de nuestras 3 columnas al final del cierre para la clase de fila, que tendrá 2 columnas.La primera columna utilizará la mayoría de las columnas (8) y la columna de la derecha será para la navegación vertical en la sección siguiente.
Un encabezado importante
Aquí puede ir una especie de subtítulo importante, que es más grande y gris.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
..navegación vertical en breve..Bootstrap 4 tiene una sección de Tipografía en su Documentación que le brindará todas las clases de ayuda basadas en tipos. Es bastante simple. Usamos .dirigir para resaltar el subtítulo debajo de nuestro elemento h3.
También tiene una sección de Utilidades de texto en su Documentación que le brinda opciones para alineación de texto, conversión, cursiva y grosor de fuente.
En ventanas gráficas pequeñas, digamos que queremos que nuestro tipo esté centrado en lugar del valor predeterminado, que está alineado a la izquierda.
Esto hará que el texto contenido en el div esté centrado en ventanas gráficas pequeñas y alineado a la izquierda en ventanas medianas y más grandes.
Bootstrap 4 Navegación vertical Agregaremos un elemento más antes de comenzar con la personalización. En nuestra columna de la derecha que acabamos de agregar, agreguemos navegación vertical:Menú secundario
El resultado en el navegador debería verse así:
También puede probarlo en ventanas gráficas pequeñas y notar que responde. Por supuesto, existen muchas más opciones relacionadas con la navegación.
Personalización en Bootstrap 4 Ahora tenemos un diseño bastante estándar que puedes encontrar en la mayoría de los sitios web.Afortunadamente, Bootstrap 4 tiene un sistema sólido que facilita la personalización de elementos simples.
Abra el archivo /src/scss/styles.scss y pegue lo siguiente:
// Anulaciones de variables // Importaciones Bootstrap Sass @import "node_modules/bootstrap/scss/bootstrap";
De acuerdo con la sección Temas, puede optar por incluir todos los archivos sass de Bootstrap 4 o agregar elementos individuales según sus necesidades. Para simplificar las cosas, importaremos todo como se indica arriba.
Cambiar los colores del tema en Bootstrap 4 Quizás el problema más común sea el cambio de colores.Si abre el archivo node_modules/bootstrap/scss/_variables.scss, notará que en la parte superior menciona un sistema de color. En esta sección verás todas las variables que puedes reescribir para que coincidan con los colores.
Cambiemos solo el color base, cambiemos estilos.scss a lo siguiente:
// Anulaciones de variables $theme-colors: ("primary": #d95700);
Guárdalo y este es el resultado:
¡Muy simple!
Cambiemos también el color de fondo:
// Anulaciones de variables $theme-colors: ("primary": #d95700); $cuerpo-bg: #ededed;
Ahora el resultado se ve así:
Hmm, ahora nuestra sección jumbletron (héroe) se ve fea ya que también era gris.
Podemos establecer configuraciones personalizadas para ciertos elementos usando el inspector en Chrome o Firefox, encontrar las clases de elementos asociados que queremos cambiar y cambiarlas en nuestro archivo estilos.scss.
En este caso, la clase responsable del jumbotron es .jumbotron. Cambiemos el color de fondo y agreguemos un pequeño borde en la parte superior para simular la sombra paralela de la barra de navegación:
// Anulaciones de variables $theme-colors: ("primary": #d95700); $cuerpo-bg: #ededed; .jumbotron (color de fondo: #ffffff! Importante; borde superior: 3px rgb sólido (219, 219, 219);)
Ahora el resultado:
En enero de este año, Bootstrap 4 (también conocido como v4) finalmente se lanzó después de estar en versiones alfa durante más de dos años. Representa una reescritura seria de la funcionalidad. Bootstrap 4 no solo introduce muchos cambios internos, sino que también contiene una serie de conceptos nuevos que deberá comprender.
Por lo tanto, en este artículo hablaré sobre los cambios más importantes en Bootstrap en v4 en comparación con v3. Supongo que ya has usado Bootstrap, así que no explicaré los principios básicos.
Ahora veamos los cambios más importantes (sin ningún orden en particular):
#1: Vista de botón¡Empecemos con algo divertido y visual! Los botones en v4 tienen un diseño más plano que en v3. Aquí están los botones anteriores:
Y aquí tenéis algunas de las nuevas:
Esto está más en línea con las guías de diseño modernas, como las guías de Material Design que han ganado enorme popularidad en los últimos años.
N.º 2: consultas de medios mejoradasEn mi opinión, Boostrap v3 tenía muy pocos puntos de control para la cuadrícula, por ejemplo el más pequeño, xs, tenía 768 píxeles. Gran parte del tráfico actual proviene de dispositivos mucho más pequeños, y esto ha resultado frustrante para muchos desarrolladores.
$puntos de interrupción de cuadrícula: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !predeterminado;
$ grilla - puntos de interrupción : ( xs: 0, pequeño: 576px, md: 768px, LG: 992px, XL: 1200px ) ! por defecto ; |
Esto facilita la creación de cuadrículas que funcionan bien en todos los tamaños de pantalla.
#3: La compatibilidad con Flexbox nos brinda más flexibilidadLas famosas cuadrículas de Bootstrap ahora se crean usando Flexbox en lugar de flotar. A primera vista, esto no supone una gran diferencia para los desarrolladores, ya que la mayoría de los diseños de cuadrícula funcionan exactamente igual. Sin embargo, esto abre varias posibilidades nuevas.
Anteriormente teníamos que definir el ancho de cada columna (de 1 a 12). Ahora puede definir el ancho de una columna y luego dejar que Flexbox establezca automáticamente el ancho de las demás. A continuación se muestra un ejemplo de cómo hacer esto:
Como puede ver, establecemos el ancho de la columna del medio en 6 (que es la mitad del ancho total) y las otras columnas simplemente ocupan el resto del espacio.
1 de 3 2 de 3 (más ancho) 3 de 3
< div class = "container" > < div class = "row" > < div class = "col" > 1 de 3 < / div > < div class = "col-6" > 2 de 3 (más ancho) < / div > < div class = "col" > 3 de 3 < / div > < / div > < / div > |
Bootstrap 4 también viene con un montón de clases que puedes usar para administrar contenedores y elementos de Flexbox. Para convertir un elemento en un contenedor Flexbox, simplemente asígnele la clase d-flex.
¡Soy un contenedor flexbox!
< div class = "d-flex" >¡Soy un contenedor flexbox!< / div > |
Esto proporciona un contenedor Flexbox con texto dentro:
Nota. Solo cubro estilos relacionados con Flexbox.
Agreguemos algunos elementos más e introduzcamos otra clase para controlar cómo se colocan en el contenedor.
Marco Bootstrap 4. Inicio rápido.
Aprende los conceptos básicos de Bootstrap 4 con un ejemplo práctico de diseño de un blog desde cero
< div >Artículo flexible< / div >
< div >Artículo flexible< / div >
< div >Artículo flexible< / div >
< / div >
Como resultado, los elementos quedan centrados en el contenedor:
#4: Administrar la sangría mediante clasesEs genial. Ahora puede controlar el relleno y los márgenes usando las clases p-* y m-*. El relleno puede variar de 0,25 a 3 rem usando números del 0 al 5. Por ejemplo, configuremos el contenedor Flexbox en la clase p-5 para crear un relleno máximo.
¡Hola a todos, amigos! Bootstrap 3 se lanzó a mediados de 2013 y, a lo largo de los años, ha demostrado ser un marco CSS conveniente y extensible para crear rápidamente diseños responsivos. Millones de sitios utilizan con éxito este marco y ya estamos bastante acostumbrados.
Fresco
Balbucear
El 18 de enero de 2018 ocurrió un evento importante: salió de la versión beta la tan esperada versión de Bootstrap 4, basada en el uso del modelo Flexbox para marcado, que actualmente ya es compatible con todos los navegadores modernos y es más conveniente y flexible. para desarrolladores que el modelo de marcado clásico basado en Float. Ahora podemos decir con total confianza que no es posible, ¡pero DEBE escribirse a máquina con Flex!
Materiales adicionales de la lección Bootstrap 4Hoy veremos más de cerca cómo trabajar con la cuadrícula Bootstrap 4, comparándola con la versión anterior en el camino. Esta lección le resultará útil no solo si es un principiante y se está familiarizando con Bootstrap, sino también si es un desarrollador experimentado y desea aprender todas las reglas y matices del diseño utilizando la cuadrícula Bootstrap 4 y las herramientas Flexbox incluidas en él.
1. Parámetros básicos de cuadrícula predeterminadosLa cuadrícula predeterminada de Bootstrap 4 es muy similar a la de la tercera versión, pero existen algunas diferencias importantes.
En la tabla de opciones principales, podemos notar diferencias obvias con la grilla de la tercera versión. El prefijo de clase “.col-xs-”, que es responsable de las resoluciones más pequeñas, ahora se eliminó y se reemplazó por un prefijo simplificado “.col-”. Se podría pensar erróneamente que el prefijo “.col-” es responsable de las resoluciones mínimas de los dispositivos móviles, pero esto no es del todo cierto. Entre otras cosas, el prefijo “.col-” es una de las innovaciones más importantes de Bootstrap 4. Esta es una clase que se encarga de diseñar columnas automáticamente en cualquier resolución. Pero hablaremos de eso más adelante.
Para resoluciones pequeñas, el prefijo “.col-sm-” con una consulta de medios de 576 píxeles es responsable. El ancho del contenedor es de 540 px. Las resoluciones medias comienzan desde 768 píxeles. Ancho del contenedor: 720 px. Las resoluciones más altas funcionan con resoluciones de dispositivo de 992 píxeles o más. Ancho del contenedor: 960 px. Y los más grandes, desde 1200 píxeles. El ancho del contenedor se fija en 1140 px.
Tenga en cuenta que los valores máximos de las consultas de medios tienen valores imprecisos con la parte fraccionaria ".98" en píxeles. Esto se nota al elegir el método de diseño Desktop First, donde el ancho máximo de consulta de medios es limitado. Por ejemplo, al compilar Sass "+media-breakpoint-down(lg)" obtendremos "@media (ancho máximo: 1199,98px)". Aquí se liberan 0,02 píxeles para iniciar la siguiente consulta de medios. Mantén esto en mente. En los próximos números de "Jedi Layout 8" veremos este y muchos otros puntos de esta lección utilizando un ejemplo real.
2. Disposición automática de columnas 2.1 Columnas del mismo anchoUsando la nueva clase genérica ".col", puede especificar hasta 12 columnas en una fila (principal de ".row"), cuyo ancho se calculará automáticamente según la cantidad de elementos y será igual.
Por ejemplo:
2.2 Establecer el ancho de una columna También puedes establecer explícitamente el ancho de una columna y dejar el resto automático.
1 de 3 2 de 3 (ancho) 3 de 3 1 de 3 2 de 3 (ancho) 3 de 3 
En este ejemplo, el segundo elemento de la tercera fila tiene la clase ".col-6" y el segundo elemento de la segunda fila tiene la clase ".col-5", que ocupan el número correspondiente de columnas en todas las resoluciones de pantalla. El ancho de las columnas restantes responde y se calcula automáticamente, ocupando todo el espacio restante.
2.3 Contenido de ancho variablePuede utilizar la clase "col-(breakpoint)-auto" para definir contenido con un ancho variable, dependiendo del espacio ocupado por el contenido de la columna. Donde el punto de interrupción es el tamaño de la pantalla (xl, lg, md o sm).
1 de 3 Contenido de ancho variable 3 de 3 1 de 3 Contenido de ancho variable Número dos 3 de 3 
Aquí vemos que las dos columnas centrales ocupan un ancho correspondiente al ancho del contenido, pero en la primera fila, gracias a la clase ".justify-content-sm-center" de ".row", toda la fila queda centrada y el ancho total depende solo del ancho de la columna central, mientras que la segunda fila se estira hasta el ancho total disponible, pero la segunda columna permanece fija al ancho del contenido.
2.4 Varias filasGracias a Bootstrap 4, puedes crear varias líneas (guiones) en una fila. Esto se puede implementar usando la clase ".w-100", que es muy similar a la etiqueta "br" y esencialmente simplemente envuelve las columnas en una nueva línea.
col col col col col 
Una característica muy interesante de Bootstrap 4 es la capacidad de configurar columnas universales que se mostrarán en todas las resoluciones. Esta es la clase ".col" mencionada anteriormente. Además, puedes definir una clase que indique el número específico de columnas que ocupará el contenido; estas son clases con el prefijo “.col-(número de columnas)”, por ejemplo “.col-6” nos dice que el el contenido ocupará 6 columnas de 12. En los casos en los que no sea necesario especificar una cantidad específica, puede utilizar con seguridad la clase universal “.col”.
col col col col col-8 col-4 
Puede utilizar el prefijo de clase ".col-sm-(número de columnas ocupadas)" para definir la cuadrícula base en todas las resoluciones excepto en las más pequeñas. En pantallas pequeñas, las columnas de dicha cuadrícula se apilarán unas debajo de otras. Hay más permisos: ocuparán tanto espacio como hayas definido en las clases.
col-sm-8 col-sm-4 col-sm col-sm col-sm 
Aquí vemos que la primera fila en dispositivos con una resolución superior a “sm”, es decir, más de 576 píxeles. está dividido en 2 columnas: 8 y 4 de 12 de ancho, respectivamente. El ancho de las columnas de la segunda fila se calcula automáticamente, pero en las resoluciones más pequeñas estas columnas también se apilan unas debajo de otras, gracias a la clase “.col-sm”.
3.3 Creando una malla combinada complejaCon Bootstrap puedes crear cualquier combinación de columnas al crear una cuadrícula. Para cada columna, puede establecer cualquier comportamiento en diferentes resoluciones utilizando clases adaptativas. Aquí las diferencias con la tercera versión están sólo en los nombres de las clases.
.col-12 .col-md-8 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-6 
Bootstrap 4 se basa en "flex" y nos brinda todas las capacidades de este modelo, que están disponibles en clases simples ya preparadas. Las posibilidades incluyen alineación vertical y horizontal.
4.1 Alineación vertical Superior Superior Superior Medio Medio Medio Inferior Inferior Inferior
Además de controlar la alineación a través del ".row" principal, puede alinear las columnas dándoles las clases apropiadas:
Arriba Medio Abajo 
Además, Bootstrap 4 tiene herramientas para la alineación horizontal de columnas utilizando el prefijo “.justify-content-” en “.row”.
fila justificar-contenido-inicio fila justificar-contenido-inicio fila justificar-centro-de-contenido fila justificar-centro-de-contenido justificar-contenido-final justificar-contenido-final justificar-contenido-alrededor justificar-contenido-alrededor justificar-contenido-entre justificar -contenido-entre 
Muy a menudo hay situaciones en las que es necesario eliminar los márgenes entre columnas. Por ejemplo, si estás creando una galería y los elementos deben colocarse muy juntos, así:
Para hacer esto, simplemente configure la clase adicional ".no-gutters" en el elemento ".row".
col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md -4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col -md-4 col-6 col-sm-4 col-md-4 
Si una fila (.row) se llena con un número total de columnas de más de 12, la siguiente columna se mueve a una nueva línea.
.col-9 .col-4
9 + 4 = 13 columnas: esto es más de 12. Este elemento, de 4 columnas de ancho, se moverá a una nueva línea. .col-6
Las siguientes columnas se ubicarán a lo largo de la línea. 
Puede utilizar clases especiales con el prefijo ".order-" para definir el orden de los elementos. Si está familiarizado con Flex-layout, estas reglas le resultarán familiares. Bootstrap 4 te brinda la posibilidad de establecer el orden de los elementos mediante clases. Puedes configurar el pedido directamente (.order-1.order-md-2):
Primer elemento desordenado 
O puede utilizar clases especiales que determinan el orden del primer y último elemento (.order-first, .order-last):
Primero desordenado Segundo, ordenado como último Tercero, ordenado como primero
5.2 Desplazamiento de columnaPor analogía con Bootstrap 3, la versión 4 también tiene la capacidad de desplazar columnas horizontalmente, pero esto se implementa de manera algo diferente y existen clases especiales para esto con el prefijo ".offset-".
5.2.1 Clases de desplazamientoPuede desplazar una columna hacia la derecha usando las clases “.offset-md-*”, que aumentan la sangría izquierda en * el número de elementos. En el siguiente ejemplo, la clase ".offset-md-2" desplazará la columna ".col-md-4" 2 columnas hacia la derecha, el resto de los ejemplos funcionan de la misma manera:
.col-md-4 .col-md-4 .offset-md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset -md-3 
Es bastante esperado que Bootstrap 4 admita el anidamiento de elementos. Aquí todo funciona igual que en la tercera versión: para anidar columnas dentro de otras, es necesario crear una clase secundaria ".row" y anidar columnas en ella.
Nivel 1: ".col-sm-9" Nivel 2: ".col-8 .col-sm-6" Nivel 2: ".col-4 .col-sm-6" 
Analizamos las características principales de trabajar con la cuadrícula Bootstrap 4. Si desea familiarizarse con todas las capacidades del marco, le recomiendo estudiar la documentación en el sitio web oficial.
En la próxima lección, veremos cómo configurar la cuadrícula Bootstrap para su proyecto específico usando el ejemplo del uso de OptimizedHTML 4 en la plantilla inicial, es decir, configurar, trabajar con variables de sangrías, puntos de interrupción, número de columnas y otras cosas.
