Sistema de reixa

Exemplo

O sistema de cuadrícula de Bootstrap usa unha serie de contedores, filas e columnas para organizar e aliñar o contido. Está construído con flexbox e é totalmente sensible. A continuación móstrase un exemplo e unha explicación en profundidade de como se xunta o sistema de reixa.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

O exemplo anterior crea tres columnas de igual ancho en todos os dispositivos e ventanas gráficas usando as nosas clases de grade predefinidas. Esas columnas están centradas na páxina co pai .container.

Cómo funciona

Desglosándoo, vemos como se xunta o sistema de grella:

• A nosa rede admite seis puntos de interrupción sensibles . Os puntos de interrupción baséanse en min-widthconsultas multimedia, o que significa que afectan a ese punto de interrupción e a todos os que están por riba del (por exemplo, .col-sm-4aplícase a sm, md, lg, xle xxl). Isto significa que pode controlar o tamaño e o comportamento dos contedores e das columnas por cada punto de interrupción.

• Os contedores centran e rellenan horizontalmente o seu contido. Utilízase .containerpara un ancho de píxel de resposta, .container-fluidpara width: 100%todas as ventás e dispositivos, ou un recipiente de resposta (por exemplo, .container-md) para unha combinación de ancho de píxel e fluído.

• As filas son envoltorios para columnas. Cada columna ten horizontal padding(chamada cuneta) para controlar o espazo entre elas. Isto paddingcontrarrestarase nas filas con marxes negativas para garantir que o contido das túas columnas estea aliñado visualmente no lado esquerdo. As filas tamén admiten clases de modificadores para aplicar uniformemente o tamaño das columnas e clases de canaletas para cambiar o espazamento do teu contido.

• As columnas son incriblemente flexibles. Hai 12 columnas modelo dispoñibles por fila, o que lle permite crear diferentes combinacións de elementos que abranguen calquera número de columnas. As clases de columna indican o número de columnas de modelo que se deben abarcar (por exemplo, col-4abarca catro). widths establécense en porcentaxes para que sempre teña o mesmo tamaño relativo.

• As cunetas tamén son sensibles e personalizables. As clases de gutter están dispoñibles en todos os puntos de interrupción, cos mesmos tamaños que a nosa marxe e espazo de recheo . Cambia os canlóns horizontais con .gx-*clases, os canlóns verticais con .gy-*, ou todos os canlóns con .g-*clases. .g-0tamén está dispoñible para eliminar cunetas.

• Variables Sass, mapas e mesturas alimentan a rede. Se non queres usar as clases de grade predefinidas en Bootstrap, podes usar o Sass fonte da nosa grade para crear a túa propia con marcas máis semánticas. Tamén incluímos algunhas propiedades personalizadas de CSS para consumir estas variables Sass para unha maior flexibilidade para ti.

Teña en conta as limitacións e erros do flexbox , como a imposibilidade de usar algúns elementos HTML como contedores flexibles .

Opcións de reixa

O sistema de cuadrícula de Bootstrap pode adaptarse nos seis puntos de interrupción predeterminados e en calquera punto de interrupción que personalice. Os seis niveis de grella predeterminados son os seguintes:

• Extra pequeno (xs)
• Pequeno (pequeno)
• Medio (md)
• Grande (lg)
• Extra grande (xl)
• Extra grande (xxl)

Como se indicou anteriormente, cada un destes puntos de interrupción ten o seu propio contedor, prefixo de clase único e modificadores. Así é como cambia a grella nestes puntos de interrupción:

Columnas de deseño automático

Use clases de columnas específicas de puntos de interrupción para facilitar o tamaño das columnas sen unha clase numerada explícita como .col-sm-6.

Igual ancho

Por exemplo, aquí tes dous deseños de grade que se aplican a todos os dispositivos e ventanas gráficas, desde xsata xxl. Engade calquera número de clases sen unidades para cada punto de interrupción que necesites e cada columna terá o mesmo ancho.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Configurando o ancho dunha columna

O deseño automático para as columnas de cuadrícula flexbox tamén significa que pode definir o ancho dunha columna e que as columnas irmáns cambien automaticamente o tamaño ao seu redor. Podes usar clases de grade predefinidas (como se mostra a continuación), mesturas de grade ou anchos en liña. Teña en conta que as outras columnas cambiarán de tamaño sen importar o ancho da columna central.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Contido de ancho variable

Use col-{breakpoint}-autoclases para dimensionar as columnas en función do ancho natural do seu contido.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Clases responsivas

A grella de Bootstrap inclúe seis niveis de clases predefinidas para crear deseños de resposta complexos. Personaliza o tamaño das túas columnas en dispositivos extra pequenos, pequenos, medianos, grandes ou extra grandes como queiras.

Todos os puntos de interrupción

Para as cuadrículas que son iguais desde o dispositivo máis pequeno ata o máis grande, utiliza as clases .cole . .col-*Especifique unha clase numerada cando necesite unha columna de tamaño especial; en caso contrario, non dubides en seguir .col.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Apilados en horizontal

Usando un único conxunto de .col-sm-*clases, pode crear un sistema de cuadrícula básico que comeza apilado e se fai horizontal no pequeno punto de interrupción ( sm).

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Mesturar e combinar

Non queres que as túas columnas simplemente se apilen nalgúns niveis de grade? Use unha combinación de diferentes clases para cada nivel segundo sexa necesario. Vexa o seguinte exemplo para ter unha mellor idea de como funciona todo.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Columnas de filas

Use as clases de resposta .row-cols-*para definir rapidamente o número de columnas que mellor representan o seu contido e deseño. Mentres que as clases normais .col-*aplícanse ás columnas individuais (por exemplo, .col-md-4), as clases de columnas de fila establécense no pai .rowcomo atallo. Con .row-cols-autopode darlle ás columnas o seu ancho natural.

Use estas clases de columnas de filas para crear rapidamente deseños básicos de cuadrícula ou para controlar os deseños das súas tarxetas.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Tamén podes usar o Sass mixin que se acompaña row-cols(),

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Aniñación

Para aniñar o teu contido coa grade predeterminada, engade unha nova .rowe un conxunto de columnas dentro dunha columna .col-sm-*existente . .col-sm-*As filas anidadas deben incluír un conxunto de columnas que suman ata 12 ou menos (non é necesario que use as 12 columnas dispoñibles).

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass

Ao usar os ficheiros Sass de orixe de Bootstrap, tes a opción de usar variables e mixins de Sass para crear deseños de páxina personalizados, semánticos e sensibles. As nosas clases de cuadrícula predefinidas usan estas mesmas variables e mixins para proporcionar un conxunto completo de clases listas para usar para deseños de resposta rápida.

Variables

As variables e os mapas determinan o número de columnas, o ancho do canal e o punto de consulta de medios no que comezar as columnas flotantes. Usamos estes para xerar as clases de cuadrícula predefinidas documentadas anteriormente, así como para as mesturas personalizadas listadas a continuación.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Mixins

Os mixins úsanse xunto coas variables da grella para xerar CSS semántico para columnas de grella individuais.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

Exemplo de uso

Podes modificar as variables aos teus propios valores personalizados ou simplemente usar os mixins cos seus valores predeterminados. Aquí tes un exemplo de uso da configuración predeterminada para crear un deseño de dúas columnas cun espazo entre eles.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Personalización da grella

Usando as nosas variables e mapas Sass de grade incorporados, é posible personalizar completamente as clases de grade predefinidas. Cambie o número de niveis, as dimensións da consulta de medios e o ancho do contenedor e, a continuación, recompile.

Columnas e canlóns

O número de columnas da grella pódese modificar mediante variables Sass. $grid-columnsutilízase para xerar os anchos (en porcentaxe) de cada columna individual mentres $grid-gutter-widthestablece o ancho para as cunetas das columnas.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Niveles de reixa

Máis alá das propias columnas, tamén podes personalizar o número de niveis de grade. Se queres só catro niveis de grella, actualizarías $grid-breakpointse $container-max-widthsa algo así:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Cando fagas calquera cambio nas variables ou mapas de Sass, terás que gardar os cambios e recompilalos. Ao facelo, sairá un novo conxunto de clases de grade predefinidas para anchos de columnas, desprazamentos e ordes. As utilidades de visibilidade receptivas tamén se actualizarán para usar os puntos de interrupción personalizados. Asegúrate de establecer os valores da grella en px(non rem, emou %).