Sistema de rede

Exemplo

O sistema de grade do Bootstrap usa uma série de contêineres, linhas e colunas para layout e alinhamento de conteúdo. É construído com flexbox e é totalmente responsivo. Abaixo está um exemplo e uma explicação detalhada de como o sistema de grade se une.

<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 acima cria três colunas de largura igual em todos os dispositivos e viewports usando nossas classes de grade predefinidas. Essas colunas são centralizadas na página com o pai .container.

Como funciona

Resumindo, veja como o sistema de grade se une:

• Nossa grade suporta seis pontos de interrupção responsivos . Os pontos de interrupção são baseados em min-widthconsultas de mídia, o que significa que eles afetam esse ponto de interrupção e todos os que estão acima dele (por exemplo, .col-sm-4aplica-se a sm, md, lg, xle xxl). Isso significa que você pode controlar o tamanho e o comportamento do contêiner e da coluna por cada ponto de interrupção.

• Os contêineres centralizam e preenchem horizontalmente seu conteúdo. Use .containerpara uma largura de pixel responsiva, .container-fluidpara width: 100%todas as janelas de visualização e dispositivos, ou um contêiner responsivo (por exemplo, .container-md) para uma combinação de larguras fluidas e de pixel.

• As linhas são wrappers para colunas. Cada coluna tem horizontal padding(chamada de calha) para controlar o espaço entre elas. Isso paddingé então neutralizado nas linhas com margens negativas para garantir que o conteúdo em suas colunas seja alinhado visualmente no lado esquerdo. As linhas também oferecem suporte a classes modificadoras para aplicar de maneira uniforme o dimensionamento de colunas e as classes de medianiz para alterar o espaçamento do seu conteúdo.

• As colunas são incrivelmente flexíveis. Existem 12 colunas de modelo disponíveis por linha, permitindo que você crie diferentes combinações de elementos que abrangem qualquer número de colunas. As classes de coluna indicam o número de colunas de modelo a serem estendidas (por exemplo, col-4abrange quatro). widths são definidos em porcentagens para que você sempre tenha o mesmo dimensionamento relativo.

• As calhas também são responsivas e personalizáveis. As classes Gutter estão disponíveis em todos os pontos de interrupção, com todos os mesmos tamanhos de margem e espaçamento de preenchimento . Altere medianizes horizontais com .gx-*classes, medianizes verticais com .gy-*ou todas as medianizes com .g-*classes. .g-0também está disponível para remover calhas.

• Variáveis, mapas e mixins Sass alimentam a rede. Se você não quiser usar as classes de grade predefinidas no Bootstrap, você pode usar a fonte Sass da nossa grade para criar a sua própria com marcação mais semântica. Também incluímos algumas propriedades personalizadas CSS para consumir essas variáveis ​​Sass para uma flexibilidade ainda maior para você.

Esteja ciente das limitações e bugs do flexbox , como a incapacidade de usar alguns elementos HTML como contêineres flexíveis .

Opções de grade

O sistema de grade do Bootstrap pode se adaptar em todos os seis pontos de interrupção padrão e em qualquer ponto de interrupção que você personalizar. As seis camadas de grade padrão são as seguintes:

• Extra pequeno (xs)
• Pequeno (m)
• Médio (md)
• Grande (lg)
• Extra grande (xl)
• Extra extra grande (xxl)

Conforme observado acima, cada um desses pontos de interrupção tem seu próprio contêiner, prefixo de classe exclusivo e modificadores. Veja como a grade muda nesses pontos de interrupção:

Colunas de layout automático

Utilize classes de coluna específicas de ponto de interrupção para facilitar o dimensionamento de colunas sem uma classe numerada explícita como .col-sm-6.

Largura igual

Por exemplo, aqui estão dois layouts de grade que se aplicam a todos os dispositivos e viewports, xsde xxl. Adicione qualquer número de classes sem unidade para cada ponto de interrupção necessário e todas as colunas terão a mesma largura.

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

Definindo a largura de uma coluna

O layout automático para colunas de grade flexbox também significa que você pode definir a largura de uma coluna e fazer com que as colunas irmãs sejam redimensionadas automaticamente em torno dela. Você pode usar classes de grade predefinidas (como mostrado abaixo), mixins de grade ou larguras em linha. Observe que as outras colunas serão redimensionadas independentemente da largura da coluna 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>

Conteúdo de largura variável

Use col-{breakpoint}-autoclasses para dimensionar colunas com base na largura natural de seu conteúdo.

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

Aulas responsivas

A grade do Bootstrap inclui seis camadas de classes predefinidas para construir layouts responsivos complexos. Personalize o tamanho de suas colunas em dispositivos extra pequenos, pequenos, médios, grandes ou extragrandes como achar melhor.

Todos os pontos de interrupção

Para grades que são iguais do menor ao maior dos dispositivos, use as classes .cole . .col-*Especifique uma classe numerada quando precisar de uma coluna de tamanho específico; caso contrário, fique à vontade para manter o .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>

Empilhado na horizontal

Usando um único conjunto de .col-sm-*classes, você pode criar um sistema de grade básico que começa empilhado e se torna horizontal no pequeno ponto de interrupção ( 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>

Misturar e combinar

Não quer que suas colunas simplesmente empilhem em algumas camadas de grade? Use uma combinação de classes diferentes para cada camada, conforme necessário. Veja o exemplo abaixo para ter uma ideia melhor de como tudo funciona.

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

Colunas de linha

Use as .row-cols-*classes responsivas para definir rapidamente o número de colunas que melhor renderizam seu conteúdo e layout. Enquanto as .col-*classes normais se aplicam às colunas individuais (por exemplo, .col-md-4), as classes das colunas de linha são definidas no pai .rowcomo padrão para colunas contidas. Com .row-cols-autovocê pode dar às colunas sua largura natural.

Use essas classes de colunas de linha para criar rapidamente layouts de grade básicos ou para controlar seus layouts de cartão e substituir quando necessário no nível da coluna.

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

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

Você também pode usar o mixin Sass que o acompanha, 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);
  }
}

Aninhamento

Para aninhar seu conteúdo com a grade padrão, adicione um novo .rowe um conjunto de .col-sm-*colunas em uma .col-sm-*coluna existente. As linhas aninhadas devem incluir um conjunto de colunas que somam 12 ou menos (não é necessário usar todas as 12 colunas disponíveis).

<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 arquivos Sass de origem do Bootstrap, você tem a opção de usar variáveis ​​e mixins Sass para criar layouts de página personalizados, semânticos e responsivos. Nossas classes de grade predefinidas usam essas mesmas variáveis ​​e mixins para fornecer um conjunto completo de classes prontas para uso para layouts responsivos rápidos.

Variáveis

Variáveis ​​e mapas determinam o número de colunas, a largura da medianiz e o ponto de consulta de mídia no qual as colunas flutuantes devem ser iniciadas. Nós os usamos para gerar as classes de grade predefinidas documentadas acima, bem como para os mixins personalizados listados abaixo.

$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

Mixins são usados ​​em conjunto com as variáveis ​​de grade para gerar CSS semântico para colunas de grade 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);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Exemplo de uso

Você pode modificar as variáveis ​​para seus próprios valores personalizados ou apenas usar os mixins com seus valores padrão. Aqui está um exemplo de como usar as configurações padrão para criar um layout de duas colunas com um intervalo entre elas.

.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>

Personalizando a grade

Usando nossas variáveis ​​e mapas Sass de grade integrados, é possível personalizar completamente as classes de grade predefinidas. Altere o número de camadas, as dimensões da consulta de mídia e as larguras do contêiner — depois recompile.

Colunas e calhas

O número de colunas da grade pode ser modificado por meio de variáveis ​​Sass. $grid-columnsé usado para gerar as larguras (em porcentagem) de cada coluna individual enquanto $grid-gutter-widthdefine a largura das calhas da coluna.

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

Camadas de grade

Indo além das próprias colunas, você também pode personalizar o número de camadas de grade. Se você quisesse apenas quatro camadas de grade, atualizaria o $grid-breakpointsand $container-max-widthspara algo assim:

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

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

Ao fazer qualquer alteração nas variáveis ​​ou mapas Sass, você precisará salvar suas alterações e recompilar. Isso produzirá um novo conjunto de classes de grade predefinidas para larguras de coluna, deslocamentos e ordenação. Os utilitários de visibilidade responsivos também serão atualizados para usar os pontos de interrupção personalizados. Certifique-se de definir valores de grade em px(não rem, em, ou %).