Sistema de grade fixa ou fluida, com design responsivo, baseado no Twitter Bootstrap

Estou ficando confuso sobre as várias opções na grade de inicialização do twitter e como elas funcionam juntas.

Para começar, você pode ter um fixo comum containerou a container-fluid.

Então, qualquer um pode incluir uma linha comum rowou uma linha fluida row-fluid. Ou seja, você pode ter um contêiner fixo com uma linha de fluido ou um fluido de contêiner ... com uma linha fixa?

Além disso, você pode incluir as consultas de mídia 'responsivas' ou não.

Estou ficando confuso sobre como essas coisas interagem. Mas vamos começar com um exemplo óbvio.

Na própria página de exemplos , há o que é apresentado como um exemplo de uma grade fixa e uma grade fluida

No entanto, no meu navegador, na própria página de exemplo - ambas as grades se comportam de forma idêntica. Talvez porque a página de exemplo use as consultas de mídia responsivas opcionais? Nos dois exemplos de grade, se eu começar a estreitar gradualmente a janela do navegador, os elementos da grade não ficarão mais estreitos - uma vez atingida uma certa largura de limite (responsiva), eles se ajustam a um tamanho menor e novamente a outras larguras de limite. Mas tanto o exemplo "fixo" comum E o exemplo "fluido" se comportam exatamente da mesma maneira aqui - então qual é a diferença?

Quando você decide entre largura fixa e largura de fluido, precisa pensar em termos de sua página INTEIRO. Geralmente, você deseja escolher um ou outro, mas não ambos. Os exemplos que você listou na sua pergunta estão, de fato, na mesma página de largura fixa. Em outras palavras, a página Andaimes está usando um layout de largura fixa. A grade fixa e a grade de fluido na página Andaimes não devem ser exemplos, mas sim a documentação para implementar layouts de largura fixa e de fluido.

O exemplo adequado de largura fixa está aqui . O exemplo apropriado da largura do fluido está aqui .

Ao observar o exemplo de largura fixa, você não verá o conteúdo alterando os tamanhos quando o navegador tiver mais de 960 px de largura. Essa é a largura máxima (fixa) da página. As consultas de mídia em um design de largura fixa designarão as larguras mínimas para estilos específicos. Você verá isso em ação quando reduzir a janela do navegador e o layout se ajustar a um tamanho diferente.

Por outro lado, o layout de largura do fluido sempre se estenderá para caber na janela do navegador, não importa a largura. As consultas de mídia indicam quando os estilos mudam, mas a largura dos contêineres é sempre uma porcentagem da janela do navegador (em vez de um número fixo de pixels).

As consultas de mídia 'responsivas' estão prontas para serem usadas. Você só precisa decidir se deseja usar um layout de largura fixa ou largura de fluido para sua página.

Anteriormente, no bootstrap 2, era necessário usar row-fluiddentro de um contêiner de fluido e rowdentro de um contêiner fixo. Com a introdução do bootstrap 3, row-fluidfoi removido, não o use mais .

EDIT : De acordo com os comentários, alguns jsFiddles para:

• layout não responsivo e fluido ,
• layout responsivo fluido ,
• layout não responsivo fixo ,
• layout responsivo fixo .

Esses problemas são completamente livres de Bootstrap, com base em consultas de mídia CSS puras, o que os torna um bom ponto de partida para quem deseja criar uma solução semelhante sem usar o Twitter Bootstrap.

Discussão interessante. Eu estava me fazendo essa pergunta também. A principal diferença entre fluido e fixo é simplesmente que o layout fixo tem uma largura fixa em termos de todo o layout do site (janela de visualização). Se você possui uma viewport de 960px de largura, cada coluna tem uma largura fixa que nunca será alterada.

O layout do fluido se comporta de maneira diferente. Imagine que você definiu a largura do seu layout principal como 100% de largura. Agora, cada coluna será calculada apenas para seu tamanho relativo (ou seja, 25%) e se estenderá conforme o navegador será redimensionado. Portanto, com base no seu propósito de layout, você pode selecionar como seu layout se comporta.

Aqui está um bom artigo sobre fluidos vs. flex .

Fonte - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Prós

• Os layouts de largura fixa são muito mais fáceis de usar e mais personalizados em termos de design.
• As larguras são as mesmas para todos os navegadores; portanto, há menos problemas com imagens, formulários, vídeos e outros conteúdos com largura fixa.
• Não há necessidade de largura mínima ou largura máxima, que não é suportada por todos os navegadores de qualquer maneira.
• Mesmo que um site seja projetado para ser compatível com a menor resolução de tela, 800 × 600, o conteúdo ainda será amplo o suficiente em uma resolução maior para ser facilmente legível.

Contras

• Um layout de largura fixa pode criar espaço em branco excessivo para usuários com resoluções de tela maiores, perturbando a “proporção divina”, a “Regra dos terços”, o equilíbrio geral e outros princípios de design.
• Resoluções de tela menores podem exigir uma barra de rolagem horizontal, dependendo da largura do layout fixo.
• Texturas sem costura, padrões e continuação de imagem são necessários para acomodar aqueles com resoluções maiores.
• Os layouts de largura fixa geralmente têm uma pontuação geral mais baixa quando se trata de usabilidade.

Layout de fluido no Bootstrap 3.

Ao contrário do Boostrap 2, o Bootstrap 3 não possui uma mistura de fluido e recipiente para fazer um recipiente de fluido. O .container é um layout de grade responsivo de largura fixa. Em uma tela grande, há espaços em branco excessivos nos dois lados do conteúdo da página da Web.

container-fluid é adicionado novamente no Bootstrap 3.1

Um layout de grade fluida usa toda a largura da tela e funciona melhor em tela grande. Acontece que é fácil criar um layout de grade de fluido usando o Bootstrap 3 mixins. A linha a seguir cria um layout de grade responsivo fluido:

fixo em contêiner;

O mixin fixo .container define o conteúdo no centro da tela e adiciona preenchimentos. Não especifica uma largura de página fixa.

Outra abordagem é usar o estilo CSS de Eric Flowers

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

você pode usar isso - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. dê uma olhada .. Achei esse realmente muito útil. Bom desempenho, muito leve, tudo importante para o navegador e fluido por si só, para que você não precise realmente de bootstrap para a grade.