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


399

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?


6
Talvez este seja um exemplo melhor do estilo de layout fluido?
Cody Gray

Respostas:


442

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:

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.


11
hmm, ok, os documentos me pareciam sugerir que você poderia misturar e combinar fluidos e fixos, mas acho que é para uso avançado que não estou preparado. :) Ainda não entendo como as responsivealterações são fixas e fluidas, respectivamente - você pode usar responsivo (ou não) com fixas e fluidas, certo? Você pode explicar como a resposta afeta cada um deles?
Jrochkind

8
a coisa confusa para mim é que o exemplo de 'largura fixa adequada' altera os tamanhos das colunas à medida que a janela do navegador muda (porque é responsiva?) E o exemplo da largura do fluido é o mesmo. Mas acho que o exemplo de largura de fluido faz isso continuamente, e o exemplo responsivo de largura fixa faz em saltos discretos, além de atingir um tamanho máximo? É isso? Que tal responsivo a fluidos vs não responsivo?
Jrochkind

16
Você conseguiu. No layout de largura fixa, as colunas mudam quando a janela do navegador atinge uma largura definida em uma consulta de mídia. Portanto, quando a janela tiver mais de 960 px de largura, ela permanecerá na largura máxima. Então, quando você reduzir o seu navegador para 959px, ele será ajustado para um novo layout com base em uma consulta de mídia com largura máxima de 768px. Então porque você está vendo uma largura fixa layout, as colunas não vai mudar quando a largura do navegador é entre 768 e 960.
eterps

3
E quando você está visualizando um layout de largura de fluido, os tamanhos das colunas sempre mudam para corresponder à largura do seu navegador. O layout em si também será alterado de acordo com as consultas da mídia, como no layout de largura fixa.
28312 eterps

12
A coisa mais importante a lembrar é que largura fixa = pixels e largura do fluido = porcentagem. A capacidade de resposta vem de todas as sofisticadas regras CSS definidas em bootstrap-responsive.css, e essas regras se aplicam a ambos os layouts.
28312 eterps

21

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 .


7

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.

6

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

2
Não entendo por que as pessoas continuam dizendo que 'container-fluid' não é suportado no Bootstrap 3, enquanto é. Acabei de verificar e no Bootstrap 3.1.0 está claramente definido.
Bart

10
Isso porque foi removido em 3 e adicionado novamente em 3.1 .
Steve Klösters 28/03

-2

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.


11
Embora esse link possa responder à pergunta, é melhor incluir aqui as partes essenciais da resposta e fornecer o link para referência. As respostas somente para links podem se tornar inválidas se a página vinculada for alterada. - Do comentário
piet.t

Eu concordo .. mas isso não é uma referência à resposta, este é um link para o plug-in, onde os arquivos podem ser baixados, acho que não posso anexar arquivos com a resposta aqui ..
entusiasta
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.