Système de grille fixe ou fluide, dans la conception réactive, basée sur Twitter Bootstrap

Question

Je suis confus sur les différentes options dans le twitter bootstrap grille, et comment ils vont ensemble.

Pour commencer, vous pouvez avoir un fixes ordinaires, container, ou un container-fluid.

Alors soit on peut inclure soit un ordinaire row, ou un fluide de ligne, row-fluid. Qui est, vous pouvez avoir un fixe récipient avec un liquide d'une ligne ou d'un conteneur de fluide... avec une ligne fixe?

Puis pour couronner le tout, vous pouvez inclure le responsive requêtes de média, ou pas.

Je suis confus quant à la façon dont ces choses interagissent. Mais commençons par un exemple évident.

Sur la page des exemples lui-même, il y a ce qui est présenté comme un exemple à la fois d'une grille fixe et une grille fluide

Cependant, dans mon navigateur, sur l'exemple de la page elle-même-les deux grilles se comportent de façon identique. Peut-être parce que la page d'exemple utilise l'option responsive media queries? Dans les deux grille d'exemples, si je commencer à se rétrécit graduellement ma fenêtre de navigateur, les éléments de la grille de ne pas obtenir progressivement plus étroite, une fois un certain (responsive) la largeur de la limite est atteinte, ils s'accrochent à une taille plus petite, et encore davantage les limites de largeurs. Mais à la fois de l'ordinaire "fixe" exemple ET le 'liquide' exemple, se comportent exactement de la même ici -- donc, ce que le diable est la différence?

Answer 1

Lorsque vous décider entre une largeur fixe de fluide et de la largeur que vous devez penser en termes de l'ENSEMBLE de votre page. En général, vous voulez choisir l'un ou l'autre, mais pas les deux. Les exemples que vous avez indiquée dans votre question sont, en fait, dans le même fixe la largeur de la page. En d'autres termes, l'Échafaudage de la page est à l'aide d'une largeur fixe de mise en page. La grille fixe et grille fluide sur l'Échafaudage de la page ne sont pas destinés à être des exemples, mais plutôt la documentation pour la mise en œuvre de fixe et de liquide de mises en page à largeur.

La bonne largeur fixe exemple est ici. Le liquide largeur de l'exemple est ici.

Lors de l'observation de la largeur fixe exemple, vous ne devriez pas voir le contenu en changeant la taille lors de votre navigateur est supérieure à 960px de large. C'est le maximum (fixe) de la largeur de la page. Les requêtes de média dans une largeur fixe design désigne la largeur minimum de styles particuliers. Vous allez le voir en action lorsque vous réduisez la fenêtre de votre navigateur et de voir la mise en page de composant logiciel enfichable pour une taille différente.

A l'inverse, le liquide de mise en page à largeur sera toujours étirer pour s'adapter à la fenêtre de votre navigateur, peu importe comment elle obtient. Les requêtes de média indiquer quand les styles de changement, mais la largeur de conteneurs sont toujours un pourcentage de la fenêtre de votre navigateur (plutôt que d'un nombre fixe de pixels).

Le responsive requêtes de média sont tous prêts à aller. Vous avez juste besoin de décider si vous souhaitez utiliser une largeur fixe ou fluide de mise en page à largeur de votre page.

Lors de la création de lignes, assurez-vous d'utiliser row avec une mise en page à largeur fixe, et row-fluid avec un fluide de largeur. Ne pas mélanger et match (sauf si vous avez une très bonne raison de le faire).

EDIT: dans les commentaires, certains jsFiddles pour:

• fluide non réactif, mise en page,
• fluide réactive mise en page,
• correction de la non-réactif de mise en page,
• fixe responsive layout.

Ces ajustements sont complètement Bootstrap-gratuit, basé sur la pure CSS media queries, ce qui en fait un bon point de départ pour quiconque est prêt à l'artisanat solution similaire sans l'aide de Twitter Bootstrap.

Answer 2

Discussion intéressante. Je me posais cette question aussi. La principale différence entre le fluide et fixe est simplement que la disposition fixe a une largeur fixe en termes de l'ensemble de la mise en page du site (viewport). Si vous avez un 960px de largeur de fenêtre d'affichage de chaque colonne a une largeur fixe qui ne changera jamais.

Le design fluide se comporte de façon différente. Imaginez que vous avez défini la largeur de votre page principale à 100% de largeur. Maintenant, chaque colonne ne sera calculée à la taille relative (c'est à dire 25%) et s'étire comme le navigateur est redimensionnée. Sur la base de votre mise en page, vous pouvez sélectionner le mode de mise en page se comporte.

Voici un bon article sur les fluides vs flex.

Answer 3

Pros

• Mises à largeur fixe sont beaucoup plus faciles à utiliser et plus facile à personnaliser en termes de conception.
• Les largeurs sont les mêmes pour tous les navigateurs, donc il ya moins de tracas avec des images, des formes, de la vidéo et d'autres contenus qui sont de largeur fixe.
• Il n'est pas nécessaire pour le min-width et max-width, ce qui n'est pas pris en charge par tous les navigateurs de toute façon.
• Même si un site web est conçu pour être compatible avec la plus petite résolution d'écran de 800×600, le contenu sera toujours suffisamment large pour une plus grande résolution pour être facilement lisible.

Cons

• D'une largeur fixe de mise en page peut créer excessive d'espace blanc pour les utilisateurs avec de grandes résolutions d'écran, donc de bouleverser la "divine proportion", la "Règle des Tiers", solde global de la balance et d'autres principes de conception.
• Les petites résolutions d'écran peut nécessiter une barre de défilement horizontale, en fonction de la disposition fixe la largeur.
• Des textures transparentes, des motifs et de l'image de continuation sont nécessaires pour accueillir des personnes avec une plus grande résolution.
• Mises à largeur fixe ont généralement un faible score total quand il s'agit de la facilité d'utilisation.

Answer 4

Design fluide dans le Bootstrap 3.

À la différence de Bootstrap 2, Bootstrap 3 n'a pas .conteneur de fluide de mixin pour faire un récipient de liquide. L' .conteneur fixe la largeur de la grille souple de mise en page. Dans un grand écran, il y a excessive des espaces blancs dans les deux côtés d'une page Web de contenu.

container-fluid est ajouté dans le Bootstrap 3.1

Une grille fluide, mise en page utilise toute la largeur de l'écran et fonctionne mieux dans le grand écran. Il s'avère que c'est facile de créer une grille fluide, mise en page à l'aide de Bootstrap 3 mixin. La ligne suivante fait un liquide réactif de la grille de mise en page:

.conteneur fixe;

L' .conteneur fixe mixin définit le contenu au centre de l'écran et ajouter des remplissages. Il ne spécifie fixe la largeur de la page.

Une autre approche consiste à utiliser Eric Fleurs de style CSS

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