Bootstrap - Demonstração de grade

O que é uma grade?

No design gráfico, uma grade é uma estrutura (geralmente bidimensional) composta por uma série de linhas retas que se cruzam (verticais, horizontais) usadas para estruturar o conteúdo. É amplamente utilizado para projetar layout e estrutura de conteúdo em design de impressão. Em web design, é um método muito eficaz para criar um layout consistente de forma rápida e eficaz usando HTML e CSS.

Funcionamento do sistema Bootstrap Grid

Os sistemas de grade são usados ​​para criar layouts de página por meio de uma série de linhas e colunas que hospedam seu conteúdo. Veja como funciona o sistema de grade Bootstrap -

• As linhas devem ser colocadas dentro de um .container classe para alinhamento e preenchimento adequados.

• Use linhas para criar grupos horizontais de colunas.

• O conteúdo deve ser colocado dentro das colunas, e apenas as colunas podem ser filhos imediatos das linhas.

• Classes de grade predefinidas como .row and .col-xs-4estão disponíveis para criar layouts de grade rapidamente. Mixins MENOS também podem ser usados ​​para layouts mais semânticos.

• As colunas criam medianizes (lacunas entre o conteúdo da coluna) por meio de preenchimento. Esse preenchimento é deslocado em linhas para a primeira e a última coluna por meio de margem negativa em.rows.

• As colunas de grade são criadas especificando-se o número de doze colunas disponíveis que você deseja expandir. Por exemplo, três colunas iguais usariam três.col-xs-4.