Visual Language
Grid
Opções de grid
Como a nossa base é o Bootstrap, temos as mesmas opções de grid que o framework.
Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices <small>Desktops (≥992px)</small> | Large devices <small>Desktops (≥1200px)</small> | |
---|---|---|---|---|
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
Container width | None (auto) | 750px | 970px | 1170px |
Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
# of columns | 12 | |||
Column width | Auto | ~62px | ~81px | ~97px |
Gutter width | 30px (15px on each side of a column) | |||
Nestable | Yes | |||
Offsets | Yes | |||
Column ordering | Yes |
Exemplo de grid
A estrutura básica é simples. Uma div com a classe row
contendo o número máximo de 12 colunas.
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-8
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-6
.col-sm-6
.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-8.col-sm-4.col-sm-4.col-sm-4.col-sm-4.col-sm-6.col-sm-6
Variações do componente
Use as variáveis abaixo para manipular de outras formas este componente. Para mais exemplos e alternativas confira direto a documentação do bootstrap
@grid-columns: | 12; |
@grid-gutter-width: | 30px; |
@grid-float-breakpoint: | 768px; |
.container-fluid | Container 100% da tela. |