Post Top Ad

Your Ad Spot

viernes, 16 de octubre de 2020

Tutorial de Bootstrap: Explicación de Bootstrap 4 Grid / Flexbox

 En este tutorial de Bootstrap , aprenderemos sobre el diseño de Grid basado en Flexbox en Bootstrap 4.

Este tutorial es una introducción del sistema Bootstrap Grid teniendo en cuenta Flexbox, ya que Bootstrap 4 ahora usa Flexbox como el sistema de visualización predeterminado para el diseño de la cuadrícula que brinda muchas características nuevas y poderosas sobre cómo puede crear los diseños de su sitio web utilizando Bootstrap 4 cuadrícula.

Flexbox es un sistema de visualización CSS 3 que tiene como objetivo facilitar y simplificar la creación de diseños para tamaños de pantalla dinámicos o desconocidos al permitir que el contenedor tenga más control sobre el tamaño de los elementos y luego se adapte a diferentes puertos de visualización.

Sin más presentaciones, creemos y descifremos un diseño de página simple utilizando el sistema de cuadrícula Bootstrap 4.

Primero debe crear una página HTML y vincular los activos de Bootstrap 4. Simplemente puede usar esta plantilla de los documentos oficiales de Bootstrap 4

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>BS 4 Flexbox Examples</title>
  </head>
  <body>
    Add Content Here

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Con el fin de crear una cuadrícula que tendrá que utilizar algunas clases BS predefinido ( .container.rowcol-*-*)

La cuadrícula debe tener un contenedor, filas y columnas.

El contenedor es simplemente una <div>con las clases .container.container-fluid¿Por qué necesita un contenedor y cuál es la diferencia entre esas dos clases?

El contenedor simplemente proporciona un ancho o un ancho máximo para todos los demás elementos de la cuadrícula. Porque la diferencia le .containerpermite crear un contenedor de ancho fijo y le .container-fluidpermite crear un contenedor completo al 100% .

Las filas proporcionan un hogar para las columnas. Teóricamente, el número de filas puede ser ilimitado.

Las columnas son las que forman las celdas del sistema de cuadrícula. Cada fila solo puede ocupar hasta 12 columnas (cada columna ocupa 1/12 del ancho disponible). Prácticamente una columna se extiende por más de una unidad, pero hay una regla importante TODAS LAS COLUMNAS DEBEN AGREGAR HASTA 12

Para crear una columna, simplemente use a <div>con la (s) clase (s)col-*-*

La primera estrella para el punto de interrupción de la pantalla ( xs, sm, md, lg, xl) y la segunda estrella para el tamaño de la columna ( 1 .. 12 ).

  <div class="row">
    <div class="col-sm-1 first-column">
      <p>.col-sm-1</p>
    </div>
    ...
    <div class="col-sm-1 second-column">
      <p>.col-sm-1</p>
    </div>   
  </div>

Ver este lápiz de código

Ahora creemos una segunda fila con dos columnas.

  <div class="row">
    <div class="col-sm-6 first-column">
      <p>.col-sm-6</p>
    </div>
    <div class="col-sm-6 second-column">
      <p>.col-sm-6</p>
    </div>   
  </div>

Tenga en cuenta que .col-sm-6.col-sm-6===.col-sm-12

También tenga en cuenta que no es necesario agregar explícitamente clases de punto de interrupción, es decir, superiores col-md-6col-xl-6causa .col-sm-6mediante el tamaño de la columna debe ser de 6 unidades desde el pequeño punto de interrupción y hasta

A continuación, agreguemos una tercera fila con tres columnas.

La primera columna abarca dos unidades, la segunda abarca tres unidades y la tercera abarca las 7 unidades restantes. Todos los tamaños de colmuns suman 12

.col-sm-2.col-sm-3.col-sm-7===.col-sm-12

Si ha utilizado Bootstrap antes de la versión 4, debería estar familiarizado con todos estos conceptos, entonces, ¿qué nuevas características trae Bootstrap 4?

Si necesita crear un diseño con columnas de ancho automático, simplemente necesita usar .col-*o simplemente .colsin especificar el tamaño y Bootstrap se encargará de dividir por igual el ancho disponible entre esas columnas

  <div class="row">
    <div class="col first-column"></div>
    <div class="col second-column"></div>
    <div class="col first-column"></div>
  </div>

Ahora, si agrega un montón de texto a cada columna para cambiar sus alturas, obtendrá algo como

Como se puede ver, a diferencia de Bootstrap 3, todas las columnas tienen la misma altura sin tener en cuenta su contenido, lo que da una mejor sensación de un sistema de cuadrícula.

Utilidades Bootstrap 4 Flex

Bootstrap 4 usa Flexbox de forma predeterminada, pero también proporciona un conjunto de utilidades de clase que le permiten trabajar con Flexbox sin recurrir a CSS personalizado.

Si desea convertir un elemento div en un contenedor flexible, simplemente puede agregar la .d-flexclase a un<div>

<div class="d-flex">
This is now a flex container
</div>

O puede usarlo en su lugar d-inline-flexpara crear un contenedor flexible en línea.

Estas dos clases también tienen versiones receptivas, es decir, que puede usar d-d-*-flexd-*-inline-flexdonde el inicio puede ser uno de estos valores de puntos de interrupción xs, sm, md, lg and xl.

Un aspecto importante de Flexbox es la capacidad de establecer fácilmente la dirección de los elementos dentro de un contenedor flexible.

De forma predeterminada, la dirección es horizontal de izquierda a derecha, pero se puede configurar para que sea horizontal pero de derecha a izquierda con .flex-row-reverseo configurarla para que sea de izquierda a derecha nuevamente con .flex-row(el valor predeterminado).

También puede usar la .flex-columnclase para establecer una dirección vertical de arriba hacia abajo, o la .flex-column-reverseclase para cambiar la dirección vertical de abajo hacia arriba.

Vea las otras clases disponibles para controlar las propiedades flexibles de los documentos .

Utilidades de visualización de Bootstrap 4

Bootstrap 4 proporciona un conjunto de utilidades que facilitan la configuración de la propiedad de visualización de los elementos de manera sensible, es decir, puede cambiar la propiedad de visualización para puntos de interrupción o tamaños de pantalla específicos. Consulte los documentos para obtener más detalles.

Cambie de forma rápida y sensible el valor de visualización de los componentes y más con nuestras utilidades de visualización. Incluye soporte para algunos de los valores más comunes, así como algunos extras para controlar la visualización al imprimir.

Simplemente use .d-{type}para el xspunto de interrupción o .d-{breakpoint}-{type}para sm, md, lg, and xldónde el tipo puede ser uno de estos tipos de visualización

  • ninguna
  • en línea
  • bloque en línea
  • bloquear
  • mesa
  • tabla-celda
  • fila de la tabla
  • flexionar
  • flexión en línea

Conclusión

En este tutorial, hemos visto el diseño de cuadrícula en Bootstrap 4. Bootstrap siempre ha sido un poderoso marco CSS para los desarrolladores que crean sus sitios web sin un diseñador CSS en el equipo y ahora con las nuevas características como el soporte predeterminado para Flexbox que tiene. excelentes herramientas para crear diseños receptivos siendo un experto en CSS.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas