Elemento de contêiner
Observação: as informações neste artigo se aplicam apenas às páginas web.
Uma página sempre requer um elemento de contêiner para envolver qualquer elemento ou Widget (um ou vários) mas você não pode embrulhar um contêiner dentro de outro.
Em um elemento de contêiner, você pode definir até 4 colunas e também definir larguras diferentes para cada uma dessas colunas. Isso dá a você a capacidade de obter uma ampla variedade de designs. Essas colunas se comportam de maneira diferente dependendo do tamanho da tela (como telas de dispositivos móveis).
É assim que nosso sistema de grade se adapta dependendo do tamanho da tela:
|
Telas grandes (≥1200 px) |
Telas médias (≥992 px) |
Telas pequenas (≥768 px) |
Telas extra pequenas (<768px) |
|
|---|---|---|---|---|
| Comportamento da coluna | Horizontal | Vertical (empilhado) |
||
| Largura do contêiner | 1170 px | 970 px | 750px | Automático (100%) |
| Largura de banda | 30px (15px em cada lado de uma coluna) | |||
Aqui você pode ver um exemplo do sistema de grade em ação e como as colunas são empilhadas em telas menores :
Veja a imagem a seguir para aprender como adicionar um contêiner, configurar o número de colunas e personalizar a largura de cada coluna em uma página: