Système de grille fluide ou fixe, au design réactif, basé sur Twitter Bootstrap

Je suis confus au sujet des différentes options de la grille d'amorçage Twitter et de la façon dont elles vont ensemble.

Pour commencer, vous pouvez avoir un fixe ordinaire container, ou un container-fluid.

Ensuite, l'un ou l'autre peut inclure soit une ligne ordinaire row, soit une ligne fluide row-fluid. Autrement dit, vous pouvez avoir un conteneur fixe avec une ligne de fluide, ou un conteneur-fluide ... avec une ligne fixe?

En plus de cela, vous pouvez inclure ou non les requêtes multimédias «réactives».

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

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

Cependant, dans mon navigateur, sur cette page d'exemple elle-même - les deux grilles se comportent de manière identique. Peut-être parce que la page d'exemple utilise les requêtes multimédias réactives facultatives? Dans les deux exemples de grille, si je commence à rétrécir progressivement la fenêtre de mon navigateur, les éléments de la grille ne deviennent pas progressivement plus étroits - une fois qu'une certaine largeur de limite (réactive) est atteinte, ils s'alignent sur une taille plus petite, et à nouveau à d'autres largeurs de limite. Mais à la fois l'exemple «fixe» ordinaire et l'exemple «fluide» se comportent exactement de la même manière ici - alors quelle est la différence?

Lorsque vous décidez entre largeur fixe et largeur fluide, vous devez penser en termes de votre page ENTIÈRE. Généralement, vous voulez choisir l'un ou l'autre, mais pas les deux. Les exemples que vous avez énumérés dans votre question se trouvent en fait dans la même page à largeur fixe. En d'autres termes, la page Échafaudage utilise une disposition à largeur fixe. La grille fixe et la grille fluide sur la page Échafaudage ne sont pas censées être des exemples, mais plutôt la documentation pour implémenter des dispositions de largeur fixe et fluide.

L'exemple de largeur fixe approprié est ici . Le bon exemple de largeur de fluide est ici .

Lorsque vous observez l'exemple à largeur fixe, vous ne devriez pas voir le contenu changer de taille lorsque votre navigateur est supérieur à 960 px. Il s'agit de la largeur maximale (fixe) de la page. Les requêtes multimédias dans une conception à largeur fixe désigneront les largeurs minimales pour des styles particuliers. Vous le verrez en action lorsque vous réduisez la fenêtre de votre navigateur et que la mise en page s'accroche à une taille différente.

Inversement, la disposition de largeur fluide s'étirera toujours pour s'adapter à la fenêtre de votre navigateur, quelle que soit sa largeur. Les requêtes multimédias indiquent quand les styles changent, mais la largeur des conteneurs est toujours un pourcentage de la fenêtre de votre navigateur (plutôt qu'un nombre fixe de pixels).

Les requêtes multimédias «réactives» sont toutes prêtes à l'emploi. Il vous suffit de décider si vous souhaitez utiliser une mise en page à largeur fixe ou à largeur fluide pour votre page.

Auparavant, dans bootstrap 2, vous deviez utiliser à l' row-fluidintérieur d'un conteneur de fluide et à l' rowintérieur d'un conteneur fixe. Avec l'introduction du bootstrap 3, a row-fluidété supprimé, ne l'utilisez plus .

EDIT : Selon les commentaires, certains jsFiddles pour:

• disposition fluide et non réactive ,
• disposition réactive fluide ,
• disposition fixe non réactive ,
• mise en page réactive fixe .

Ces violons sont totalement sans Bootstrap, basés sur des requêtes média CSS pures, ce qui en fait un bon point de départ pour quiconque souhaite créer une solution similaire sans utiliser Twitter Bootstrap.

Discussion intéressante. Je me posais aussi cette question. La principale différence entre fluide et fixe est simplement que la mise en page fixe a une largeur fixe en termes de mise en page complète du site Web (fenêtre d'affichage). Si vous avez une fenêtre d'affichage d'une largeur de 960 pixels, chaque colonne a une largeur fixe qui ne changera jamais.

La disposition fluide se comporte différemment. Imaginez que vous avez défini la largeur de votre mise en page principale à 100% de largeur. Désormais, chaque colonne ne sera calculée qu'à sa taille relative (c'est-à-dire 25%) et s'étire lorsque le navigateur sera redimensionné. Ainsi, en fonction de votre objectif de mise en page, vous pouvez sélectionner le comportement de votre mise en page.

Voici un bon article sur le fluide contre le flex .

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

Avantages

• Les dispositions à largeur fixe sont beaucoup plus faciles à utiliser et à personnaliser en termes de conception.
• Les largeurs sont les mêmes pour tous les navigateurs, il y a donc moins de soucis avec les images, les formulaires, les vidéos et autres contenus à largeur fixe.
• Il n'y a pas besoin de largeur minimale ou maximale, 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, 800 × 600, le contenu sera toujours assez large à une résolution plus grande pour être facilement lisible.

Les inconvénients

• Une disposition à largeur fixe peut créer un espace blanc excessif pour les utilisateurs avec des résolutions d'écran plus grandes, bouleversant ainsi la «proportion divine», la «règle des tiers», l'équilibre général et d'autres principes de conception.
• Les résolutions d'écran plus petites peuvent nécessiter une barre de défilement horizontale, selon la largeur de la disposition fixe.
• Des textures, des motifs et une continuation d'image sans couture sont nécessaires pour s'adapter à ceux qui ont des résolutions plus grandes.
• Les mises en page à largeur fixe ont généralement un score global inférieur en termes de convivialité.

Disposition fluide dans Bootstrap 3.

Contrairement à Boostrap 2, Bootstrap 3 n'a pas de mixin .container-fluid pour faire un conteneur de fluide. Le .container est une disposition de grille sensible à largeur fixe. Sur un grand écran, il y a des espaces blancs excessifs des deux côtés du contenu de la page Web.

container-fluid est ajouté dans Bootstrap 3.1

Une disposition de grille fluide utilise toute la largeur de l'écran et fonctionne mieux sur grand écran. Il s'avère qu'il est facile de créer une disposition de grille fluide à l'aide de mixins Bootstrap 3. La ligne suivante crée une disposition de grille réactive fluide:

.container-fixed;

Le mixin fixé par .container place le contenu au centre de l'écran et ajoute des rembourrages. Il ne spécifie pas une largeur de page fixe.

Une autre approche consiste à utiliser le style CSS d'Eric Flowers

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

vous pouvez utiliser ceci - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. jetez un oeil .. J'ai trouvé celui-ci vraiment très utile. Bonnes performances, très léger, tous importants pour le navigateur et fluides en soi, vous n'avez donc pas vraiment besoin de bootstrap pour la grille.